@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="combination_name">
                            <el-input v-model="form.combination_name" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="组合图片" prop="combination_img">
                            <div class="upload-box" @click="openUpload('combination_img')" v-if="!form.combination_img_src">
                                <i class="el-icon-plus" style="font-size:32px"></i>
                            </div>
                            <div @click="openUpload('combination_img')" class="upload-boxed" v-if="form.combination_img_src" >
                                <img :src="form.combination_img_src" alt="" style="width:150px;height:150px;border-radius: 5px;cursor: pointer;">
                                <i class="el-icon-close" @click.stop="clearImg('combination_img')" title="点击清除图片"></i>
                                <div class="upload-boxed-text">点击重新上传</div>
                            </div>
                            <div class="tip">
                                建议尺寸560*650
                            </div>
                        </el-form-item>
                        <el-form-item label="零售价" prop="price">
                            <el-input v-model="form.price" style="width:70%;"></el-input>
                        </el-form-item>
                        <el-form-item label="库存" prop="stock">
                            <el-input v-model="form.stock" style="width:70%;"></el-input>
                            <div class="tip">
                                库存必须小于任何一件单品的库存
                            </div>
                        </el-form-item>
                        <el-form-item label="组合商品" prop="worth">
                            <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.combination_goods" style="width: 100%"  v-loading="table_loading">
                                    <el-table-column prop="goods.title" label="商品"  min-width="100"></el-table-column>
                                    <el-table-column prop="goods.price" label="现价" min-width="180"  align="center"></el-table-column>
                                    <el-table-column prop="goods.stock" label="库存" min-width="180"  align="center"></el-table-column>
                                    <el-table-column prop="stock" label="规格" min-width="180"  align="center">
                                        <template slot-scope="scope">
                                            <el-select v-model="scope.row.goods_option_id" clearable placeholder="选择规格"  v-if="scope.row.goods.has_option"  @change="changeOption2(scope.$index)">
                                                <el-option v-for="(item,index) in scope.row.goods.has_many_options" :key="index" :label="item.title" :value="item.id" ></el-option>
                                            </el-select>
                                            <div class="tip" v-if="!scope.row.goods.has_option">
                                                单规格商品
                                            </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>
                            <!-- 表格end -->
                        </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()" 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>
            <!-- 分页 -->
            <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>
    
    @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,//选择商品弹窗
                    keyword_type:"",
                    goods_list:[],
                    select_option:"",
                    form:{
                        combination_name:"",
                        combination_img:"",
                        price:"",
                        stock:"",
                        combination_goods:[]
                    },
                    btnChangeEnable:false,
                    uploadShow:false,
                    chooseImgName:'',
                    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.combination.combination-list') !!}`;
                    }
                    else if(level==3) {
                        window.location.href = `{!! yzWebFullUrl('plugin.blind-box.admin.combination.combination-list') !!}`;
                    }
                },
                
                submitForm(formName) {
                    this.btnChangeEnable = true;
                    let that = this;
                    let json = {
                        goods:[],
                        combination:{
                            combination_name:this.form.combination_name,
                            combination_img:this.form.combination_img,
                            price:this.form.price,
                            stock:this.form.stock,
                        }
                    };
                    this.form.combination_goods.forEach((item,index) => {
                        json.goods.push({
                            goods_id:item.goods_id,
                            goods_option_id:item.goods_option_id,
                        });
                    });
                    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.combination.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;
                },
                goBack() {
                    history.go(-1)
                },
                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+'_src'] = image_url;
                },
                clearImg(str) {
                    this.form[str] = "";
                    this.form[str+'_src'] = "";
                    this.$forceUpdate();
                },
                searchGoods(){
                    let json = {
                        search:this.keyword_type,
                    }
                    let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                    this.$http.post('{!! yzWebFullUrl('plugin.blind-box.admin.combination.search-goods') !!}',{search:json}).then(function (response) {
                            if (response.data.result){
                                // this.$message.success("操作成功");
                                // this.search(this.current_page);
                                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;
                    this.goods_list[index].has_many_options.forEach((item,index) => {
                        if(item.id == this.select_option){
                            stock = item.stock;
                        }
                    });
                    this.goods_list[index].stock = stock;
                    this.form.combination_goods.push({
                        goods_id:this.goods_list[index].id,
                        goods_option_id:this.select_option,
                        goods: this.goods_list[index]
                    })
                     // console.log(this.form.combination_goods);
                    // this.select_option = 0;
                    this.goods_show = false;
                },
                changeOption2(index){
                    var goods_option_id = this.form.combination_goods[index].goods_option_id;
                    var stock = this.form.combination_goods[index].goods.stock;
                    this.form.combination_goods[index].goods.has_many_options.forEach((item,index) => {
                        if(item.id == goods_option_id){
                            stock = item.stock;
                        }
                    });
                    this.form.combination_goods[index].goods.stock = stock;
                },
                addGoods(index){
                    this.form.combination_goods.push({
                        goods_id:this.goods_list[index].id,
                        goods_option_id:0,
                        goods: this.goods_list[index]
                    })
                    // console.log(this.form.combination_goods);
                    // this.select_option = 0;
                    this.goods_show = false;
                },
                delGoods(index){
                    this.form.combination_goods.splice(index,1);
                },
            },
        })

    </script>
@endsection