{extend name="app/shop/view/base.html"/}
{block name="resources"}
<link rel="stylesheet" href="__STATIC__/element-ui/index.css">
<style>
    .layui-form-radio {
        /* line-height: 28px; */
        margin: 0px 0px 5px -14px;
        padding-right: 10px;
        cursor: pointer;
        font-size: 0;
    }
    .el-radio.is-bordered {
        padding: 12px 20px 0 10px;
        border-radius: 4px;
        border: 1px solid #DCDFE6;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        height: 40px;
    }
</style>
{/block}
{block name="body"}
<div class="layui-form form-wrap" id="form">
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="required">*</span>商品名称：</label>
        <div class="layui-input-inline">
            <div>{$goods_info.goods_name}</div>
        </div>
    </div>
    <div class="layui-form-item goods-image-wrap">
        <label class="layui-form-label"><span class="required">*</span>商品主图：</label>
        <div class="layui-input-block">
            <!--商品主图项-->
            <el-image style="width: 100px; height: 100px"  :src="url" :preview-src-list="srcList">  </el-image>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支付宝分类：</label>
        <div class="layui-inline">
            <el-radio-group v-model="api_type" size="small">
                <el-radio label="1" border>普通商品(实物)</el-radio>
                <el-radio label="2" border>普通商品(虚拟)</el-radio>
                <el-radio label="3" border disabled>本地生活(团购)</el-radio>
                <el-radio label="5" border disabled>本地生活(代金)</el-radio>
                <el-radio label="6" border disabled>租聘商品(实物)</el-radio>
            </el-radio-group>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">支付宝分类：</label>
        <div class="layui-inline">
            <el-cascader class="layui-input-inline" style="width: 350px;" ref="cascader" placeholder="请选择商品分类可直接搜索"
                         v-model="alipaycategory_id"
                         :props="props" v-if="options"
                         :options="options" filterable
                         @change="handleChange" getCheckedNodes>
            </el-cascader>
        </div>
        <div class="word-aux">选择支付宝分类,商品将自动同步支付宝小程序商品库,首次或无分类您可以<a href="{:addon_url('alilife/shop/category/lists')}">同步分类</a></div>
    </div>
    <div class="layui-form-item" v-if="apitypes=='localitem'">
        <div class="layui-form-item" >
            <label class="layui-form-label"><span class="required">*</span>团购价格：</label>
            <div class="layui-inline">
              <el-input
                    placeholder="请输入团购价格"
                    suffix-icon="el-icon-date"
                    v-model="formData.groupbuy_price">
              </el-input>
           </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label"><span class="required">*</span>最低购买数量：</label>
            <div class="layui-inline">
                <el-input
                        placeholder="请输入最低购买数量"
                        suffix-icon="el-icon-date"
                        v-model="formData.buy_num">
                </el-input>
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label"><span class="required">*</span>活动时间：</label>
            <div class="layui-inline">
                <el-date-picker
                        v-model="activity_time"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">可使用门店</label>
            <div class="layui-input-block">
                <el-checkbox v-model="storeList">全部门店</el-checkbox>
                <el-checkbox-group v-model="storeList">
                    <el-checkbox label="门店1" disabled></el-checkbox>
                    <el-checkbox label="门店2" disabled></el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label "><span class="required">*</span>商家名称</label>
            <div class="layui-input-block">
                <input type="text" name="merchant_name"  value="{$shop_info.site_name??''}"  lay-verify="required" autocomplete="off" class="layui-input len-long">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>客服电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone_number" value="{$shop_info.contacts_mobile??''}"  lay-verify="required" autocomplete="off" class="layui-input len-long">
            </div>
            <div class="word-aux"><p>请确保活动期间客服电话畅通</p></div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">活动规则说明：</label>
            <div class="layui-input-inline">
                <textarea name="notification" class="layui-textarea len-long" maxlength="300"></textarea>
            </div>
        </div>
    </div>
    <!-- 表单操作 -->
    <div class="form-row">
        <button class="layui-btn bg-color" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn layui-btn-primary" onclick="back()">返回</button>
    </div>
</div>
{/block}
{block name="script"}
<script src="STATIC_JS/vue.js"></script>
<!-- 引入组件库 -->
<script src="__STATIC__/element-ui/index.js"></script>
<script>
    let alipaycategory_id='{$alipaycategory_id}',form,laydate;
    new Vue({
        el: "#form",
        data(){
            return {
                url: '',
                srcList: [],
                formData: {
                    groupbuy_price:'',
                    buy_num:1,
                    select_all_shop:1,
                    activity_time:'',
                    storeList:'',
                },
                options: '',
                props: {
                    value:'cat_id',
                    label:'cat_name',
                },
                api_type:1,
                alipaycategory_id:alipaycategory_id,
                item_type:'',
                item_attr_list:[],
                Template:{
                    limit_stock_rule:{
                        limit:'', //库存模式 0 1
                        num:'',  //库存数量
                        unit:'', //单位
                        is_required:false, //是否必填
                    }
                },
                apitypes:'allcategory',
                goods_id:'{$goods_id}',
            };
        },
        created(e) {
            this.getCategory();
            let _this=this;
            let goods_image = '{$goods_info.goods_image}'
            this.srcList = goods_image.split(',')
            this.url = this.srcList[0]
            layui.use(['form'], function () {
                var form = layui.form,
                    repeat_flag = false;
                form.render();
                form.on('submit(save)', function(data) {
                    _this.formData['api_type']=_this.apitypes
                    _this.formData['goods_id']= _this.goods_id
                    _this.formData['alipaycategory_id']= _this.alipaycategory_id
                    console.log(_this.formData)
                    if (repeat_flag) return;
                    repeat_flag = true;
                    let index = ns.loading('open','正在上传...');
                    $.ajax({
                        dataType: 'JSON',
                        type: 'POST',
                        url: ns.url("alilife://shop/goods/syncGoods"),
                        data:_this.formData,
                        success: function(res){
                            if (res.code == 0) {
                                layer.confirm('申请成功,等待审核', {
                                    title:'操作提示',
                                    btn: ['确定'],
                                    yes: function(){
                                        layer.closeAll();
                                    }
                                })
                            }else{
                                repeat_flag = false;
                                layer.msg(res.message);
                            }
                        }
                    });
                });
            })
        },
        methods: {
            getStore() {
                console.log(4444)
            },
            getCategory(){
                let _this=this;
                let api_types ='allcategory';
                console.log(_this.api_type)
                switch (_this.api_type){
                    case '3':
                    case '5':
                        api_types='localitem';
                        break;
                    default:
                        api_types='allcategory';
                }
                this.apitypes=api_types;
                $.ajax({
                    url: ns.url("alilife://shop/category/getCategory"),
                    data: {
                        api_type:api_types,
                        item_type:this.api_type,
                    },
                    dataType: 'JSON',
                    type: 'POST',
                    success: function(res) {
                        _this.options=res;
                    }
                });
            },
            handleChange(value,$obs){
                let nodesInfo = this.$refs['cascader'].getCheckedNodes()[0],_this=this;
                _this.alipaycategory_id=nodesInfo.data.cat_id;
                _this.item_type=nodesInfo.data.cat_type;
            }
        },
        watch:{
            api_type:function (val){
                this.getCategory();
            }
        }
    })
</script>
{/block}