<template>
    <div>
        <script :id="id" type="text/plain"></script>
    </div>
</template>
<script>
export default {
    name: 'UE',
    data () {
        return {
            editor: null,
            configObj: {
                initialFrameHeight: 400,
                initialFrameWidth: 800,
                toolbars: [[
                    'source', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'blockquote', '|',
                    'forecolor', 'backcolor', '|', 'horizontal', 'spechars', 'background', '|', 'paragraph', 'fontfamily', 'fontsize', '|', 'insertorderedlist', 'insertunorderedlist',
                    'rowspacingtop', 'rowspacingbottom', 'lineheight', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', '|',
                    /* 'simpleupload', */ 'insertimage', 'insertvideo', 'attachment', '|', 'inserttable', 'deletetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'preview', 'wordimage'
                ]]
                /* 工具栏对应翻译，不要直接删去，而是选择注释掉方便日后维护
                toolbars: [[
                    'fullscreen(全屏)', 'source(源代码)', '|', 'undo(撤销)', 'redo(重做)', '|',
                    'bold(加粗)', 'italic(斜体)', 'underline(下划线)', 'fontborder(字符边框)', 'strikethrough(删除线)', 'superscript(上标)', 'subscript(下标)', 'removeformat(清除格式)', 'formatmatch(格式刷)', 'autotypeset(自动排版)', 'blockquote(引用)', 'pasteplain(纯文本粘贴模式)', '|', 'forecolor(字体颜色)', 'backcolor(背景色)', 'insertorderedlist(有序列表)', 'insertunorderedlist(无序列表)', 'selectall(全选)', 'cleardoc(清空文档)', '|',
                    'rowspacingtop()', 'rowspacingbottom()', 'lineheight()', '|',
                    'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
                    'directionalityltr', 'directionalityrtl', 'indent', '|',
                    'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
                    'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
                    'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
                    'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
                    'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
                    'print', 'preview', 'searchreplace', 'drafts', 'help'
                ]]
                */
            }
        }
    },
    props: {
        id: { // 唯一识别码，必须
            type: String,
            required: true
        },
        defaultMsg: { // 初始化内容
            type: String,
            default: ''
        },
        config: { // ue配置对象，如有需要可以提供由父组件传入
            type: Object
        }
    },
    watch: {
        defaultMsg: function (newText) { // 有可能数据是异步获得晚于 ueditor ready，避免导致初始化失败
            console.log(newText)
            if (this.editor && this.editor.isReady) { // 确保 ueditor 已初始化完毕
                var newContent = this.editor.getContent()
                if (newText !== newContent) {
                    this.editor.setContent(newText)
                }
            }
        }
    },
    mounted () {
        var that = this
        function extend (to, _from) {
            for (var key in _from) {
                if (_from.hasOwnProperty(key)) {
                    to[key] = _from[key]
                }
            }
            return to
        }
        this.$nextTick(() => {
        // 简单扩展配置
            extend(this.configObj, this.config || {})
            // 初始化UE
            this.editor = window.UE.getEditor(this.id, this.configObj)
            this.editor.addListener('ready', function () {
            // 初始化内容
                that.defaultMsg && that.editor.setContent(that.defaultMsg)
            })
            // 内容改变及时更新父组件
            this.editor.addListener('contentChange', function () {
                var newContent = that.editor.getContent()
                if (that.defaultMsg !== newContent) {
                    that.$emit('contentChanged', newContent)
                }
            })
        })
    },
    beforeDestroy () {
        if (this.editor !== null && this.editor.destroy) {
            this.editor.destroy()
            // window.UE.delEditor(this.id)
        }
    }
    // destroyed () {
    //     this.editor.destroy()
    // }
}
</script>
