<!--
 * @Author: Fly
 * @Date: 2025-12-20 09:41:16
 * @LastEditTime: 2025-12-20 10:08:44
 * @Description: 
-->
<template>
    <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :size="$drawerWidth(800)">
        <el-form ref="formRef" :model="FormData" :rules="FormRules" label-width="120px">
            <el-form-item label="分类名称" prop="categoryName">
                <el-input v-model="FormData.categoryName" placeholder="请输入分类名称" />
            </el-form-item>
            <el-form-item label="上级分类" prop="parentId" v-if="FormData.parentId !== 0">
                <el-select v-model="FormData.parentId" placeholder="请选择上级分类" clearable style="width: 100%">
                    <el-option v-for="(v, i) in topList" :key="i" :label="v.categoryName" :value="v.categoryId" />
                </el-select>
            </el-form-item>
            <el-form-item label="分类图标" prop="categoryIcon">
                <imageUpload v-model="FormData.categoryIcon" :limit="1" />
            </el-form-item>
            <el-form-item label="分类描述" prop="categoryDescription">
                <el-input type="textarea" :rows="2" placeholder="请输入分类描述" v-model="FormData.categoryDescription">
                </el-input>
            </el-form-item>
            <el-form-item label="排序" prop="sortOrder">
                <el-input-number v-model="FormData.sortOrder" :min="1" label="排序" :precision="0"></el-input-number>
            </el-form-item>
            <el-form-item label="上架状态" prop="shelvedStatus">
                <el-select v-model="FormData.shelvedStatus" placeholder="请选择上架状态" clearable style="width: 100%">
                    <el-option label="上架" :value="true" />
                    <el-option label="下架" :value="false" />
                </el-select>
            </el-form-item>
        </el-form>
        <template v-slot:footer>
            <el-button :size="ELsize" :loading="submitLoading" type="primary" @click="submitForm">确定</el-button>
            <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
        </template>
    </Drawer>
</template>

<script>
import { merchantCategoryInfo, merchantCategoryTops, merchantCategoryEdit, merchantCategoryAdd } from "@/api/platformClass.js";
export default {
    name: '',
    data() {
        return {
            DrawerTitle: '',
            DrawerVisible: false,
            skeletonLoading: false,
            topList: [],
            FormData: {},
            FormRules: {
                categoryName: [
                    { required: true, message: "请输入分类名称", trigger: "blur" }
                ],
                categoryIcon: [
                    { required: false, message: "请上传分类图标", trigger: "blur" }
                ],
                categoryDescription: [
                    { required: false, message: "请输入分类描述", trigger: "blur" }
                ],
                sortOrder: [{ required: true, message: "请输入排序号", trigger: "change" }],
                shelvedStatus: [
                    { required: true, message: "请选择上架状态", trigger: "blur" }
                ],
            },
            submitLoading: false,
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ categoryId: 3 })
        // }, 100);
    },

    methods: {
        async openHandle(row) {
            this.FormData = {
                categoryId: undefined,
                parentId: undefined,
                categoryIcon: undefined,
                categoryDescription: undefined,
                sortOrder: undefined,
                shelvedStatus: true,
            };

            this.DrawerVisible = true;
            this.DrawerTitle = (row ? '修改' : '新增') + '平台商品分类';
            if (row) {
                const { categoryId } = row || {};
                let V_ = null;
                try {
                    if (categoryId) {
                        this.skeletonLoading = true;
                        const { data } = await merchantCategoryInfo(categoryId);
                        V_ = data;
                    }
                } catch { }

                this.FormData = V_ || row || {};
                this.skeletonLoading = false;
            }
            if (this.FormData.parentId !== 0) this.getTopList();
        },
        // 获取顶级分类列表
        async getTopList() {
            try {
                const { data } = await merchantCategoryTops();
                this.topList = data || [];
            } catch (error) {
                this.topList = [];
            }
        },

        /** 提交按钮 */
        submitForm() {
            this.$refs["formRef"].validate(valid => {
                if (valid) {
                    if (!this.FormData.parentId) {
                        this.FormData.parentId = 0
                    }
                    this.submitLoading = true;
                    if (this.FormData.categoryId != null) {
                        merchantCategoryEdit(this.FormData).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.DrawerVisible = false;
                            this.$emit('success');
                        }).finally(() => {
                            this.submitLoading = false;
                        });
                    } else {
                        merchantCategoryAdd(this.FormData).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.DrawerVisible = false;
                            this.$emit('success');
                        }).finally(() => {
                            this.submitLoading = false;
                        });
                    }
                }
            });
        },
    },
};
</script>