<template>
    <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :wrapperClosable="true" :size="$drawerWidth(700)">
        <el-form :model="FormData" ref="form" :size="ELsize" label-width="auto" :rules="rules">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="FormData.name" placeholder="请输入分类名称" :maxlength="50" />
            </el-form-item>
            <el-form-item label="分类图标" prop="categoryIcon">
                <ImageUpload v-model="FormData.categoryIcon" :limit="1" />
            </el-form-item>
            <el-form-item label="排序" prop="orderIndex">
                <el-input v-model="FormData.orderIndex" placeholder="请输入排序" :minlength="0"/>
            </el-form-item>
            <el-form-item label="是否上架" prop="shelvedStatus">
                <el-radio-group v-model="FormData.shelvedStatus">
                    <el-radio :label="1">上架</el-radio>
                    <el-radio :label="0">下架</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>


        <template v-slot:footer>
            <el-button type="primary" :loading="loading" :size="ELsize" @click="handleSubmit">确定</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { businessCategoryAdd, businessCategoryEdit } from "@/api/shop.js";
export default {
    data() {
        return {
            DrawerTitle: '新增商家分类',
            DrawerVisible: false,
            skeletonLoading: false,
            FormData: {
                name: '',
                orderIndex: 1,
                shelvedStatus: 1,
            },
            loading: false,
            rules: {
                name: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
                orderIndex: [{ required: true, message: '请输入排序', trigger: 'blur' }],
                shelvedStatus: [{ required: true, message: '请选择是否上架', trigger: 'change' }],
                categoryIcon: [{ required: true, message: '请上传分类图标', trigger: 'change' }],
            },
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ businessId: 22, businessName: "总部国际专卖店" })
        // }, 100);
    },

    methods: {
        open(row) {
            if (row) {
                this.DrawerTitle = '修改商家分类';
                this.FormData = {
                    ...row,
                    shelvedStatus: row.shelvedStatus ? 1 : 0,
                };
            } else {
                this.DrawerTitle = '新增商家分类';
            }
            this.DrawerVisible = true;
        },
        handleSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    // this.$emit('submit', this.FormData);
                    let url = this.FormData.categoryId ? businessCategoryEdit : businessCategoryAdd;
                    url(this.FormData).then(res => {
                        this.loading = false;
                        if (res.code === 200) {
                            this.$message.success(this.FormData.id ? '修改成功' : '新增成功');
                            this.DrawerVisible = false;
                            this.FormData = {
                                name: '',
                                orderIndex: 1,
                                shelvedStatus: 1,
                            };
                            this.$emit('success');
                        }
                    })
                } else {
                    console.log('校验失败');
                }
            });
        }
    }
};
</script>