<template>
    <el-dialog :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
        :wrapperClosable="true" width="600px">
        <el-form :model="FormData" ref="form" :size="ELsize" label-width="auto">
            <el-form-item label="分类" prop="categoryIds">
                <el-select v-model="FormData.categoryIds" placeholder="请选择分类" clearable filterable multiple
                    style="width: 100%;">
                    <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.name"
                        :value="item.categoryId" />
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click.stop="DrawerVisible = false">取消</el-button>
            <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { businessCategoryList, businessCategoryRelationPage, businessCategoryRelationAdd } from "@/api/shop.js";
export default {
    data() {
        return {
            DrawerTitle: '设置分类',
            DrawerVisible: false,
            skeletonLoading: false,
            FormData: {
                businessId: '',
                categoryIds: [],
            },
            loading: false,
            categoryList: [],
        };
    },
    created() {
        this.getCategoryList();
    },

    methods: {
        open(row) {
            businessCategoryRelationPage({
                businessId: row.businessId,
            }).then(res => {
                if (res.code === 200) {
                    this.FormData.categoryIds = res.data.map(item => item.categoryId) || [];
                    this.FormData.businessId = row.businessId;
                    this.DrawerVisible = true;
                }
            })
        },
        getCategoryList() {
            businessCategoryList().then(res => {
                if (res.code === 200) {
                    this.categoryList = res.data || [];
                }
            })
        },
        handleSubmit() {
            // console.log(this.FormData)
            // return
            this.loading = true;
            businessCategoryRelationAdd({
                businessId: this.FormData.businessId,
                categoryIds: this.FormData.categoryIds || [],
            }).then(res => {
                this.loading = false;
                if (res.code === 200) {
                    this.$message.success('设置成功');
                    this.DrawerVisible = false;
                    this.$emit('success');
                }
            }).catch(() => {
                this.loading = false;
            })
        }
    }
};
</script>