@extends('layouts.base')
@section('title', '活动管理')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-ohter.css')}}"/>
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<style>
.main-panel{
    margin-top:50px;
}
.add-goods{
    width: 120px;
	height: 120px;
	border: dashed 1px #dde2ee;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
    .num{
    width:60px;
    height:40px;

}
.num .el-input__inner{
    width:60px;
    height:40px;
}
</style>
<div id='re_content' >
        <div class="vue-crumbs">
            <a @click="goback">活动列表</a> > 添加活动
        </div>
    <div class="con">
        <div class="setting">
            <div class="block">
            <el-form label-width="15%">
            <div class="title" style="justify-content: space-between;"><div style="display:flex;align-items:center;"><span style="width: 4px;height: 18px;background-color: #29ba9c;margin-right:15px;display:inline-block;"></span><b>添加活动</b><span></div></div>
                <el-form-item label="活动名称"  >    
                    <el-input placeholder="如:一口价20元3件" v-model="form.activity_name" type="text" style="width:50%;" ></el-input>
                </el-form-item>
                <el-form-item label="活动时间"  >    
                    <el-date-picker
                        v-model="form.start_at"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="timestamp" 
                        placeholder="选择日期">
                    </el-date-picker>
                    至
                    <el-date-picker
                        v-model="form.end_at"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        value-format="timestamp" 
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="活动详情"  >    
                    <el-input  v-model="form.pack_price" type="text" style="width:20%;"></el-input><span style="margin-left:10px;margin-right:10px;">元</span>,
                    任选
                    <el-input  v-model="form.goods_count" type="text" style="width:20%;"></el-input><span style="margin-left:10px;">件</span>
                    <div>如：指定活动商品，顾客可以花100元（不含运费）任选3件。</div>
                </el-form-item>
                <el-form-item label="活动商品" prop="goods_id">
                        <div style="display:flex;flex-wrap: wrap;width:70%;">
                        <div class="good" v-for="(item,index,key) in thumbList" style="width:120px;display:flex;margin-right:20px;flex-direction: column">
                            <div class="img" style="position:relative;">
                                <a style="color:#333;"><div style="width: 20px;height: 20px;background-color: #dde2ee;display:flex;align-items:center;justify-content:center; #999999;position:absolute;right:-10px;top:-10px;border-radius:50%;" @click="delGoods(item)">X</div></a>
                                <img :src="item.thumb" style="width:120px;height:120px;">   
                            </div>
                            <div style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;font-size:12px;">[[item.title]][ID:[[item.id]]]</div>
                        </div>
                        <div class="add-goods" @click="openGoods()" >
                            <a style="font-size:32px;color: #999999;"><i class="el-icon-plus" ></i></a>
                            <div style="color: #999999;">选择商品</div>
                        </div>
                        </div>
                        <div style="width:60%;">只能选择平台自营、供应商、供应链、聚合供应链、应用市场商品！</div>
                </el-form-item> 
                <el-form-item label="活动页展示规则"  >    
                    <template>
                        <el-radio-group v-model="form.rule">
                            <el-radio label="0">默认文案</el-radio>
                            
                            <el-radio label="1">自定义图片</el-radio>
                   
                        </el-radio-group>
                    </template>
                    <div v-show="form.rule=='0'">根据优惠设置自动生成规则文案,在活动页顶部展示</div>
                    <div v-show="form.rule=='1'">用自制的图片在活动页顶部展示(无默认文案)</div>
                </el-form-item>
                <el-form-item label=" "  >    
                   <span style="color:red;cursor:pointer;" @click="openDia">查看示例</span>
                </el-form-item>
                <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
            
                <el-form-item label="" prop="head_img_url" v-if="form.rule=='1'">
                            <div class="upload-box" @click="openUpload('custom_thumb')" v-if="!form.custom_thumb_url">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('custom_thumb')" class="upload-boxed" v-if="form.custom_thumb_url" >
                                <img :src="form.custom_thumb_url" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">建议尺寸:750*1334 , 为长方形图片</div>
                </el-form-item>
                <div style="position: absolute;right: 100px;top: 50px;">
                    <img :src="normal" style="width: 290px;height: 499px;"> 
                </div>
            </el-form>
            <el-dialog
                center
                title="示例图片"
                :visible.sync="dialogVisible"
                width="60%">
                <div style="display:flex;justify-content: center;">
                    <img :src="normal" style="width:45%;">
                    <img :src="custom" style="width:45%;">
                </div>
            </el-dialog>
            <el-dialog :visible.sync="goodsShow" width="60%" center title="选择商品">
                <div>
                    <div style="text-align: center">
                        <el-input v-model="search_form.keyword" style="width:80%"></el-input>
                        <el-button type="primary" @click="searchGoods()" style="margin-left:20px;">搜索</el-button>
                    </div>
                    <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto"
                        ref="caseTable"
                        @select="handleTableSelect"
                        @select-all="handleTableSelectAll"
                        >
                    <el-table-column type="selection" width="55" :selectable='isDisabled'></el-table-column>
                        <el-table-column label="ID" prop="id" align="center" ></el-table-column>
                        <el-table-column label="商品信息">
                            <template slot-scope="scope">
                                <div v-if="scope.row" style="display:flex;align-items: center;justify-content:flex-start;">
                                    <img v-if="scope.row.thumb" :src="scope.row.thumb" style="width:50px;height:50px"></img>
                                    <div style="margin-left:10px">[[scope.row.title]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column prop="refund_time" label="操作" align="center" >
                            <template slot-scope="scope">
                                <el-button @click="sureGoods(scope.row)" v-if="!scope.row.checked">
                                    选择
                                </el-button>
                                <el-button disabled v-if="scope.row.checked">
                                    选择
                                </el-button>
                            </template>
                        </el-table-column> -->
                    </el-table>
                </div>
                <el-row>
                    <el-col :span="24" align="right" migra style="padding:15px 5% 15px 0" v-loading="loading">
                        <el-pagination background layout="prev, pager, next" @current-change="currentChange" :total="page_total"
                            :page-size="page_size" :current-page="current_page"></el-pagination>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="goodsShow = false">取 消</el-button>
                    <el-button type="primary" @click="sureGoods">确 定 </el-button>
                </span>
            </el-dialog>
            <div class="confirm-btn">
            <el-button  @click="submit" type="primary">提交</el-button>
        </div>
        </div>
  </template>
        </div>
    
    </div>
</div>
@include('public.admin.uploadImg') 
<script>
        const custom = `{!! resource_get('plugins/pack-fixed-price/assets/image/custom.png') !!}`;
        const normal = `{!! resource_get('plugins/pack-fixed-price/assets/image/normal.png') !!}`;
    var vm = new Vue({
        el: "#re_content",
        delimiters: ['[[', ']]'],
        data() {
            let info={!!json_encode($data?:'{}') !!}
           
           return {
                dialogVisible:false,
                custom:custom,
                normal:normal,
                info:info,
                id:info.id?info.id:'',
                loading:false,
                page_total:0,
                page_size:0,
                current_page:0,
                goodsShow:false,
                goods_list:[],
                uploadShow:false,
                chooseImgName:'',
                uploadListShow:false,
                chooseImgListName:'',
                thumbList:[],
                search_form:{},

                // 商品多选
                choosed_goods:[],
                choosed_goods_id:[],

                re_choosed_goods:[],
                last_row:[],
                

                form:{
                    activity_name:info.activity_name?info.activity_name:'',
                    start_at:info.start_at?info.start_at*1000:'',
                    end_at:info.end_at?info.end_at*1000:'',
                    pack_price:info.pack_price?info.pack_price:'',
                    goods_count:info.goods_count?info.goods_count:'',
                    rule:info.hasOwnProperty('rule')?String(info.rule):'0',
                    custom_thumb:info.custom_thumb?info.custom_thumb:'',
                    custom_thumb_url:info.custom_thumb_url?info.custom_thumb_url:'',
                    goods_id:[]
                },
            }
        },
        mounted () {
            
            if(this.info.hasOwnProperty('goods')){
                this.info.goods.forEach((item,index)=>{
                    this.thumbList.push(item)
                    this.form.goods_id.push(item.id)
                })
            }
        },
        methods: {
            goback(){
                window.history.go(-1)
            },
            openDia(){
                this.dialogVisible=true
            },    
            openUpload(str) {
                this.chooseImgName = str;
                this.uploadShow = true;
            },
            changeProp(val) {
                        if(val == true) {
                            this.uploadShow = false;
                        }
                        else {
                            this.uploadShow = true;
                        }
                    },
            sureImg(name,image,image_url) {
                        this.form[name] = image;
                        this.form[name+'_url'] = image_url;
                        
            },
            openGoods() {
                this.goodsShow = true;
                this.choosed_goods = JSON.parse(JSON.stringify(this.thumbList));
                this.choosed_goods_id = this.choosed_goods.map((item) => {
                    return item.id;
                });
                if(this.search_form.keyword) {
                    this.searchGoods();

                }
                if(this.goods_list.length>0) {
                    this.$refs.caseTable.clearSelection();

                }
                this.choosed_goods.forEach((item,index)=> {
                    this.goods_list.forEach((item1,index1) => {
                        if(item1.id == item.id)
                            this.$refs.caseTable.toggleRowSelection(item1,true);
                    })
                })
                console.log(this.choosed_goods)

            },
            currentChange(val) {
                this.loading = true;
                this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.goods.get-list') !!}',{page:val,search:this.search_form.keyword}).then(function (response){
                        let datas = response.data.data;
                        this.page_total = datas.total;
                        this.goods_list = datas.data;
                        this.page_size = datas.per_page;
                        this.current_page = datas.current_page;
                        this.loading = false;
                        this.goods_list.forEach((item,index)=>{
                            if(this.form.goods_id==item.id){
                                item.checked=true
                            }else{
                                item.checked=false
                            }
                        })
                        this.goods_list.push({})
                        this.goods_list.splice(this.goods_list.length-1,1)
                    },function (response) {
                        console.log(response);
                        this.loading = false;
                    }
                );
            },
            delGoods(item){
                if(this.id){
                    this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.activity.delete-relation') !!}',{'activity_id':this.id,'goods_id':item.id}).then(function (response){
                            if (response.data.result) { 
                                this.$message({message: response.data.msg,type: 'success'});
                                this.thumbList.forEach((list,index)=>{
                                    if(list.id==item.id){
                                        this.goods_list.forEach((obj,index)=>{
                                            if(obj.id==item.id){
                                            obj.checked=false
                                            }
                                        })
                                        this.thumbList.splice(index,1)
                                        this.form.goods_id.splice(index,1)
                                    }
                                })
                                this.goods_list.push({})
                                this.goods_list.splice(this.goods_list.length-1,1)
                            }else {
                            this.$message({message: response.data.msg,type: 'error'});
                            }
                    ;
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                    loading.close();
                    })
                }else{
                    this.thumbList.forEach((list,index)=>{
                                    if(list.id==item.id){
                                        this.goods_list.forEach((obj,index)=>{
                                            if(obj.id==item.id){
                                            obj.checked=false
                                            }
                                        })
                                        this.thumbList.splice(index,1)
                                        this.form.goods_id.splice(index,1)
                                    }
                                })
                                this.goods_list.push({})
                                this.goods_list.splice(this.goods_list.length-1,1)
                }
            },
            searchGoods() {
                if(!this.search_form.keyword){
                    this.$message({message: '请输入关键词搜索',type: 'error'});
                    return 
                }
                let that = this;
                this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.goods.get-list') !!}',{search:this.search_form.keyword}).then(response => {
                    if (response.data.result) {
                        let data = response.data.data;
                        this.page_total = data.total;
                        this.goods_list = data.data;
                        this.page_size = data.per_page;
                        this.current_page = data.current_page;
                        this.goods_list.forEach((item,index)=>{
                            if(this.form.goods_id.includes(item.id)){
                                item.checked=true
                            }else{
                                item.checked=false
                            }
                        })
                        setTimeout(()=> {
                            if(this.goods_list.length>0) {
                                this.$refs.caseTable.clearSelection();
                            }
                            this.choosed_goods.forEach((item,index)=> {
                                this.goods_list.forEach((item1,index1) => {
                                    if(item1.id == item.id) {
                                        console.log(item1.id)
                                        this.$refs.caseTable.toggleRowSelection(item1,true);

                                    }
                                })
                            })
                        },100)
                        
                        this.$forceUpdate()
                    } else {
                        this.$message({message: response.data.msg,type: 'error'});
                    }

                },response => {
                    this.$message({message: response.data.msg,type: 'error'});
                });
            },
            // sureGoods(item) {
            //     if(this.id){
            //         this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.activity.add-relation') !!}',{'activity_id':this.id,'goods_id':item.id}).then(function (response){
            //                 if (response.data.result) { 
            //                     this.$message({message: response.data.msg,type: 'success'});
            //                     item.checked=true
            //                     this.thumbList.push(item)
            //                     this.form.goods_id.push(item.id)
            //                     this.goods_list.push({})
            //                     this.goods_list.splice(this.goods_list.length-1,1)
            //                     this.goods_list.forEach((item,index)=>{
            //                             if(this.form.goods_id.includes(item.id)){
            //                                     item.checked=true
            //                             }else{
            //                                     item.checked=false
            //                             }
            //                     })
            //                     this.goods_list.push({})
            //                     this.goods_list.splice(this.goods_list.length-1,1)
            //                     this.goodsShow=false
            //                 }else {
            //                     this.$message({message: response.data.msg,type: 'error'});
                                
            //                 }
            //         ;
            //         },function (response) {
            //             this.$message({message: response.data.msg,type: 'error'});
            //         loading.close();
            //         })
            //     }else{
            //         if(item.status==1){
            //             this.$message({message:'商品已关联其他活动',type: 'error'});
            //             return
            //         }else{
            //             item.checked=true
            //                     this.thumbList.push(item)
            //                     this.form.goods_id.push(item.id)
            //                     // this.goods_list.push({})
            //                     // this.goods_list.splice(this.goods_list.length-1,1)
            //                     this.goods_list.forEach((item,index)=>{
            //                             if(this.form.goods_id.includes(item.id)){
            //                                     item.checked=true
            //                             }else{
            //                                     item.checked=false
            //                             }
            //                     })
            //                     this.goods_list.push({})
            //                     this.goods_list.splice(this.goods_list.length-1,1)
            //                     this.goodsShow=false
            //         }
            //     }
            // },
            sureGoods() {
                if(this.id){
                    let new_list = [];
                    
                    this.choosed_goods.forEach((item,index)=> {
                        let is_true = false;
                        this.thumbList.some((item1,index1) => {
                            if(item1.id == item.id){
                                is_true = true;
                                return true
                            }
                        })
                        if(!is_true) {
                            new_list.push(item)
                        }
                    })
                    console.log(new_list)
                    for(let i=0;i<new_list.length;i++) {
                        
                        this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.activity.add-relation') !!}',{'activity_id':this.id,'goods_id':new_list[i].id}).then(function (response){
                                if (response.data.result) { 
                                    this.$message({message: response.data.msg,type: 'success'});
                                    this.thumbList.push(new_list[i])
                                    this.form.goods_id.push(new_list[i].id)
                                    // this.goods_list.push({})
                                    // this.goods_list.splice(this.goods_list.length-1,1)
                                    this.goods_list.forEach((item,index)=>{
                                            if(this.form.goods_id.includes(item.id)){
                                                    item.checked=true
                                            }else{
                                                    item.checked=false
                                            }
                                    })
                                    
                                    
                                }else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                    
                                }
                            ;
                            },function (response) {
                                this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        })
                        if(i==new_list.length-1) {
                            this.goodsShow=false
                        }

                    }
                }else{
				    // this.current_value[this.value.goods_type] = [...list];
                    this.choosed_goods.forEach((item,index) => {
                        item.checked = true;
                    })
                    this.thumbList = [...this.choosed_goods]
                    this.form.goods_id = [];
                    this.thumbList.forEach((item,index) => {
                        this.form.goods_id.push(item.id)
                    })
                    console.log(this.form.goods_id)
                    // this.thumbList = [...this.choosed_goods]
                    this.goodsShow = false;
                }
            },
            submit() {
                // this.form.goods_id=this.form.goods_id.join(',')
                let goods_id=this.form.goods_id.join(',')
                let json=Object.assign({},this.form)
                json.start_at=String(json.start_at).slice(0,10)
                json.end_at=String(json.end_at).slice(0,10) 
                json.goods_id=goods_id;
                this.$http.post('{!! yzWebFullUrl('plugin.pack-fixed-price.admin.activity.add') !!}',{'data':json,'id':this.id}).then(function (response){
                        if (response.data.result) { 
                            this.$message({message: response.data.msg,type: 'success'});
                            window.location.href='{!! yzWebFullUrl('plugin.pack-fixed-price.admin.activity.index') !!}'
                        }else {
                        this.$message({message: response.data.msg,type: 'error'});
                        }
                    ;
                    },function (response) {
                        this.$message({message: response.data.msg,type: 'error'});
                
                    })
            },
            
            handleTableSelect(sel,row) {
                console.log(sel)
                console.log(row)
                console.log(row.id);
                if(!row.checked) { //选中
                    this.choosed_goods.push(row);
                    this.choosed_goods_id.push(row.id);
                }
                else {
                    this.choosed_goods_id= this.choosed_goods_id.filter(function(item) {
						return item != row.id
					});
					this.choosed_goods = this.choosed_goods.filter(function(item) {
						return item.id != row.id
					});
                }
                this.goods_list.forEach((item,index) => {
                    if(item.id == row.id) {
                        this.goods_list[index].checked =  this.goods_list[index].checked== true?false:true
                    }
                })
                console.log(this.choosed_goods)

                
            },
            handleTableSelectAll(sel) {
                console.log(sel)
                if(sel.length>0) {
                    this.choosed_goods = sel;
                    this.choosed_goods_id = sel.map((item) => {
                        return item.id;
                    });
                }
                else {
                    this.choosed_goods = [];
                    this.selectedRowKeys = [];
                }
                console.log(this.choosed_goods)
                
                
            },
            isDisabled(row){
                if(row.status == '1'){
                    return 0;
                }
                return 1;
            },
        },
    });
</script>
@endsection