<script setup>
import {ref, watch} from "vue";
import TinyMCE from './index.vue';

const {title, preview} = defineProps({
    title: {
        type: String,
        default: ''
    },
    preview: {
        type: Boolean,
        default: false,
    }
});
const emits = defineEmits(['success', 'show']);
const content = defineModel('content');
const contentTitle = defineModel('contentTitle');
const inputRef = ref();
const visible = ref(false);
const fullscreen = ref(false);

watch(
    () => visible.value,
    (val) => {
        if (val) emits('show');
    }
)
const success = async () => {
    emits('success');
}

const clickInput = () => {
    inputRef.value.focus();
}
</script>

<template>
    <a-link v-if="!$slots.default" :hoverable="false" @click="visible=true">编辑</a-link>
    <div v-else @click="visible=true">
        <slot></slot>
    </div>

    <a-modal
        @ok="success"
        id="TinyMCEModal"
        :mask-closable="false"
        :unmount-on-close="true"
        :fullscreen="fullscreen"
        width="800px"
        :draggable="true"
        title-align="start"
        v-bind="$attrs"
        v-model:visible="visible">
        <template #title>
            <div class="flex justify-between w-full pr-[30px]">
                <div>
                    {{ title }}
                </div>
                <div>
                    <a-input v-if="!preview" ref="inputRef" @click="clickInput"
                             v-model:model-value="contentTitle"></a-input>
                    <div v-else>{{ contentTitle }}</div>
                </div>
                <a-link @click="fullscreen = !fullscreen">
                    <icon-fullscreen v-if="!fullscreen"/>
                    <icon-fullscreen-exit v-else/>
                </a-link>
            </div>
        </template>
        <TinyMCE
            v-if="!preview"
            v-model:content="content"
            :skin="fullscreen ? 'fluent' : 'borderless'">
        </TinyMCE>
        <div v-else v-html="content" class="p-[24px]"></div>
    </a-modal>
</template>

<style scoped lang="scss">
</style>

<style lang="scss">
#TinyMCEModal {
    .arco-modal-body {
        @apply p-0 h-full min-h-[500px];
    }
}
</style>
