<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="padding-bottom:10px;border-bottom:1px solid red;"> &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>',
            curHtml: '<h3 style="text-align: center;"><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="收据名称" data-info="%7B%22id%22%3A%22a%22%7D">@收据名称</span></h3><p style="text-align: center;">单号：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="单号" data-info="%7B%22id%22%3A%22b%22%7D">@单号</span></p><p style="text-align: left;">业主：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="业主名称" data-info="%7B%22id%22%3A%22c%22%7D">@业主名称</span> &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;缴费时间：<span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="缴费时间" data-info="%7B%22id%22%3A%22d%22%7D">@缴费时间</span></p><hr/><p style="line-height: 2.5;">今收到 <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; &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;</u><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="大写金额" data-info="%7B%22id%22%3A%22e%22%7D">@大写金额</span><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;</u></p><p style="line-height: 2.5;">收款单位（盖章） &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;</u><span data-w-e-type="mention" data-w-e-is-void="" data-w-e-is-inline="" data-value="小写金额" data-info="%7B%22id%22%3A%22f%22%7D">@小写金额</span><u> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</u></p><hr/><p>开票人：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="审核人" data-info="%7B%22id%22%3A%22g%22%7D">@审核人</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 收款人：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="审核人" data-info="%7B%22id%22%3A%22g%22%7D">@审核人</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;客户：<span data-w-e-type="mention" data-w-e-is-void data-w-e-is-inline data-value="业主名称" data-info="%7B%22id%22%3A%22c%22%7D">@业主名称</span></p>',
            toolbarConfig: {
                insertKeys: {
                    index: 13, // 插入的位置，基于当前的 toolbarKeys
                    keys: ["fontSize", "lineHeight"]
                },
                excludeKeys: [
                    "blockquote",
                    // "italic",
                    // "color",
                    // "bgColor",
                    // "clearStyle",
                    "todo",
                    "insertLink",
                    'group-image',
                    "insertVideo",
                    "codeBlock",
                    // "undo",
                    "fullScreen"
                ]
            },
            editorConfig: {
                placeholder: '请输入内容...',

                EXTEND_CONF: {
                    mentionConfig: {
                        showModal: this.showMentionModal,
                        hideModal: this.hideMentionModal,
                    },
                },
            },
            isShowModal: false,
            searchList: [
                // { id: 'a', name: '收据名称' },
                // { id: 'b', name: '单号' },
                // { id: 'd', name: '业主名称' },
                // { id: 'e', name: '缴费时间' },
                // { id: 'f', name: '审核人' },
                { 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()
            //     const allToolbarConfig = editor.getAllMenuKeys()
            //     console.log( curToolbarConfig.toolbarKeys ) 
            //     console.log( allToolbarConfig ) 
            // })
        },
        onChange(editor) {
            this.curHtml = editor.getHtml()
        },
        showMentionModal(editor) {
            const containerRect = editor.getEditableContainer().getBoundingClientRect()
            console.log(containerRect)
            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>
