@extends('layouts.base')
@section('title', '拓客卡设置')
@section('content')
<link rel="stylesheet" type="text/css" href="{{static_url('yunshop/goods/vue-goods1.css')}}"/>
<style>
    .upload-boxed {
        width: 150px;
        height: 150px;
        position: relative;
        border-radius: 5px;
        display: inline-block;
    }
    .add-list {border: 1px dashed #dde2ee;margin:15px 30px;text-align: center;cursor: pointer;}
    .add-list:hover{color:#29BA9C;border-color:#29BA9C}
    .add-list1 {border: 1px dashed #dde2ee;margin:15px 0px;text-align: center;cursor: pointer;width:70%}
    .add-list1:hover{color:#29BA9C;border-color:#29BA9C}
</style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-main">
                <div class="vue-">
                </div>
                <div class="vue-main-title">
                    <div class="vue-main-title-left"></div>
                    <div class="vue-main-title-content">拓客卡编辑</div>
                </div>
                <div class="vue-main-form">
                    <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                        <el-form-item label="购买商品" prop="goods_id">
                            <div class="upload-box" @click="openGoods('goods_id')" v-if="!form.goods_id">
                                <div>
                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                </div>
                                <div>选择商品</div>
                            </div>
                            <div @click="openGoods('goods_id')" class="upload-boxed" v-if="form.goods_id" style="height:150px">
                                <el-image :src="choosed_goods.thumb" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;"></el-image>
                                <div class="upload-boxed-text">重新选择</div>
                                <div style="position: absolute;top: -3px;right: -3px;background: #333;line-height: 15px;color: #fff;border-radius: 50%;width: 14px;">
                                    <i class="el-icon-close" @click.stop="clearGoods('goods_id')" title="点击清除商品"></i>
                                </div>
                                <div style="line-height: 18px;font-weight:500;color:#333;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;">【id:[[choosed_goods.id]]】[[choosed_goods.title]]</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="核销日期" prop="effective_time">
                            <el-input v-model="form.effective_time" placeholder="请输入核销日期" style="width:70%">
                                <template slot="prepend">获取后</template>
                                <template slot="append">天内有效（0为不限时间使用）</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="核销时间段" prop="is_recommend">
                            <div v-for="(item,index) in form.time_interval" :key="index" style="margin-bottom:10px">
                                <el-time-picker v-model="item.start" format="HH:mm" value-format="HH:mm" placeholder="请选择开始时间" style="width:35%"></el-time-picker>
                                <el-time-picker v-model="item.end" format="HH:mm" value-format="HH:mm" placeholder="请选择结束时间" style="width:35%"></el-time-picker>
                                <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addTime(index)"></el-button>
                                <el-button type="primary" icon="el-icon-minus" circle size="mini" @click="delTime(index)"></el-button>
                            </div>
                            <div class="add-list1" @click="addTime(form.time_interval.length-1)">
                                <i class="el-icon-plus" style="font-size:25px;line-height:42px"></i>
                            </div>
                            
                        </el-form-item>
                        <el-form-item label="" prop="effective_day">
                            <el-checkbox-group v-model="form.effective_day">
                                <el-checkbox :label="1">星期一</el-checkbox>
                                <el-checkbox :label="2">星期二</el-checkbox>
                                <el-checkbox :label="3">星期三</el-checkbox>
                                <el-checkbox :label="4">星期四</el-checkbox>
                                <el-checkbox :label="5">星期五</el-checkbox>
                                <el-checkbox :label="6">星期六</el-checkbox>
                                <el-checkbox :label="7">星期日</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="一次性消费套餐" prop="is_recommend">
                            <div style="width:70%;border:1px solid #d8d8d8;border-radius:5px;padding:0 5px">
                                <div class="head" style="background:#fafafa;line-height:32px;display:flex;text-align:center">
                                    <div style="width:8%">图片</div>
                                    <div style="width:32%">名称</div>
                                    <div style="width:18%">数量</div>
                                    <div style="width:18%">单价（元）</div>
                                    <div style="width:18%">总价（元）</div>
                                    <div style="width:6%">操作</div>
                                </div>
                                <div class="tr-li" v-for="(item,index) in form.once_goods" :key="index" style="display:flex;text-align:center;padding:15px 0">
                                    <div style="width:8%;margin:0 auto">
                                        <div class="upload-box" @click="openUpload('once_goods',index,1)" v-if="!item.full_img_url" style="width:40px;height:40px;display:inline-block">
                                            <i class="el-icon-plus" style="font-size:32px"></i>
                                        </div>
                                        <div @click="openUpload('once_goods',index)" class="upload-boxed" v-if="item.full_img_url" style="width:40px;height:40px">
                                            <img :src="item.full_img_url" alt="" style="width:40px;height:40px;border-radius: 5px;cursor: pointer;">
                                            <i class="el-icon-close" @click.stop="clearImg('once_goods',index,1)" title="点击清除图片"></i>
                                        </div>
                                    </div>
                                    <div style="width:32%">
                                        <el-input v-model="item.name" placeholder="请输入名称" style="width:90%"></el-input>
                                    </div>
                                    <div style="width:18%">
                                        <el-input v-model="item.quantity" placeholder="请输入数字" style="width:90%" @input="isNumber(index,'quantity','once_goods')"></el-input>
                                    </div>
                                    <div style="width:18%">
                                        <el-input v-model="item.price" placeholder="请输入数字" style="width:90%" @input="isNumber(index,'price','once_goods')"></el-input>
                                    </div>
                                    <div style="width:18%">[[Number(item.quantity)*Number(item.price)]]</div>
                                    <div style="width:6%">
                                        <el-button type="primary" icon="el-icon-minus" circle size="mini" @click="delList('once_goods',index)"></el-button>
                                    </div>
                                </div>
                                <div class="add-list" @click="addList('once_goods')">
                                    <i class="el-icon-plus" style="font-size:25px;line-height:42px"></i>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="多次消费套餐" prop="is_recommend">
                            <div style="width:70%;border:1px solid #d8d8d8;border-radius:5px;padding:0 5px">
                                <div class="head" style="background:#fafafa;line-height:32px;display:flex;text-align:center">
                                    <div style="width:6%">图片</div>
                                    <div style="width:24%">名称</div>
                                    <div style="width:16%">数量</div>
                                    <div style="width:16%">单次消费数量</div>
                                    <div style="width:16%">单价（元）</div>
                                    <div style="width:16%">总价（元）</div>
                                    <div style="width:6%">操作</div>
                                </div>
                                <div class="tr-li" v-for="(item,index) in form.many_goods" :key="index" style="display: flex;text-align:center;padding:15px 0">
                                    <div style="width:6%;margin:0 auto">
                                        <div class="upload-box" @click="openUpload('many_goods',index,1)" v-if="!item.full_img_url" style="width:40px;height:40px;display:inline-block">
                                            <i class="el-icon-plus" style="font-size:32px"></i>
                                        </div>
                                        <div @click="openUpload('many_goods',index)" class="upload-boxed" v-if="item.full_img_url" style="width:40px;height:40px">
                                            <img :src="item.full_img_url" alt="" style="width:40px;height:40px;border-radius: 5px;cursor: pointer;">
                                            <i class="el-icon-close" @click.stop="clearImg('many_goods',index,1)" title="点击清除图片"></i>
                                        </div>
                                    </div>
                                    <div style="width:24%">
                                        <el-input v-model="item.name" placeholder="请输入名称" style="width:90%"></el-input>
                                    </div>
                                    <div style="width:16%">
                                        <el-input v-model="item.quantity" placeholder="请输入数字" style="width:90%" @input="isNumber(index,'quantity','many_goods')"></el-input>
                                    </div>
                                    <div style="width:16%">
                                        <el-input v-model="item.single_consumption" placeholder="请输入数字" style="width:90%" @input="isNumber(index,'single_consumption','many_goods')"></el-input>
                                    </div>
                                    <div style="width:16%">
                                        <el-input v-model="item.price" placeholder="请输入数字" style="width:90%" @input="isNumber(index,'price','many_goods')"></el-input>
                                    </div>
                                    <div style="width:16%">[[Number(item.quantity)*Number(item.price)]]</div>
                                    <div style="width:6%">
                                        <el-button type="primary" icon="el-icon-minus" circle size="mini" @click="delList('many_goods',index)"></el-button>
                                    </div>
                                </div>
                                <div class="add-list" @click="addList('many_goods')">
                                    <i class="el-icon-plus" style="font-size:25px;line-height:42px"></i>
                                </div>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!--弹框商品图片-->
            <el-dialog :visible.sync="goods_show" width="60%" center  title="选择商品">
                <div>
                    <div>
                        <el-form :inline="true" :model="search_goods" class="demo-form-inline">
                            <!-- <el-form-item label="">
                                <el-input v-model="search_goods.goods_id"  placeholder="商品ID"></el-input>
                            </el-form-item> -->
                            <el-form-item label="">
                                <el-input v-model="search_goods.goods_name" placeholder="商品标题"></el-input>
                            </el-form-item>
                            <el-form-item label="">
                            <el-button type="primary" @click="searchGoods(1)">搜索</el-button>
                            </el-form-item>
                        </el-form>
                        
                    </div>
                    <el-table :data="goods_list" style="width: 100%;height:500px;overflow:auto" id="goods-list">
                        <el-table-column label="ID" prop="id" align="center" width="150px">
                            <template slot-scope="scope">
                                <el-radio v-model="choosed_goods_id" :label="scope.row.id">&nbsp;</el-radio>
                            </template>
                        </el-table-column>
                        <el-table-column label="商品ID" prop="id" align="center" width="150px"></el-table-column>
                        <el-table-column label="商品">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items: center">
                                    <div style="margin-right:10px">
                                        <el-image :src="scope.row.thumb" style="width:50px;height:50px"></el-image>
                                    </div>
                                    <div style="flex:1">
                                        <div style="color:#333;font-weight:500">[[scope.row.title]]</div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        
                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="goods_show = false">取 消</el-button>
                    <el-button type="primary" @click="sureGoods">确 定 </el-button>
                </span>
            </el-dialog>
            <!--end-->
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')">提交</el-button>
                    <el-button @click="goBack">返回</el-button>
                </div>
            </div>
            <upload-img :upload-show="uploadShow" :name="chooseImgName" @replace="changeProp" @sure="sureImg"></upload-img>
        </div>
    </div>
    @include('public.admin.uploadImg')

    <script>
        let card = {!! $card?:'{}' !!}
        let once_arr = {!! $once_arr?:'{}' !!}
        let many_arr = {!! $many_arr?:'[]' !!}
        let id = card.goods_id || 0
        console.log(card)
        console.log(once_arr)
        console.log(many_arr)
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    form:{
                        effective_time:'',
                        time_interval:[
                            // {start:'',end:''}
                        ],
                        effective_day:[],
                        once_goods:[
                            // {img_url:'',name:'',quantity:'1',price:'1'}
                        ],
                        many_goods:[
                            // {img_url:'',name:'',single_consumption:'1',quantity:'1',price:'1'}
                        ],
                    },
                    id:id,
                    submit_url:'',

                    uploadShow:false,
                    chooseImgName:'',
                    chooseIndex:-1,
                    type:0,

                    goods_show:false,
                    goods_list:[],
                    search_goods:{},
                    choosed_goods:{},
                    choosed_goods_id:'',
                    goods_total:1,
                    goods_current_page:1,
                    goods_per_page:1,
                    
                    rules:{
                        name:{ required: true, message: '请输入品牌名称'}
                    },

                }
            },
            created() {
                if(this.id) {
                    this.setData();
                    this.submit_url = "{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.card.edit') !!}"
                }
                else {
                    this.submit_url = "{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.card.add') !!}"
                }

            },
            mounted() {
                
            },
            methods: {
                setData() {
                    this.form.time_interval = card.time_interval || [];
                    this.form.effective_day = card.effective_day || [];
                    this.form.goods_id = card.goods_id;
                    this.form.effective_time = card.effective_time;
                    this.form.once_goods = [];
                    this.form.many_goods = [];

                    once_arr.forEach((item,index) => {
                        this.form.once_goods.push(
                            {full_img_url:item.full_img_url,img_url:item.img_url,name:item.name,quantity:item.quantity,price:item.price}
                        )
                    })
                    many_arr.forEach((item,index) => {
                        this.form.many_goods.push(
                            {full_img_url:item.full_img_url,img_url:item.img_url,name:item.name,quantity:item.quantity,price:item.price,single_consumption:item.single_consumption}
                        )
                    })
                    this.choosed_goods = card.goods
                },
                
                addTime(index) {
                    this.form.time_interval.splice(index+1,0,{start:'',end:''})
                },
                delTime(index) {
                    this.form.time_interval.splice(index,1)
                },
                addList(type) {
                    if(type=='once_goods') {
                        this.form[type].push({img_url:'',name:'',quantity:'1',price:'1'})
                    }
                    else if(type=='many_goods') {
                        this.form[type].push({img_url:'',name:'',quantity:'1',single_consumption:'1',price:'1'})
                    }
                },
                delList(type,index) {
                    this.form[type].splice(index,1)
                },
                openUpload(str,index,type) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.chooseIndex = index;
                    this.type = type;
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,img_url) {
                    if(this.type==1) {
                        this.form[name][this.chooseIndex]['img_url'] = image;
                        this.form[name][this.chooseIndex]['full_img_url'] = img_url;
                    }
                    else {
                        this.form[name] = image;
                        this.form[name+'_url'] = img_url;
                    }
                    
                },
                clearImg(str,index,type) {
                    if(!type) {
                        this.form[str] = "";
                        this.form['full_'+str] = "";
                    }
                    else if(type==1){
                        this.form[str][index].full_img_url = '';
                        this.form[str][index].img_url = '';
                    }
                    this.$forceUpdate();
                },

                submitForm(formName) {
                    console.log(this.form)
                    let that = this;
                    let is_true = false
                    this.form.once_goods.some((item,index) => {
                        for(let i in item) {
                            if(!item[i]) {
                                is_true = true
                                let name = ''
                                switch (i) {
                                    case 'name':
                                        name='名称'
                                        break;
                                    case 'img_url':
                                        name='图片'
                                        break;
                                    case 'quantity':
                                        name='数量'
                                        break;
                                    case 'price':
                                        name='单价'
                                        break;
                                    default:
                                        break;
                                }
                                console.log(name)
                                this.$message.error('一次性消费套餐 第'+(index+1)+ '行 '+name+ ' 不能为空')
                                break;
                            }
                        // 
                        }
                        if(is_true) {
                            return true;
                        }
                    })
                    this.form.many_goods.some((item,index) => {
                        for(let i in item) {
                            if(!item[i]) {
                                is_true = true
                                let name = ''
                                switch (i) {
                                    case 'name':
                                        name='名称'
                                        break;
                                    case 'img_url':
                                        name='图片'
                                        break;
                                    case 'quantity':
                                        name='数量'
                                        break;
                                    case 'price':
                                        name='单价'
                                        break;
                                    case 'single_consumption':
                                        name='单次消费数量'
                                        break;
                                    default:
                                        break;
                                }
                                console.log(name)
                                this.$message.error('多次消费套餐 第'+(index+1)+ '行 '+name+ ' 不能为空')
                                break;
                            }
                        // 
                        }
                        if(is_true) {
                            return true;
                        }
                    })
                    if(is_true) {
                        return
                    }
                    console.log(this.form)
                    let json = {
                        goods_id:this.form.goods_id,
                        effective_time:this.form.effective_time,
                        time_interval:this.form.time_interval,
                        effective_day:this.form.effective_day || 0,
                        once_goods:[],
                        many_goods:[]
                    };
                    this.form.once_goods.forEach((item,index) => {
                        json.once_goods.push(
                            {img_url:item.img_url,name:item.name,quantity:item.quantity,price:item.price}
                        )
                    })
                    this.form.many_goods.forEach((item,index) => {
                        json.many_goods.push(
                            {img_url:item.img_url,name:item.name,quantity:item.quantity,single_consumption:item.single_consumption,price:item.price}
                        )
                    })
                    let json1 = {
                        data:json
                    };
                    if(this.id) {
                        json1.id = this.id
                    }
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                            this.$http.post(this.submit_url,json1).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                openGoods() {
                    if(this.id) {
                        this.$message.error('不支持修改商品')
                        return;
                    }
                    this.goods_show = true;
                    this.choosed_goods_id = this.form.goods_id;
                },
                changeGoods(val,val1) {
                    console.log(val,val1)
                },
                searchGoods() {
                    let loading = this.$loading({target:document.querySelector("#goods-list"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post("{!! yzWebFullUrl('plugin.customer-development.Backend.Admin.controllers.card.get-goods') !!}",{keyword:this.search_goods.goods_name}).then(response => {
                        if(response.data.result == 1) {
                            if (response.data.result) {
                            this.goods_list = response.data.data;
                            // this.goods_total = response.data.data.goods.total;
                            // this.goods_current_page = response.data.data.goods.current_page;
                            // this.goods_per_page = response.data.data.goods.per_page;
                            
                            this.goods_list.forEach((item,index) => {
                                if(item.title) {
                                    item.title = this.escapeHTML(item.title);
                                }
                            });
                            } else {
                                this.$message({message: response.data.msg,type: 'error'});
                            }
                        }
                        else {
                            this.$message.error(response.data.msg)
                        }
                        
                        loading.close();
                    }, response => {
                        console.log(response);
                        loading.close();
                    });
                },
                sureGoods() {
                    this.form.goods_id = this.choosed_goods_id;
                    this.choosed_goods = {};
                    let obj = this.goods_list.find((item,index) => {
                        return item.id == this.choosed_goods_id;
                    })
                    this.choosed_goods = obj;
                    console.log(this.choosed_goods);
                    this.goods_show = false;
                },
                clearGoods() {
                    if(this.id) {
                        this.$message.error('不支持修改商品')
                        return;
                    }
                    this.choosed_goods = {}
                    this.form.goods_id = '';
                },
                isNumber(index,type,key) {
                    console.log(this.form[key][index][type])
                    if(type=='quantity'){
                        this.form[key][index][type] = this.form[key][index][type].replace(/[^\d]/g,'')
                    }
                    else if(type=='single_consumption'){
                        this.form[key][index][type] = this.form[key][index][type].replace(/[^\d]/g,'')
                    }
                    else if(type=='price') {
                        this.form[key][index][type] = this.form[key][index][type].replace(/[^\d.]/g,'')
                        this.form[key][index][type] = this.form[key][index][type].replace(/\.{2,}/g, ".");
                        this.form[key][index][type] = this.form[key][index][type].replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                    }

                },
                // 字符转义
                escapeHTML(a) {
                    a = "" + a;
                    return a.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'");;
                },
                goBack() {
                    history.go(-1)
                },
                
            },
        })

    </script>
@endsection