<script setup>
import {reactive} from "vue";
import TinyMCEModal from "../../../../../components/TinyMCE/modal.vue";
import Api from "../../../../../api/index.js";
import {Message} from "@arco-design/web-vue";

const emits = defineEmits(['success']);
const {detail, preview} = defineProps({
    detail: {
        type: Object,
        default: {}
    },
    preview: {
        type: Boolean,
        default: false,
    }
});
const form = reactive({
    title: null,
    content: null,
});

const showModal = async () => {
    if (detail.id) {
        const {data: {content}} = await Api.admin.detailSingle(detail.id);
        detail.content = content;
    }
    Object.assign(form, detail);
}

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

<template>
    <TinyMCEModal
        v-model:content-title="form.title"
        :preview="preview"
        :title="detail?.id ? '编辑' : '新增'"
        v-model:content="form.content"
        v-bind="$attrs"
        @show="showModal"
        @success="success">
        <slot></slot>
    </TinyMCEModal>
</template>

<style scoped lang="scss">

</style>
