<script setup>
import XSelect from "../../../../../../../components/XSelect/index.vue";
import {reactive, ref, watch} from "vue";
import Api from "../../../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const emits = defineEmits(['success']);
const {maxClass, pid, detail} = defineProps({
    pid: {
        type: Number,
        default: 1,
    },
    detail: {
        type: Object,
        default: {},
    },
    maxClass: {
        type: Number,
        default: 1,
    }
});

const visible = ref(false);

const form = reactive({
    name: null,
});

watch(
    () => visible.value,
    (val) => {
        if (val) Object.assign(form, detail);
    }
)

const getData = async () => {
    return Promise.resolve({
        data: [
            {
                id: 1,
                name: '常见问题',
            },
            {
                id: 2,
                name: '基础教学',
            },
        ]
    })
}

const success = async () => {
    if (detail.id) {
        const {msg} = await Api.admin.editArticleCategory({
            pid,
            ...form,
        });
        Message.success(msg);
    } else {
        const {msg} = await Api.admin.addArticleCategory({
            pid,
            ...form,
        });
        Message.success(msg);
    }
    emits('success');
}
</script>

<template>
    <a-button v-if="!$slots.default" type="primary" @click="visible=true">
        <template #icon>
            <icon-plus/>
        </template>
        新建
    </a-button>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>


    <a-modal
        @ok="success"
        title="新增二级分类"
        title-align="start"
        v-model:visible="visible">
        <a-form
            layout="vertical"
            :model="form">
            <a-form-item label="一级分类">
                <XSelect
                    :init="true"
                    :default-value="maxClass"
                    :api="getData"
                    placeholder="请选择二级分类"
                    :disabled="true">
                </XSelect>
                {{ maxClass }}
            </a-form-item>
            <a-form-item label="二级分类名称">
                <a-input v-model:model-value="form.name" placeholder="请输入二级分类名称"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
