<template>
    <div>
        <div style="border: 1px solid #ccc;">
            <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editor"
                :defaultConfig="toolbarConfig"
                mode="simple"
            />
            <Editor
                style="height: 400px"
                v-model="curHtml"
                :defaultConfig="editorConfig"
                @onChange="onChange"
                @onCreated="onCreated"
                mode="simple"
            />
            <mention-modal
                :list="searchList"
                v-if="isShowModal"
                @hideMentionModal="hideMentionModal"
                @insertMention="insertMention"
            ></mention-modal>
        </div>
        <!-- <div style="margin-top: 10px;">
            <textarea v-model="curHtml" style="width: 100%; height: 500px;"></textarea>
        </div> -->
    </div>
</template>

<script>
import { Boot, DomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import mentionModule from '@wangeditor/plugin-mention'
import MentionModal from './MentionModal'
// 注册插件
Boot.registerModule(mentionModule)

export default {
    name: 'MyEditorWithMention',
    components: { Editor, Toolbar, MentionModal },
    // props: {
    //     templateHtml: {
    //         type: String,
    //         default: ''
    //     }
    // },
    // watch: {
    //     templateHtml(newV, oldV) {
    //         this.curHtml = newV
    //     }
    // },
    data() {
        return {
            editor: null,
            curHtml: '<p style="text-align: center;"><strong>收据名称</strong></p><p style="text-align: center;">单号：@单号</p><p style="text-align: left;">业主：@业主 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;缴费时间：@缴费时间</p><hr/><p>今收到 <u style="text-decoration: underline;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </u> 金额（大写）<u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u></p><p>收款单位（盖章） &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;¥：<u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u></p><hr/><p>开票人：@审核人 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;收款人：@审核人 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;客户：@业主</p>',
            toolbarConfig: {
                excludeKeys: [
                    "italic",
                    "color",
                    "bgColor",
                    "clearStyle",
                    "todo",
                    "insertLink",
                    'group-image',
                    "insertVideo",
                    "codeBlock"
                ]
            },
            editorConfig: {
                placeholder: '请输入内容...',

                EXTEND_CONF: {
                    mentionConfig: {
                        showModal: this.showMentionModal,
                        hideModal: this.hideMentionModal,
                    },
                },
            },
            isShowModal: false,
            searchList: [
                { id: 'a', name: '收据名称' },
                { id: 'b', name: '单号' },
                // { id: 'c', name: '卖方名称' },
                { id: 'd', name: '业主名称' },
                { id: 'e', name: '缴费时间' },
                { id: 'f', name: '审核人' },
                // { id: 'g', name: '乙方法定联系人' },
            ]
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
            // this.$nextTick(()=> {
            //     const toolbar = DomEditor.getToolbar(editor)
            //     const curToolbarConfig = toolbar.getConfig()
            //     console.log( curToolbarConfig.toolbarKeys ) 
            // })
        },
        onChange(editor) {
            this.curHtml = editor.getHtml()
        },
        showMentionModal() {
            this.isShowModal = true
        },
        hideMentionModal() {
            this.isShowModal = false
        },
        insertMention(id, name) {
            const mentionNode = {
                type: 'mention', // 必须是 'mention'
                value: name,
                info: { id },
                children: [{ text: '' }], // 必须有一个空 text 作为 children
            }
            const editor = this.editor
            if (editor) {
                editor.restoreSelection() // 恢复选区
                editor.deleteBackward('character') // 删除 '@'
                editor.insertNode(mentionNode) // 插入 mention
                editor.move(1) // 移动光标
            }
        }
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
    },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
