<template>
    <div class="x-editor">
        <a-spin size="small" :spinning="spinning">
            <div class="x-editor__content">
                <tiny-editor v-model="content" v-bind="$attrs" api-key="" :init="opts" :disabled="disabled"
                    :placeholder="placeholder" @init="onInit"></tiny-editor>
            </div>
        </a-spin>
    </div>
</template>

<script setup>
import { Form } from 'ant-design-vue'
import { onMounted, ref, watch } from 'vue'

import TinyEditor from '@tinymce/tinymce-vue'

import { deepMerge } from '@/utils/util'


defineOptions({
    name: 'XEditor',
})
/**
 * @property {string} modelValue v-model
 * @property {object} options 配置
 * @property {number} height 高，默认：300
 * @property {string} placeholder 占位文案
 * @property {boolean} disabled 禁用，默认：false
 */
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    options: {
        type: Object,
        default: () => ({}),
    },
    height: {
        type: Number,
        default: 300,
    },
    placeholder: {
        type: String,
        default: '',
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    uploadHandler: {
        type: Function,
        required: true
    }
})

const emit = defineEmits(['update:modelValue', 'ready'])

const spinning = ref(true)
const content = ref('')
const opts = deepMerge(
    {
        language: 'zh-Hans',
        height: props.height,
        branding: false,
        secretKey: 'gxzhonghai12345678', // 加密密钥
    //   originalString: 'hello, vue!', // 需要加密的字符串
        resize: false,
        promotion: false,
        plugins: 'image', // 添加图片插件
        content_style: `
                * {margin: 0; padding: 0; hyphens: auto;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;}
                body {font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif}
                .mce-content-body {margin: 12px; font-size: 14px;}
            `,
        images_upload_handler: async (blobInfo, progress) => {
            return new Promise(async (resolve, reject) => {
                try {
                    const file = blobInfo.blob();
                    const imageUrl = await props.uploadHandler(file, progress);
                    resolve(imageUrl);
                } catch (error) {
                    reject('上传失败: ' + error.message);
                }
            });
        },
        file_picker_callback: (callback, value, meta) => {
            // 模拟文件选择器
            const input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');

            input.onchange = () => {
                const file = input.files[0];
                callback(URL.createObjectURL(file), { title: file.name });
            };

            input.click();
        }
    },
    props.options
)
const { onFieldChange } = Form.useInjectFormItemContext()

watch(
    () => props.modelValue,
    (val) => {
        if (val === content.value) return
        content.value = val
    }
)
watch(
    () => content.value,
    (val) => {
        emit('update:modelValue', val)
        onFieldChange()
    }
)

onMounted(() => {
    content.value = props.modelValue
    // tinymce.init({})
})

/**
 * 初始化
 * @param e
 */
function onInit(e) {
    spinning.value = false
    emit('ready', e.target)
}

</script>

<style lang="less">
@import './index.less';
</style>

<style lang="less" scoped>
.x-editor {
    &__content {
        min-height: 32px;
    }

    textarea {
        display: none;
    }
}
</style>
