<template>
    <el-container>
        <el-main>
            <el-card shadow="never" header="充值套餐设置" class="borderNone" v-loading="loadingState">
                <el-form ref="dialogForm" :model="formData" :rules="rules" label-width="100px" label-position="top">
                    <el-form-item label="功能开关" prop="state">
                        <el-radio-group v-model="formData.state">
                            <el-radio border :label="1">默认套餐</el-radio>
                            <el-radio border :label="2">自定义套餐</el-radio>
                            <el-radio border :label="3">关闭</el-radio>
                        </el-radio-group>
                        <div class="el-form-item-msg">关闭后，整个门店将不支持会员卡支付</div>
                    </el-form-item>
                    <template v-if="formData.state==1">
                        <fieldset class="layui-elem-field">
                            <legend><el-tag type="success" size="large">小提示</el-tag></legend>
                            <div class="font-s14">
                                90%的店铺都在使用
                            </div>
                        </fieldset>
                        <el-row :gutter="15" class="">
                            <el-col :span="12" class="" v-for="(item,index) in systemData" :key="index">
                                <fieldset class="layui-elem-field">
                                    <legend><el-tag type="success" size="large">{{item.name}}</el-tag></legend>
                                    <div class="form-flex">充值￥<el-tag type="warning" size="large">{{item.money}}</el-tag>元，送￥<el-tag type="warning" size="large">{{item.old_money}}</el-tag>元</div>
                                </fieldset>
                            </el-col>
                        </el-row>
                    </template>
                    <template v-if="formData.state==2">
                        <fieldset class="layui-elem-field">
                            <legend><el-tag type="success" size="large">小提示</el-tag></legend>
                            <div class="font-s14 color-red">
                                首充金额及首充赠送金额不超过50元，其他套餐赠送比例不超过50%
                            </div>
                        </fieldset>
                        <el-row :gutter="15" class="">
                            <el-col :span="12" class="" v-for="(item,index) in shopData" :key="index">
                                <fieldset class="layui-elem-field">
                                    <legend><el-tag type="success" size="large">{{item.name}}</el-tag></legend>
                                    <div class="form-flex">充值￥<el-input v-model="item.money" style="width: 120px" autosize><template #append>元</template></el-input>送￥<el-input v-model="item.old_money" autosize style="width: 140px"><template #append>元</template></el-input></div>
                                </fieldset>
                            </el-col>
                        </el-row>
                    </template>
                </el-form>
            </el-card>
            <!-- <el-card shadow="never" header="宣传物料下载" class="borderNone mt10" v-loading="loadingState"></el-card> -->
        </el-main>
        <el-footer>
            <el-button type="primary" size="large" :loading="isSaveing" @click="saveForm">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            loadingState:false,
            formData:{},
            systemData:[],
            shopData:[],
            rules:{
                state: [
                    {required: true, message: '请选择'}
                ],
            },
            isSaveing:false
        }
    },
    mounted(){
        this.getData()
    },
    methods: {
        async saveForm(){
            var validate = await this.$refs.dialogForm.validate().catch(()=>{});
            if(!validate){ return false }
            this.isSaveing = true;
            let submitData = JSON.parse(JSON.stringify(this.formData));
            if (submitData.state == 2) {
                submitData.shop = this.shopData;
            }
            var resp = await this.$API.mMember.combo.post(submitData);
            this.isSaveing = false;
            if (resp.code !== 1) {
                return this.$message.error(resp.msg);
            }
            this.$message.success(resp.msg);
        },
        async getData(){
            var resp = await this.$API.mMember.combo.get();
            if (resp.code == 0) {
                return this.$message.error(resp.msg)
            }
            this.formData.state = resp.data.state;
            this.systemData = resp.data.system;
            this.shopData = resp.data.shop;
        }
    }
}
</script>

<style>
.font-s14{font-size: 14px;}
.color-red{color: #f00;}
.form-flex{font-size: 14px;display: flex;align-items: center;gap: 10px;}
</style>