@extends('layouts.base')
@section('title', '自购省设置')

@section('content')
    <section class="content" id="setting_data">

        <div class="right-titpos">
            <ul class="add-snav">
                <li class="active"><a href="#">自购省>基础设置</a></li>
            </ul>
        </div>
        <el-form   ref="form" action="" method="post" id="setting_form"   :model="setting_form" >
            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label>开启自购省</label>
                </el-col>
                <el-col :span="10" >
                    <template>
                        <el-switch v-model="setting_form.open_state" active-value="1" inactive-value="0"></el-switch>
                        <p></p>
                        <p>自购省优先于满额减、优惠券、抵扣等计算</p><br>
                        <p>自购省只支持自营商品、门店商品、收银台、聚合供应链商品、供应商商品</p>
                    </template>
                </el-col>

            </el-row>

            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label>自购省计算基数</label>
                </el-col>
                <el-col :span="10" >
                    <template>
                        <el-radio-group v-model="setting_form.cal_type" >
                            <el-radio-button  text-color="#66ffff"  label="1">商品价格</el-radio-button>
                            <el-radio-button  text-color="#66ffff"  label="2">商品利润</el-radio-button>
                        </el-radio-group>
                        <p></p>
                        <p>平台自营、供应商、聚合供应链商品利润=商品现价-商品成本价；门店商品利润=平台提成金额</p>
                    </template>
                </el-col>
            </el-row>


            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label>自购省比例</label>
                </el-col>

                <el-col :span="8" >
                    <template v-for="v in setting_form.rule">
                        <el-input  placeholder="请输入比例" v-model="v.discount_percent" type="number" >
                            <template slot="prepend">@{{v.level_name}}</template>
                            <template slot="append">%</template>
                        </el-input>
                        <p></p>
                    </template>
                    <p>按会员等级设置，比例计算优先级商品独立设置＞自购省插件统一设置</p>
                </el-col>

            </el-row>


            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label>商品自购省开关默认设置</label>
                </el-col>
                <el-col :span="10" >
                    <template>
                        <el-switch v-model="setting_form.goods_state" active-value="1" inactive-value="0"></el-switch>
                    </template>
                </el-col>
            </el-row>

            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label>自购省商品详情页显示</label>
                </el-col>
                <el-col :span="15" >
                    <template>
                        <el-switch v-model="setting_form.detail_show_state" active-value="1" inactive-value="0"></el-switch>
                    </template>
                </el-col>
                <el-col :span="10" >
                    <p></p>
                    <el-checkbox-group v-model="setting_form.detail_choose_tab" >
                        <el-checkbox-button v-for="tab in setting_form.detail_show_tab" :label="tab.key" :key="tab.key">@{{tab.name}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-col>

            </el-row>

            <el-row :gutter="0" style="min-height: 30px">
                <el-col :span="20"><div><p> </p></div></el-col>
            </el-row>

            <el-row :gutter="10">
                <el-col :span="1"><div><p> </p></div></el-col>
                <el-col :span="3" >
                    <label></label>
                </el-col>
                <el-col :span="15" >
                    <div class="confirm-btn">
                        <el-button type="success" @click="onSubmit">提交</el-button>
                    </div>
                </el-col>
            </el-row>


        </el-form>

    </section>
    <script textarea="javascript">
        var setting_data = new Vue({
            el: '#setting_data',
            data() {
                var setting = '{!! $setting !!}';
                setting = JSON.parse(setting);

                return {
                    setting : setting,
                    setting_form:{
                        'open_state' : setting.open_state.toString(),
                        'cal_type' : setting.cal_type.toString(),
                        'goods_state' : setting.goods_state.toString(),
                        'detail_show_state' : setting.detail_show_state.toString(),
                        'detail_show_tab' : setting.detail_show_tab,
                        'detail_choose_tab' : setting.detail_choose_tab,
                        'rule' : setting.rule
                    }
                };
            },
                methods:{
                    onSubmit:function(){
                        let loading = this.$loading({target:document.querySelector(".content"),background: 'rgba(0, 0, 0, 0)'});
                        let post_data = this.setting_form;
                        this.$http.post('{!! yzWebFullUrl('plugin.selfbuy-discount.admin.setting.edit') !!}',post_data).then(function (response){
                            if (response.data.result) {
                                this.$message({message: response.data.msg,type: 'success'});
                                loading.close();
                                location.reload();
                            }else {
                                this.$message({message: response.data.msg,type: 'error'});
                                loading.close();
                            }
                        },function (response) {
                            this.$message({message: response.data.msg,type: 'error'});
                            loading.close();
                        })
                    },
            }
        })

    </script>

@endsection