<template>
    <div v-loading="pageLoading">
        <el-form :model="form" label-position="top">
            <el-form-item label="经营模式「单选」">
                <el-radio-group v-model="form.registerType">
                    <el-radio label="munchies">快餐版（先支付后下单）</el-radio>
                    <el-radio label="restaurant">餐饮版（先下单后支付）</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="就餐模式「多选」">
                <el-checkbox-group v-model="form.eatModel">
                    <el-checkbox label="dine-in">堂食自取</el-checkbox>
                    <el-checkbox label="take-out">允许打包</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="loading" @click="submitHandle">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { tbShopInfo, tbShopInfoPut } from "@/api/user";
export default {
    data() {
        return {
            pageLoading: false,
            loading: false,
            form: {
                id: localStorage.getItem("shopId"),
                registerType: 'munchies',
                eatModel: ['dine-in']
            }
        }
    },
    mounted() {
        this.tbShopInfo();
    },
    methods: {
        // 提交修改
        async submitHandle() {
            try {
                this.loading = true
                const res = await tbShopInfoPut(this.form)
                this.loading = false
                this.$message.success('修改成功')
                this.tbShopInfo()
            } catch (error) {
                this.loading = false
                console.log(error);
            }
        },
        // 获取店铺详情
        async tbShopInfo() {
            try {
                this.pageLoading = true
                const shopId = localStorage.getItem("shopId");
                const res = await tbShopInfo(shopId);
                this.form.registerType = res.registerType;
                this.form.eatModel = res.eatModel;
                this.pageLoading = false
            } catch (error) {
                console.log(error);
            }
        },
    }
}
</script>