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

const emits = defineEmits(['success']);
const {pid, detail} = defineProps({
    pid: {
        type: Number,
        default: 2,
    },
    detail: {
        type: Object,
        default: {}
    }
});
const visible = ref(false);

const form = reactive({
    type: null,
    files: [],
    pop_images: [],
    pop_video: [],
    single_id: null,
    pop_type: 1,
    title: null,
    category_id: null,
    content: null,
});

watch(
    () => visible.value,
    (val) => {
        if (val) {
            Object.assign(form, detail);
            if (form.single_id === 0) form.single_id = null;
            if (form.pop_type === 0) form.pop_type = 1;
        }
    }
)

const success = async () => {
    if (detail.id) {
        const {msg} = await Api.admin.editArticle({...form, pid});
        Message.success(msg);
    } else {
        const {msg} = await Api.admin.addArticle({...form, pid});
        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="`${detail.id ? '编辑' : '新增'}基础教学`"
        title-align="start"
        v-model:visible="visible">
        <a-form
            layout="vertical"
            :model="form">
            <a-form-item label="二级分类">
                <XSelect
                    v-model:model-value="form.category_id"
                    :init="true"
                    :api="Api.admin.getArticleCategoryList2"
                    :api-po="{pid}"
                    placeholder="请选择二级分类">
                </XSelect>
            </a-form-item>
            <a-form-item label="封面">
                <UploadAvatar
                    :multiple="false"
                    v-model:files="form.files">
                </UploadAvatar>
            </a-form-item>
            <a-form-item label="标题">
                <a-input v-model:model-value="form.title" placeholder="请输入标题"></a-input>
            </a-form-item>
            <a-form-item label="简介">
                <a-textarea v-model:model-value="form.content" placeholder="请输入简介"></a-textarea>
            </a-form-item>
            <JumpMethod v-model:form="form" :api="Api.admin.typeArticle"></JumpMethod>
        </a-form>
    </a-modal>
</template>

<style scoped lang="scss">

</style>
