<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
        <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="handleChange"
            @onDestroyed="handleDestroyed"
            @onFocus="handleFocus"
            @onBlur="handleBlur"
            @customAlert="customAlert"
            @customPaste="customPaste"
        />
    </div>
</template>
<script setup>
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { upload } from '@/api/common/index';

const props = defineProps({
    html: {
        required: true,
        type: String,
        default: '',
    },
});

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef();

// 内容 HTML
const valueHtml = ref('');
const mode = ref('default');

watch(
    () => props.html,
    (val) => {
        valueHtml.value = val;
    },
    {
        immediate: true,
        deep: true,
    },
);
// 模拟 ajax 异步获取内容
onMounted(() => {});

const toolbarConfig = {
    excludeKeys: ['insertLink', 'viewImageLink', 'insertVideo', 'uploadVideo', 'emotion', 'fullScreen', 'codeBlock', 'todo'],
};
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {
        uploadImage: {
            async customUpload(file, insertFn) {
                const formData = new FormData(); // 组建formData参数
                formData.append('file', file); // 将图片文件添加formData参数中
                upload(formData)
                    .then((ret) => {
                        insertFn(ret.data.src, ret.data.src, '');
                    })
                    .catch(() => {
                        target.value = '';
                    });
            },
        },
    },
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});
const handleCreated = (editor) => {
    editorRef.value = editor; // 记录 editor 实例，重要！
};
const emits = defineEmits();
const handleChange = (editor) => {
    emits('update:html', valueHtml.value);
};
const handleFocus = (editor) => {
    // console.log('focus', editor);
};
const handleBlur = (editor) => {
    // console.log('blur', editor);
    // console.log(valueHtml.value);
};
const customAlert = (info, type) => {
    // alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
    const html = event.clipboardData.getData('text/html'); // 获取粘贴的 html
    editor.dangerouslyInsertHtml(html); // 显示编译后的html
    event.preventDefault();
    callback(false);
};

const handleDestroyed = (editor) => {
    // console.log('destroyed', editor);
};
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});
</script>
<style lang="less" scoped>
.w-e-modal button {
    line-height: 30px !important;
}
.group-video {
    display: none !important;
}
</style>
