@extends('layouts.base')
@section('title', '广告详情页')
@section('content')
    <style>
        /* #app{padding-top:20px;} */
        .choosed{background:#ecf5ff;border-radius: 4px;border:1px #d9ecff solid}
        .innerbox::-webkit-scrollbar {/*滚动条整体样式*/
            width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.1);
        }
        .innerbox::-webkit-scrollbar-track {/*滚动条里面轨道*/
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.05);
        }
        /* 上传图片 */
        .avatar-uploader .el-upload {margin-top:15px;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;}
        .avatar-uploader .el-upload:hover {border-color: #409EFF;}
        .avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}
        .avatar {width: 178px;height: 178px;display: block;}
        .el-upload-tip{width:178px;margin:0;padding:0;color:#999;text-align:center;}
        input[type=file] {display: none;}
        .avatar-uploader-box{position:relative;width:200px;}
        .el-icon-circle-close{position:absolute;top:10px;right:0;color:#999;}

        .avatar-uploader-box{position:relative;width:200px;display: inline-block;margin-bottom: 10px;}
        .avatar-uploader-box1{position:relative;width:200px;margin-bottom: 10px;}
        .el-icon-circle-close{position:absolute;top:0px;right:10px;color:#999;}
        .el-breadcrumb{padding:30px 0;font-size:16px;}
    </style>
    <div id="app">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item><a href="{{ yzWebFullUrl('plugin.advert-market.admin.advert.manage.index') }}">广告管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>添加修改</el-breadcrumb-item>
        </el-breadcrumb>

        <el-form ref="form" :rules="rules" :model="form" label-width="17%">
            <el-form-item label="广告ID" v-if="id">
                <div>[[ id ]]</div>
            </el-form-item>
            <el-form-item label="广告名称">
                <el-input placeholder="广告名称" v-model="form.advert_name"  style="width:70%;"></el-input>
            </el-form-item>
            <el-form-item label="广告主">
                <el-input placeholder="广告主" v-model="member_text"  style="width:70%;" :disabled="true"></el-input>
                <el-button @click="memberDialog = true">选择</el-button>
                <div class="avatar-uploader-box1">
                    <img v-if="member.member&&member.member.avatar_image" :src="member.member.avatar_image" class="avatar" />
                </div>
            </el-form-item>
            <el-form-item label="广告状态">
                <el-radio v-model.number="form.status" :label='1'>开启</el-radio>
                <el-radio v-model.number="form.status" :label='0'>关闭</el-radio>
            </el-form-item>
            <el-form-item label="广告类型">
                <el-radio-group v-model.number="form.advert_type" @change="typeChange">
                    <el-radio :label='1'>图片</el-radio>
                    <el-radio :label='2'>视频</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="素材" prop="thumb">
                <el-input v-model="form.advert_img" style="width:70%" disabled></el-input>
                <el-button type="primary" @click="openUpload('advert_img')">点击上传</el-button>
                <div class="avatar-uploader-box1">
                    <img v-if="form.advert_img && form.advert_type==1" :src="form.advert_img" class="avatar" />
                    <video v-if="form.advert_img && form.advert_type==2" :src="form.advert_img" class="avatar"></video>
                    <div slot="tip" class="el-upload-tip">
                    </div>
                    <i v-show="form.advert_img" class="el-icon-circle-close" @click="clearImg('advert_img')" title="点击清除图片"></i>
                </div>
            </el-form-item>
            
            <!-- <el-form-item label="素材">
                <el-input placeholder="素材"  style="width:70%;" :disabled="true"></el-input>
                <el-button>选择图片</el-button>
            </el-form-item> -->
            <el-form-item label="广告预算（元）">
                <el-input placeholder="广告预算" v-model="form.advert_budget" style="width:70%;">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>
            <el-form-item label="已使用（元）" v-if="id">
                <div>[[ used_amount ]]</div>
            </el-form-item>
            <el-form-item label="剩余预算（元）" v-if="id">
                <div>[[ surplus_amount ]]</div>
            </el-form-item>
            <el-form-item label="投放广告类型">
                <el-checkbox-group v-model="form.advert_code">
                    <el-checkbox :label="1">待机广告</el-checkbox>
                    <el-checkbox :label="2">支付广告</el-checkbox>
                </el-checkbox-group>
                
            </el-form-item>
            <el-form-item label="待机广告单价">
                <el-input placeholder="待机广告单价" v-model="form.await_amount"  style="width:70%;">
                    <template slot="append">元/分钟</template>
                </el-input>
            </el-form-item>
            <el-form-item label="支付广告单价">
                <el-input placeholder="支付广告单价" v-model="form.payment_amount"  style="width:70%;">
                    <template slot="append">元/次</template>
                </el-input>
            </el-form-item>
           
            <el-form-item label="投放区域">
                <el-tag
                    v-for="(item,index) in real_choose_area"
                    :key="index">
                    [[item.areaname]]
                </el-tag>
                <el-button @click="openAreas" size="mini">编辑</el-button>
                
            </el-form-item>
            <el-form-item label="投放门店分类">
                <el-select v-model="form.store_category" multiple filterable placeholder="请选择" style="width:70%">
                    <el-option
                    v-for="item in category_list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="success" @click.native.prevent="onSubmit" v-loading="formLoading">提交
                </el-button>
            </el-form-item>
        </el-form>
        <el-dialog
            title="请选择地区"
            :visible.sync="centerDialogVisible1"
            center>
            <div>
                已选择区域：<br>
                <el-tag
                    v-for="item in choose_area"
                    :key="item.id">
                    [[item.areaname]]
                </el-tag>
            </div>
            <div style="height:500px;overflow-y:auto">
                <div style="display:flex">
                    <div style="flex:1;padding-right:15px;">
                        <div style="text-align:center;font-weight:700;font-size:15px;">请选择省份</div>
                        <div style="height:480px;overflow:auto;" class="innerbox">
                            <div v-for="(item,index) in list1" :key="index">
                                <div style="font-weight:600;cursor:pointer;padding-left: 10px;line-height:32px;font-weight:600" :class="item.id==choose_pro_id?'choosed':''" @click="choosePro(item)">
                                    [[item.areaname]]

                                </div>
                            </div>
                        </div>

                    </div>
                    <div style="flex:1;padding-right: 15px;">
                        <div style="text-align:center;font-weight:700;font-size:15px;">请选择城市</div>
                        <div style="height:480px;overflow:auto;" class="innerbox">
                            <div v-for="(item,index) in list2" :key="index" >
                                <div style="font-weight:600;cursor:pointer;padding-left: 10px;line-height:32px;font-weight:600" :class="item.id==choose_city_id?'choosed':''" @click="chooseCity(item)">
                                    [[item.areaname]]
                                </div>
                            </div>
                        </div>

                    </div>
                    <div style="flex:1;padding-right: 15px;">
                        <div style="text-align:center;font-weight:700;font-size:15px;">请选择区域</div>
                        <div>
                            <el-button size="mini" type="primary" v-if="list3.length>0" @click="allChoose">[[all_choose%2==0?'全选':'全不选']]</el-button>
                            <div style="height:480px;overflow:auto;" class="innerbox">
                                <div v-for="(item,index) in list3" :key="index" >
                                    <div style="font-weight:600;cursor:pointer;padding-left: 10px;line-height:32px;font-weight:600" :class="item.checked==1?'choosed':''" @click="chooseArea(item,index)">
                                        [[item.areaname]]
                                    </div>
                                </div>
                            </div>
                            <!-- <el-checkbox-group v-model="choose_area" @change="change1">
                                <el-checkbox v-for="(item,index) in list3" :label="item.id" :key="item.id" :value="item.id">[[item.areaname]]</el-checkbox>
                            </el-checkbox-group> -->
                        </div>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="sureAreas">确 定</el-button>
            </span>

        </el-dialog>
         <!--弹框上传图片-->
         <el-dialog :visible.sync="centerDialogVisible" width="65%" center>
            <el-tabs v-model="activeName2" type="card">
                <el-tab-pane :label="form.advert_type==1?'上传图片':'上传视频'" name="first">
                <div
                    style="text-align: center"
                    class="submit_Img"
                    v-loading="submit_loading"
                >
                    <el-upload
                        class="avatar-uploader"
                        action="{{ yzWebFullUrl('plugin.advert-market.admin.upload.upload') }}"
                        :accept="form.advert_type==1?'image/*':'video/mp4'"
                        :show-file-list="false"
                        :on-success="uploadSuccess"
                        :before-upload="beforeUpload"
                    >
                    <div class="avatar_box" v-if="uploadImg">
                        <img :src="uploadImg" class="avatar" v-if="form.advert_type==1" />
                        <video :src="uploadImg" class="avatar" v-if="form.advert_type==2"></video>
                    </div>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                </el-tab-pane>
                <el-tab-pane :label="form.advert_type==1?'提取网络图片':'提取网络视频'" name="second">
                <el-input
                    v-model="uploadImg"
                    :placeholder="form.advert_type==1?'请输入网络图片地址':'请输入网络视频地址'"
                    style="width:90%"
                ></el-input>
                <!-- <el-button @click="transform(uploadImg)" v-loading="submit_loading">转换</el-button> -->
                </el-tab-pane>
                <el-tab-pane :label="form.advert_type==1?'浏览图片':'浏览视频'" name="third">
                <div>
                    <el-radio-group v-model="radio1" size="medium" @change="chooseYear">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="2019">2019年</el-radio-button>
                    <el-radio-button label="2018">2018年</el-radio-button>
                    <el-radio-button label="2017">2017年</el-radio-button>
                    <el-radio-button label="2016">2016年</el-radio-button>
                    </el-radio-group>
                </div>

                <div style="margin-top: 10px;">
                    <el-radio-group v-model="radio2" size="small" @change="chooseMonth">
                    <el-radio-button label="不限"></el-radio-button>
                    <el-radio-button label="1">1月</el-radio-button>
                    <el-radio-button label="2">2月</el-radio-button>
                    <el-radio-button label="3">3月</el-radio-button>
                    <el-radio-button label="4">4月</el-radio-button>
                    <el-radio-button label="5">5月</el-radio-button>
                    <el-radio-button label="6">6月</el-radio-button>
                    <el-radio-button label="7">7月</el-radio-button>
                    <el-radio-button label="8">8月</el-radio-button>
                    <el-radio-button label="9">9月</el-radio-button>
                    <el-radio-button label="10">10月</el-radio-button>
                    <el-radio-button label="11">11月</el-radio-button>
                    <el-radio-button label="12">12月</el-radio-button>
                    </el-radio-group>
                </div>

                <div id="upload-img" class="imgList" v-loading="submit_loading">
                    <div class="avatar-uploader-box" v-for="img in ImgList"  v-if="img.upload_type=='img' && form.advert_type==1">
                        <div>
                            <img
                                @click="chooseTheImg(img.thumb_url)"
                                :src="img.thumb_url"
                                class="avatar"
                            />
                            <i
                                class="el-icon-circle-close"
                                @click="deleteImg(img.id)"
                                title="点击清除图片"
                            ></i>
                        </div>
                        
                    </div>
                    <div class="avatar-uploader-box" v-for="img in ImgList" v-if="img.upload_type=='video' && form.advert_type==2">
                        <div>
                            <video
                                @click="chooseTheImg(img.thumb_url)"
                                :src="img.thumb_url"
                                class="avatar"
                            ></video>
                            <i
                                class="el-icon-circle-close"
                                @click="deleteImg(img.id)"
                                title="点击清除图片"
                            ></i>
                        </div>
                    </div>
                </div>

                <el-pagination
                    style="margin-top: 10px;text-align: right"
                    background
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :current-page.sync="current_page"
                    :total="total"
                    layout="prev, pager, next"
                >
                </el-pagination>
                </el-tab-pane>
            </el-tabs>
            <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sureImg">确 定 </el-button>
            </span>
        </el-dialog>
        <!--end-->
        <!--弹框选择会员-->
        <el-dialog :visible.sync="memberDialog"  title="选择会员">
           <div>
               <el-input v-model="keyword"  style="width:70%"></el-input>
               <el-button @click="searchMember">搜索</el-button>
               <el-table :data="member_list">
                    <el-table-column align="center" align="center" prop="id" label="会员头像">
                        <template slot-scope="scope">
                            <img v-if="scope.row.member.avatar_image" :src="scope.row.member.avatar_image" alt="" style="width:40px;height:40px;">
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="会员名称" prop="member.nickname" label=""></el-table-column>
                    <el-table-column align="center" label="手机号码" prop="member.mobile" label=""></el-table-column>

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="chooseMember(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
           </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="memberDialog = false">取 消</el-button>
                <!-- <el-button type="primary" @click="sureMember">确 定 </el-button> -->
            </span>
        </el-dialog>
        <!--end-->
    </div>



    <script>
        var app = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data() {
                // 门店分类 id 门店分类id name 门店分类名称
                let storeCategory = {!! $store_category?:'[]' !!};
                // let setting = {!! $setting?:'{}' !!};
               
                // 广告信息  添加时为空 就是你说的setting
                let advert = JSON.parse('{!! $advert !!}');
                // 已使用
                let used_amount = JSON.parse('{!! $used_amount?:0 !!}');
                // 剩余预算
                let surplus_amount = JSON.parse('{!! $surplus_amount?:0 !!}');
                console.log(storeCategory)
                // console.log(setting)
                console.log(advert)
                // 上传图片或视频 plugin.advert-market.admin.upload.upload
                // 上传历史 plugin.advert-market.admin.upload.getLocalList
                // 删除图片或视频 plugin.advert-market.admin.upload.delLocal
                // 我看拓客活动的提取网络图片没有相关操作,直接把网络图片的地址传给后台保存了.
                // 搜索会员 参数:keyword plugin.advert-market.admin.member.query.index
                // 上传视频的没弄好,上面的能用就用,不能用再说, 还有一个问题. 地址的不用vue能实现么,上传视频什么的微擎有写好的,直接就能用. 要不然全都要自己再写一遍,麻烦是小事,关键是不一定能弄出来 555
                // form [
                //  am_id 广告主id
                //  advert_name 广告名称
                //  advert_type 广告类型,1图片,2视频
                //  advert_code 广告类型,1待机,2支付 数组[1,2]
                //  advert_img 广告图片视频
                //  advert_budget 广告预算
                //  await_amount 待机广告单价
                //  payment_amount 支付广告单价
                //  status 广告状态 0 关闭 1开启
                //  store_category 投放门店分类 单个,不是数组不是多选
                //  districts 投放区域 数组
                // ]
                let form = advert?advert:{};
                let id = form.id?form.id:0;
                let arr = [];
                let arr2 = [];
                if(id!=0) {
                    form.store_category.forEach((item,index) => {
                        arr.push(item.category_id)
                    })
                    form.districts.forEach((item,index) => {
                        arr2.push(item.address)
                    })
                }
                form.store_category = arr;
                form.districts = arr2;
                console.log(form);
                console.log(123123123123123);
                let member_text = form.id? `[uid:`+form.advert_member.member.uid+`]  会员名字：`+form.advert_member.member.nickname+``:'';
                let member = form.id? form.advert_member:{};
                return {
                    id:id,
                    keyword:'',
                    memberDialog:false,
                    member:member,
                    member_text:member_text,
                    member_list:[],
                    category_list:storeCategory,
                    form: {
                        advert_type:1,
                        advert_code:[],
                        store_category:[],
                        districts:[],
                        ...form
                    },

                    used_amount:used_amount,
                    surplus_amount:surplus_amount,

                    ImgList: [],
                    activeName2: "first",
                    uploadImg: "",
                    chooseImg: "",
                    radio1: "不限", //年
                    radio2: "不限", //月
                    loading : false,
                    submit_loading : false,
                    pageSize: 0,
                    current_page: 0,
                    total: 0,
                    
                    formLoading: false,
                    centerDialogVisible: false,
                    treeData: [],
                    rules: {

                    },

                    centerDialogVisible1:false,//弹出框控制
                    list1:[],//省份列表
                    choose_pro_id:'',//选中省份id
                    list2:[],//城市列表
                    choose_city_id:'',//选中城市id
                    list3:[],//区域列表

                    real_choose_area:form.districts?form.districts:[],//真正选择的区域，接口传这个
                    choose_area:form.districts?form.districts:[],//预选择区域

                    all_choose:0,//全选按钮控制

                }
            },
            mounted: function () {
                console.log(this.form)
                this.getProList();
                this.currentChange(1);
            },
            watch:{
                
            },
            methods: {
                typeChange() {
                    console.log("hahahah");
                    this.form.advert_img = '';
                },
                // 搜索会员
                searchMember() {
                    // keyword plugin.advert-market.admin.member.query.index
                    this.$http.post("{!! yzWebUrl('plugin.advert-market.admin.member.query.index') !!}" ,{keyword:this.keyword}).then(response => {
                        if(response.data.result == 1) {
                            this.member_list = response.data.data
                        }
                        
                        }, response => {
                            console.log(response);
                        });

                },
                // 选中会员
                chooseMember(row) {
                    this.member = row;
                    this.form.am_id = row.id;
                    this.member_text = `[id:`+row.member.uid+`]  会员名字：`+row.member.nickname+``;
                    this.memberDialog = false;
                },
                //选中省份
                choosePro(item) {
                    this.choose_pro_id = item.id;
                    //城市
                    this.list3 = [];
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + item.id).then(response => {
                            this.list2 = response.data.data;
                            this.loading = false;
                        }, response => {
                            console.log(response);
                        });

                },
                //选中城市
                chooseCity(item) {
                    let that = this;
                    this.choose_city_id = item.id;
                    //城市
                    that.all_choose = 0;
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> '']) !!}" + item.id).then(response => {
                        this.list3 = [];
                        this.list3 = response.data.data;
                        for(let i=0;i<that.choose_area.length;i++) {
                            for(let j=0;j<that.list3.length;j++) {
                                var item1 = '';
                                var index1 = 1;
                                if(that.list3[j].id == that.choose_area[i].id) {
                                    index1 = 0;
                                    item1 = j;
                                    break;
                                }
                            }
                            if(index1 == 0) {
                                Vue.set(that.list3,item1,{checked:1,areaname:that.list3[item1].areaname,id:that.list3[item1].id,level:that.list3[item1].level,parentid:that.list3[item1].parentid} )
                            }
                        }
                        this.loading = false;
                    }, response => {
                        console.log(response);
                    });
                },
                //选中区域
                chooseArea(item,index) {
                    let that = this;
                    console.log(that.choose_area);
                    if(item.checked && item.checked==1) {
                        for(let i=0;i<that.choose_area.length;i++) {
                            if(item.id == that.choose_area[i].id) {
                                that.choose_area.splice(i,1);
                                continue;
                            }
                        }
                        Vue.set(that.list3,index,{checked:0,areaname:that.list3[index].areaname,id:that.list3[index].id,level:that.list3[index].level,parentid:that.list3[index].parentid} )
                        
                    }
                    else {
                        console.log("hahahahaha")
                        Vue.set(that.list3,index,{checked:1,areaname:that.list3[index].areaname,id:that.list3[index].id,level:that.list3[index].level,parentid:that.list3[index].parentid} )
                        that.choose_area.push(that.list3[index]);
                    }
                },
                //获得省份列表
                getProList() {
                    this.$http.get("{!! yzWebUrl('area.list', ['parent_id'=> 0]) !!}").then(response => {
                            this.list1 = response.data.data;

                            this.loading = false;
                        }, response => {
                            console.log(response);
                        });
                },
                //确认选择
                sureAreas() {
                    let that = this;
                    // that
                    // that.real_choose_area = that.choose_area;
                    that.real_choose_area = JSON.parse(JSON.stringify(that.choose_area));
                    that.centerDialogVisible1 = false;
                },
                //打开弹出框
                openAreas() {
                    let that = this;
                    that.centerDialogVisible1 = true;
                    that.all_choose = 0;
                    that.choose_city_id = '';
                    that.list3 = [];
                    that.choose_area = JSON.parse(JSON.stringify(that.real_choose_area));

                },
                //全选
                allChoose() {
                    console.log(this.choose_area);
                    let that = this;
                    that.all_choose ++;
                    //全不选
                    if(that.all_choose%2 == 0) {
                        for(let i=0;i<that.list3.length;i++) {
                            for(let j=0;j<that.choose_area.length;j++) {
                                var item1 = '';
                                var index1 = 1;
                                if(that.list3[i].id == that.choose_area[j].id) {
                                    index1 = 0;
                                    item1 = j;
                                    break;
                                }
                            }
                            if(index1 == 0) {
                                Vue.set(that.list3,i,{checked:0,areaname:that.list3[i].areaname,id:that.list3[i].id,level:that.list3[i].level,parentid:that.list3[i].parentid} )
                                that.choose_area.splice(item1,1);
                            }
                        }
                        for(let i=0;i<that.list3.length;i++) {
                            Vue.set(that.list3,i,{checked:0,areaname:that.list3[i].areaname,id:that.list3[i].id,level:that.list3[i].level,parentid:that.list3[i].parentid} )
                        }

                    }
                    //全选
                    if(that.all_choose%2 == 1) {
                        if(that.choose_area.length == 0) {
                            for(let i=0;i<that.list3.length;i++) {
                                Vue.set(that.list3,i,{checked:1,areaname:that.list3[i].areaname,id:that.list3[i].id,level:that.list3[i].level,parentid:that.list3[i].parentid} )
                                that.choose_area.push(that.list3[i])
                            }
                        }
                        else {
                            for(let i=0;i<that.list3.length;i++) {
                                for(let j=0;j<that.choose_area.length;j++) {
                                    var item1 = {}
                                    var index1 = 1;
                                    if(that.list3[i].id == that.choose_area[j].id) {
                                        index1 = 0;
                                        break;
                                    }
                                    else {
                                        item1 = that.list3[i];
                                        index1 = 1;
                                    }
                                }
                                if(index1 == 1) {
                                    Vue.set(item1,'checked',1 )
                                    that.choose_area.push(item1);
                                }
                                
                            }

                        }
                        

                        
                        
                    }
                    console.log(this.choose_area);

                },

                
                getImgUrl(id) {
                    let good = this.goods.find(function (good) {
                        return good.id == id;
                    });
                    console.log('=========');
                    console.log(good);
                    this.imageUrl = good.thumb;
                },
                chooseTheImg(img) {
                    this.form[this.chooseImg] = img;
                    this.centerDialogVisible = false;
                },
                chooseYear(year) {
                    this.currentChange(1);
                },
                chooseMonth(month) {
                    this.currentChange(1);
                },
                openUpload(str) {
                    this.chooseImg = str;
                    console.log(this.chooseImg)
                    this.uploadImg = "";
                    this.centerDialogVisible = true;
                },
                sureImg() {
                    this.form[this.chooseImg] = this.uploadImg;
                    this.centerDialogVisible = false;
                },
                uploadSuccess(res, file) {
                    if (res.result === 1) {
                        this.uploadImg = res.data.thumb_url;
                        this.$message.success("上传成功！");
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                // 富文本上传图片
                uploadSuccess1(res, file) {
                    if (res.result === 1) {
                        this.uploadImg1 = '';
                        this.uploadImg1 = res.data.thumb_url;
                        this.$message.success("上传成功！");
                        // this.insert();
                    } else {
                        this.$message.error(res.msg);
                    }
                    this.submit_loading = false;
                },
                beforeUpload(file) {
                    this.submit_loading = true;
                    const isLt2M = file.size / 1024 / 1024 < 4;
                    if (this.form.advert_type == 1 && !isLt2M) {
                        this.$message.error("上传图片大小不能超过 4MB!");
                        this.submit_loading = false;
                    }
                    return isLt2M;
                },
                clearImg(str) {
                    this.form[str] = "";
                },
                deleteImg(id) {
                    this.submit_loading = true;
                    this.$http
                        .post("{!! yzWebFullUrl('plugin.advert-market.admin.upload.delLocal') !!}", { id: id })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("系统删除成功");
                            this.currentChange(1);
                            this.submit_loading = false;
                        } else {
                            this.$message.error("删除出错");
                            this.submit_loading = false;
                        }
                        })
                        .catch(err => {
                        console.error(err);
                        this.submit_loading = false;
                        });
                },
                currentChange(val) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.advert-market.admin.upload.getLocalList') !!}",{ page: val, year: this.radio1, month: this.radio2 })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.total = response.data.data.list.total;
                            this.ImgList = response.data.data.list.data;
                            this.current_page = response.data.data.list.current_page;
                            this.pageSize = response.data.data.list.per_page;
                        } else {
                            this.$message.error(response.data.msg);
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },
                // 转化网络地址
                transform(url) {
                    this.submit_loading = true;
                    this.$http.post("{!! yzWebFullUrl('plugin.share-activity.admin.activity.fetch') !!}",{ url:url })
                        .then(response => {
                        if (response.data.result === 1) {
                            this.$message.success("转化成功！");
                            this.uploadImg = response.data.thumb_url
                        } else {
                            this.$message.error(response.data.msg);
                            this.uploadImg = "";
                        }
                        this.submit_loading = false;
                        })
                        .catch(err => {
                            console.error(err);
                            this.submit_loading = false;
                        });
                },

                sureMember() {

                },
                
                onSubmit() {
                    if (this.formLoading) {
                        return;
                    }
                    this.formLoading = true;
                    console.log(this.form);
                    console.log(this.real_choose_area);
                    this.form.districts = this.real_choose_area;
                    // let setting = {
                    //     form:this.form,
                    //     areas:this.real_choose_area
                    // };
                    let form = {};
                    if(this.form.id) {
                        form = {
                            id:this.form.id,
                            am_id :this.form.am_id,
                            advert_name :this.form.advert_name,
                            advert_type :this.form.advert_type,
                            advert_code :this.form.advert_code,
                            advert_img :this.form.advert_img,
                            advert_budget:this.form.advert_budget,
                            await_amount :this.form.await_amount,
                            payment_amount :this.form.payment_amount,
                            status :this.form.status,
                            store_category :this.form.store_category,
                            districts :this.form.districts,
                        };
                    }
                    let setting = this.form.id?form:this.form;
                    console.log('=======');
                    console.log(setting);

                    // 提交地址就是这个
                    this.$http.post("{!! yzWebUrl('plugin.advert-market.admin.advert.store') !!}", {'setting': setting}).then(response => {
                        //console.log(response.data);
                        // return;
                        if (response.data.result) {
                            this.$message({
                                message: response.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error'
                            });
                        }

                        this.formLoading = false;
                    }, response => {
                        console.log(response);
                    });
                },

            }
        });
    </script>
@endsection