@extends('layouts.base')
@section('title', '新增盲盒')
@section('content')
<link rel="stylesheet" href="{{resource_get('plugins/blind-box/views/admin/index.css')}}">
<link rel="stylesheet" href="{{static_url('css/public-number.css')}}">
<style>
    th {border-bottom: 1px solid #EBEEF5 !important;}
    .dialog-cover{z-index:2001}
    .dialog-content{z-index:2002}
</style>
    <div class="all">
        <div id="app" v-cloak>
            <div class="vue-crumbs">
                <a @click="goParent(1)">盲盒</a>
                > 
                <a @click="goParent(2)">盲盒管理</a>
                >
                <a @click="goParent(3)">盲盒管理</a> > 新增盲盒
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="15%">
                <div class="vue-main">
                    <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-item label="活动名称" prop="activity_name">
                            <el-input v-model="form.activity_name" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="活动名称是否显示" prop="title_show">
                            <el-radio v-model="form.title_show" :label="1">是</el-radio>
                            <el-radio v-model="form.title_show" :label="0">否</el-radio>
                            <div class="tip">
                                开启显示后活动详情页顶部显示活动名称
                            </div>
                        </el-form-item>
                        <el-form-item label="活动图片" prop="activity_img">
                            <div class="upload-box" @click="openUpload('activity_img')" v-if="!form.activity_img_src">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('activity_img')" class="upload-boxed" v-if="form.activity_img_src" >
                                <img :src="form.activity_img_src" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('activity_img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">
                                建议尺寸600*600
                            </div>
                        </el-form-item>
                        <el-form-item label="背景" prop="background_style">
                            <el-radio v-model="form.background_style" :label="0">背景色</el-radio>
                            <el-radio v-model="form.background_style" :label="1">顶部图片</el-radio>
                        </el-form-item>
                        <el-form-item label="背景色" prop="background_color" v-if="form.background_style == 0">
                            <el-color-picker v-model="form.background_color" style="display:inline-block;float:left;"></el-color-picker>
                        </el-form-item>
                        <el-form-item label="顶部图片" prop="top_img" v-if="form.background_style == 1">
                            <div class="upload-box" @click="openUpload('top_img')" v-if="!form.top_img_src">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('top_img')" class="upload-boxed" v-if="form.top_img_src" >
                                <img :src="form.top_img_src" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('top_img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">
                                {{--建议尺寸600*600--}}
                            </div>
                        </el-form-item>
                        <el-form-item label="盲盒类型" prop="activity_type">
                            <el-radio v-model="form.activity_type" :label="0">付费</el-radio>
                            <el-radio v-model="form.activity_type" :label="1">免费</el-radio>
                        </el-form-item>

                        <el-form-item label="盲盒售价" prop="" v-if="form.activity_type == 0">
                            <el-input v-model="form.price" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="盲盒运费" prop="freight" v-if="form.activity_type == 0">
                            <el-input v-model="form.freight" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="是否支持抵扣" prop="deduction" v-if="form.activity_type == 0">
                            <el-checkbox-group v-model="form.deduction">
                                <el-checkbox :label="1">积分抵扣</el-checkbox>
                                <el-checkbox :label="2">优惠券抵扣</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="邀请新客户人数" prop="invitation" v-if="form.activity_type == 1">
                            <el-input v-model="form.invitation" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="邀请时间" prop="invitation_time" v-if="form.activity_type == 1">
                            <el-input v-model="form.invitation_time" style="width:70%;"></el-input><span style="margin-left:10px;">小时</span>
                        </el-form-item>

                        <el-form-item label="活动时间" prop="">
                            <el-row>
                                <el-col :span="8">
                                    <el-date-picker v-model="form.activity_start" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                                    value-format="timestamp" placeholder="选择活动开始时间" style="width:90%"></el-date-picker>
                                </el-col>
                                <el-col :span="10">
                                    <el-date-picker v-model="form.activity_end" type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                                    value-format="timestamp" placeholder="选择动结束时间" style="width:70%"></el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="盲盒抽取时间" prop="extract_time">
                            <el-input v-model="form.extract_time" style="width:70%;"></el-input><span style="margin-left:10px;">秒</span>
                        </el-form-item>
                        <el-form-item label="盲盒模式" prop="pattern">
                            <el-radio v-model="form.pattern" :label="0">单个商品</el-radio>
                            <el-radio v-model="form.pattern" :label="1">组合商品</el-radio>
                        </el-form-item>

                        <el-form-item label="盲盒商品" prop="" v-if="form.pattern==0">
                            <div>
                                <el-button size="mini" type="primary" icon="el-icon-plus" @click="selectGoods">选择商品</el-button>
                                <div class="tip">
                                    只能选择商品配送方式同时启用了自提点和配送的商品
                                </div>
                            </div>
                            <!-- 表格start -->
                            <div style="padding:10px;background:#e9e9e9;width:70%;">
                                <el-table :data="form.goods" style="width: 100%"  v-loading="table_loading">
                                    <el-table-column prop="" label="商品"  min-width="100">
                                        <template slot-scope="scope">
                                            <div>[[scope.row.goods.title]]</div>
                                            <div v-if="scope.row.goods.has_option">
                                                <div class="tip" >
                                                    [[scope.row.goods_options.title]]
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="goods.price" label="现价" min-width="180"  align="center"></el-table-column>
                                    <el-table-column prop="" label="库存" min-width="180"  align="center">
                                        <template slot-scope="scope">
                                            <el-input v-model="scope.row.stock" style="width:70%;"  v-on:input="changeStock(scope.$index,0)"></el-input><span style="margin-left:10px;">件</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="图片" min-width="80" align="center">
                                        <template slot-scope="scope">
                                            <div style="display: flex;justify-content: center;">
                                                <div class="upload-box" style="width:60px;height:60px;text-align:center" @click="openUpload('thumb',scope.$index)" v-show="!scope.row.thumb_src">
                                                    <i class="el-icon-plus" style="font-size:32px"></i>
                                                </div>
                                                <div @click="openUpload('thumb',scope.$index)" class="upload-boxed" style="width:60px;height:60px;text-align:center" v-show="scope.row.thumb_src">
                                                    <img :src="scope.row.thumb_src" alt="" style="width:60px;height:60px;border-radius: 5px;cursor: pointer;">
                                                    <div class="upload-boxed-text" style="font-size:12px">重新上传</div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" min-width="80" align="center">
                                        <template slot-scope="scope">
                                            <el-button type="danger" @click="delGoods(scope.$index)">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div>总库存：[[form.stock]]</div>
                            <div class="tip">
                                盲盒数量最小为1
                            </div>
                            <!-- 表格end -->
                        </el-form-item>

                        <el-form-item label="盲盒商品" prop="" v-if="form.pattern==1">
                            <div>
                                <el-button size="mini" type="primary" icon="el-icon-plus" @click="selectCombination">选择商品</el-button>
                            </div>
                            <!-- 表格start -->
                            <div style="padding:10px;background:#e9e9e9;width:70%;">
                                <el-table :data="form.combination" style="width: 100%"  v-loading="table_loading">
                                    <el-table-column prop="" label="商品"  min-width="100">
                                        <template slot-scope="scope">
                                            <div>[[scope.row.combination.combination_name]]</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="combination.price" label="现价" min-width="180"  align="center"></el-table-column>
                                    <el-table-column prop="" label="库存" min-width="180"  align="center">
                                        <template slot-scope="scope">
                                            <el-input oninput="value=value.replace(/^\.+|[^\d.]/g,'')" v-model="scope.row.stock" style="width:70%;" v-on:input="changeStock(scope.$index,1)"></el-input><span style="margin-left:10px;">件</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" min-width="80" align="center">
                                    <template slot-scope="scope">
                                    <el-button type="danger" @click="delCombination(scope.$index)">删除</el-button>
                                    </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                            <div>总库存：[[form.combination_stock]]</div>
                            <div class="tip">
                                盲盒数量最小为1
                            </div>
                            <!-- 表格end -->
                        </el-form-item>

                        <el-form-item label="不可退换货" prop="no_refund">
                            <el-switch v-model="form.no_refund" :active-value="1" :inactive-value="0"></el-switch>
                            <div class="tip">
                                开启后盲盒不可退换货，关闭则盲盒是以订单形式整体退换货，不支持单一商品退换货
                            </div>
                        </el-form-item>
                        <el-form-item label="提示次数" prop="tips" v-if="form.activity_type == 0">
                            <el-input v-model="form.tips" style="width:70%;"></el-input><span style="margin-left:10px;">次</span>
                        </el-form-item>
                        <el-form-item label="提示1次消耗" prop="tips_consume" v-if="form.activity_type == 0">
                            <el-input v-model="form.tips_consume" style="width:70%;"></el-input><span style="margin-left:10px;">积分</span>
                        </el-form-item>
                        <el-form-item label="活动规则" prop="activity_rule">
                            <tinymceee v-model="form.activity_rule" style="width:70%"></tinymceee>
                        </el-form-item>
                        <el-form-item label="分享海报" prop="poster">
                            <div class="upload-box" @click="openUpload('poster')" v-if="!form.poster_src" style="width:150px;height:250px;">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('poster')" class="upload-boxed" v-if="form.poster_src" style="width:150px;height:250px;">
                                <img :src="form.poster_src" alt="" style="width:150px;height:250px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('poster')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">
                                建议尺寸640*1008
                            </div>
                        </el-form-item>
                        <el-form-item label="客服二维码" prop="cservice_code">
                            <div class="upload-box" @click="openUpload('cservice_code')" v-if="!form.cservice_code_src">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('cservice_code')" class="upload-boxed" v-if="form.cservice_code_src" >
                                <img :src="form.cservice_code_src" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('cservice_code')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="客服电话" prop="cservice_phone">
                            <el-input v-model="form.cservice_phone" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="活动是否启用" prop="is_open">
                            <el-switch v-model="form.is_open" :active-value="1" :inactive-value="0"></el-switch>
                        </el-form-item>
                    </div>
                </div>
            </el-form>

            <el-dialog :visible.sync="goods_show" width="60%" center title="选择商品">
                <div>
                    <div style="text-align: center">
                        <el-input  v-model="keyword_type" style="width:80%" placeholder="请输入商品ID搜索"></el-input>
                        <el-button type="primary" @click="searchGoods(0)" style="margin-left:20px;">搜索</el-button>
                    </div>
                    <el-table :data="goods_list" style="width: 100%;height:600px;overflow-y:auto"  >
                        <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                        <el-table-column prop="id" label="商品信息"  align="center">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items:center;justify-content:center;">
                                    <img :src="scope.row.thumb_src" alt="" style="width:80px;height: 50px;">
                                    <div style="margin-left:10px">[[scope.row.title]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" align="center" >
                            <template slot-scope="scope">
                                <el-button  @click="addGoods(scope.$index)" v-if="!scope.row.has_option">
                                    选择
                                </el-button>
                                <el-select v-model="select_option" clearable placeholder="选择规格" v-if="scope.row.has_option" @change="changeOption(scope.$index)">
                                    <el-option v-for="(item,index) in scope.row.has_many_options" :key="index" :label="item.title" :value="item.id"></el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>

            <el-dialog :visible.sync="combination_show" width="60%" center title="选择商品">
                <div>
                    <div style="text-align: center">
                        <el-input  v-model="keyword_type" style="width:80%"></el-input>
                        <el-button type="primary" @click="searchGoods(1)" style="margin-left:20px;">搜索</el-button>
                    </div>
                    <el-table :data="combination_list" style="width: 100%;height:600px;overflow-y:auto"  >
                        <el-table-column prop="id" label="ID"  align="center"></el-table-column>
                        <el-table-column prop="id" label="商品信息"  align="center">
                            <template slot-scope="scope">
                                <div style="display:flex;align-items:center;justify-content:center;">
                                    <img :src="scope.row.combination_img_src" alt="" style="width:80px;height: 50px;">
                                    <div style="margin-left:10px">[[scope.row.combination_name]]</div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="" label="操作" align="center" >
                            <template slot-scope="scope">
                                <el-button  @click="addCombination(scope.$index)">
                                    选择
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>
            <!-- 分页 -->
            <div class="vue-page">
                <div class="vue-center">
                    <el-button type="primary" @click="submitForm('form')"  :disabled="btnChangeEnable">提交</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>
<script src="{{resource_get('static/yunshop/tinymce4.7.5/tinymce.min.js')}}"></script>
    @include('public.admin.tinymceee')
    @include('public.admin.uploadImg')

    <script>
        var app = new Vue({
            el:"#app",
            delimiters: ['[[', ']]'],
            name: 'test',
            data() {
                return{
                    show:false,//是否开启公众号弹窗
                    pro:false ,//是否开启小程序弹窗
                    id:0,
                    goods_show:false,//选择商品弹窗
                    combination_show:false,//选择组合商品弹窗
                    keyword_type:"",
                    goods_list:[],
                    combination_list:[],
                    select_option:"",
                    form:{
                        activity_name:"",
                        title_show:1,
                        activity_img:"",
                        activity_img_src:"",
                        background_style:0,
                        background_color:"",
                        top_img:"",
                        top_img_src:"",
                        activity_type:0,
                        price:"",
                        freight:"",
                        deduction:[],
                        invitation:"",
                        invitation_time:"",
                        activity_start:"",
                        activity_end:"",
                        extract_time:"",
                        pattern:0,
                        no_refund:1,
                        tips:"",
                        tips_consume:"",
                        activity_rule:"",
                        poster:"",
                        poster_src:"",
                        cservice_code:"",
                        cservice_code_src:"",
                        cservice_phone:"",
                        is_open:"",
                        stock:0,
                        combination_stock:0,
                        goods:[],
                        combination:[],
                    },
                    btnChangeEnable:false,
                    uploadShow:false,
                    chooseImgName:'',
                    chooseImgIndex:'-1',
                    submit_url:'',
                    showVisible:false,
                    
                    loading: false,
                    uploadImg1:'',
                    table_loading:false,
                    rules:{
                        // combination_name:{ required: true, message: '请输入组合名称'},
                        // combination_img:{ required: true, message: '请选择组合图片'},
                        // price:{ required: true, message: '请输入零售价'},
                        // stock:{ required: true, message: '请输入库存'},
                        // combination_goods:{ required: true, message: '请选择商品'},
                        // url:{ required: true, message: '请选择幻灯片链接'},
                    },

                }
            },
            created() {
                

            },
            mounted() {
            },
            methods: {
                getParam(name) { 
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
                    var r = window.location.search.substr(1).match(reg); 
                    if (r != null) return unescape(r[2]); 
                    return null; 
                },
                goParent(level) {
                    if(level==1) {
                        window.location.href = `{!! yzWebFullUrl('plugin.blind-box.admin.set.basic') !!}`;
                    }
                    else if(level==2) {
                        window.location.href = `{!! yzWebFullUrl('plugin.blind-box.admin.activity.activity-list') !!}`;
                    }
                    else if(level==3) {
                        window.location.href = `{!! yzWebFullUrl('plugin.blind-box.admin.activity.activity-list') !!}`;
                    }
                },
                
                submitForm(formName) {
                    this.btnChangeEnable = true;
                    let that = this;
                    let json = {
                        goods:[],
                        activity:JSON.parse(JSON.stringify(this.form))
                    };
                    json.activity.activity_start = json.activity.activity_start/1000;
                    json.activity.activity_end = json.activity.activity_end/1000;
                    if(this.form.pattern == 0){
                        //单品
                        this.form.goods.forEach((item,index) => {
                            json.goods.push({
                                goods_id:item.goods_id,
                                goods_option_id:item.goods_option_id,
                                stock:item.stock,
                                thumb:item.thumb?item.thumb:''
                            });
                        });
                    }else {
                        //组合
                        this.form.combination.forEach((item,index) => {
                            json.goods.push({
                                goods_id:item.goods_id,
                                stock:item.stock
                            });
                        });
                    }
                    if(this.id) {
                        json.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('{!! yzWebFullUrl('plugin.blind-box.admin.activity.add') !!}',json).then(response => {
                                if (response.data.result) {
                                    this.$message({type: 'success',message: '操作成功!'});
                                    // window.location.reload(1);
                                     this.goBack();
                                } else {
                                    this.$message({message: response.data.msg,type: 'error'});
                                }
                                loading.close();
                            },response => {
                                loading.close();
                            });
                        }
                        else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                    this.btnChangeEnable = false;
                },
                selectGoods(){
                    this.select_option = "";
                    this.goods_show = true;
                },
                selectCombination(){
                    this.combination_show = true;
                },
                goBack() {
                    history.go(-1)
                },
                openUpload(str,index) {
                    this.chooseImgName = str;
                    this.uploadShow = true;
                    this.chooseImgIndex = "-1";
                    if(index || index == 0) {
                        this.chooseImgIndex = index;
                    }
                },
                changeProp(val) {
                    if(val == true) {
                        this.uploadShow = false;
                    }
                    else {
                        this.uploadShow = true;
                    }
                },
                sureImg(name,image,image_url) {
                    // 表格里
                    if(this.chooseImgIndex != '-1') {
                        this.form.goods[this.chooseImgIndex][name] = image;
                        this.form.goods[this.chooseImgIndex][name+'_src'] = image_url;
                        this.form.goods.push({});
                        this.form.goods.splice(this.form.goods.length-1,1)
                        this.$forceUpdate();
                        console.log(this.chooseImgIndex)
                        console.log(this.form.goods[this.chooseImgIndex])
                    }
                    // 普通图片
                    else {
                        // console.log("afdfdfdff")
                        this.form[name] = image;
                        this.form[name+'_src'] = image_url;
                    }
                },
                clearImg(str) {
                    this.form[str] = "";
                    this.form[str+'_src'] = "";
                    this.$forceUpdate();
                },
                searchGoods(type){
                    if(type > 0){
                        var url = '{!! yzWebFullUrl('plugin.blind-box.admin.combination.search-combination') !!}';
                    }else {
                        var url = '{!! yzWebFullUrl('plugin.blind-box.admin.combination.search-goods') !!}';
                    }
                    let json = {
                        search:this.keyword_type,
                    }
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post(url,{search:json}).then(function (response) {
                            if (response.data.result){
                                // this.$message.success("操作成功");
                                // this.search(this.current_page);
                                if(type > 0){
                                    this.combination_list = response.data.data.list
                                }else {
                                    this.goods_list = response.data.data.list
                                }
                            }
                            else {
                                this.$message.error( response.data.msg );
                            }
                            loading.close();
                        },function (response) {
                            this.$message.error(response.data.msg);
                            loading.close();
                        }
                    );
                },
                changeOption(index){
                    var stock = this.goods_list[index].stock;
                    var goods_option = null;
                    this.goods_list[index].has_many_options.forEach((item,index) => {
                        if(item.id == this.select_option){
                            stock = item.stock;
                            goods_option = item;
                        }
                    });
                    this.form.goods.push({
                        goods_id:this.goods_list[index].id,
                        goods_option_id:this.select_option,
                        stock:stock,
                        goods: this.goods_list[index],
                        goods_options:goods_option
                    });
                    console.log( this.form.goods);
                    this.form.stock += stock;
                    this.goods_show = false;
                },
                addGoods(index){
                    this.form.goods.push({
                        goods_id:this.goods_list[index].id,
                        goods_option_id:0,
                        stock:this.goods_list[index].stock,
                        goods: this.goods_list[index]
                    })
                    this.form.stock += this.goods_list[index].stock;
                    this.goods_show = false;
                },
                addCombination(index){
                    this.form.combination.push({
                        goods_id:this.combination_list[index].id,
                        goods_option_id:0,
                        stock:this.combination_list[index].stock,
                        combination: this.combination_list[index]
                    })
                    this.form.combination_stock += this.combination_list[index].stock;
                    this.combination_show = false;
                },
                delGoods(index){
                    this.form.stock -= this.form.goods[index].stock;
                    this.form.goods.splice(index,1);
                },
                delCombination(index){
                    this.form.combination_stock -= this.form.combination[index].stock;
                    this.form.combination.splice(index,1);
                },
                changeStock(index,type){
                    if(type == 0){
                        this.form.stock = 0;
                        this.form.goods.forEach((item,index) => {
                            this.form.stock += parseInt(item.stock);
                        });
                    }else {
                        this.form.combination_stock = 0;
                        this.form.combination.forEach((item,index) => {
                            this.form.combination_stock += parseInt(item.stock);
                        });
                    }
                }
            },
        })

    </script>
@endsection