<template>
    <div>
        <div style="width:100%;height:calc(90vh);" id="jsmind_container" ></div>

        <template v-for="prop in mindOptions.contentMenuData">

            <div :id="'contentMenuMind'+prop.nodeType" style="display: none">
                <ul class="menu">
                    <template v-for="customItem in prop.Menu">
                        <li :id="customItem.id" >
                            <i :class="customItem.icon" :style="customItem.iconStyle"></i>{{customItem.text}}
                            <i class="fa fa-angle-right" style="padding-left: 35px;" v-show="customItem.children.length>0"></i>
                            <ul class="sub-menu" v-show="customItem.children.length>0">
                                <template v-for="childMenu in customItem.children">
                                    <li :id="childMenu.id" ><i :class="childMenu.icon" :style="childMenu.iconStyle"></i>{{childMenu.text}}</li>
                                </template>

                                <!--<li id="importanceNode"><i class="iconfont icon-importance" style="padding-right: 5px;color:#f33d1f;font-size: 18px;"></i>重要</li>-->
                                <!--<li id="middleNode"><i class="iconfont icon-zhong" style="padding-right: 5px;color:#f7c428;font-size: 18px;"></i>中</li>-->
                                <!--<li id="lowNode"><i class="iconfont icon-di" style="padding-right: 5px;color:#fcfce6;font-size: 18px;"></i>低</li>-->
                            </ul>
                        </li>
                    </template>

                    <!--<li :id="'addNode'+prop.nodeType" v-show="!prop.hasOwnProperty('showAddBtn') || prop.showAddBtn==true"><i class="fa fa-plus" style="padding-right: 5px;"></i>新增</li>-->
                    <li :id="'copyNode'+prop.nodeType" class="copyNodeBtn" v-show="!prop.hasOwnProperty('showCopyNodeBtn') || prop.showCopyNodeBtn==true"><i class="fa fa-copy" style="padding-right: 5px;"></i>复制节点</li>
                    <li :id="'copyNodeText'+prop.nodeType" class="copyNodeBtn" v-show="!prop.hasOwnProperty('showCopyTextBtn') ||  prop.showCopyTextBtn==true"><i class="fa fa-copy" style="padding-right: 5px;"></i>复制文本</li>
                    <li :id="'pasteNode'+prop.nodeType" v-show="!prop.hasOwnProperty('showPasteBtn') || prop.showPasteBtn==true"><i class="fa fa-paste" style="padding-right: 5px;"></i>粘贴</li>
                    <li :id="'removeNode'+prop.nodeType" v-show="!prop.hasOwnProperty('showDelBtn') || prop.showDelBtn==true"><i class="fa fa-times" style="padding-right: 5px;"></i>删除</li>
                </ul>
            </div>
        </template>
    </div>

</template>
<style>
    @import "jsmind/style/jsmind.css";
    @import "jsmind/style/contentmenu.css";
</style>
<style scoped>
    /*.rightMenu{*/
        /*position: absolute;*/
        /*z-index: 9999;*/
        /*top: 10px;*/
    /*}*/
    /*.rightMenu ul {*/
        /*min-width: 160px;*/
        /*border: 1px solid rgba(0, 0, 0, .15);*/
        /*border-radius: 4px;*/
        /*background-color: #fff;*/
        /*padding: 5px 0;*/
        /*margin: 2px 0 0;*/
        /*font-size: 14px;*/
        /*text-align: left;*/
        /*list-style: none;*/
    /*}*/
    /*.rightMenu li {*/
        /*list-style-type: none;*/
        /*margin: 0;*/
        /*padding: 2px 5px 0 0px;*/
        /*position: relative;*/
        /*line-height: 1;*/
    /*}*/

    /*.rightMenu li a {*/
        /*display: block;*/
        /*padding: 3px 20px;*/
        /*clear: both;*/
        /*font-weight: normal;*/
        /*line-height: 22px;*/
        /*color: #333;*/
        /*white-space: nowrap;*/
        /*text-decoration: none;*/
    /*}*/
    /*.rightMenu li:hover{*/
        /*background-color: #f5f5f5;*/
        /*cursor: pointer;*/
    /*}*/
    /*.rightMenu li i {*/
        /*margin-right: 5px;*/
    /*}*/
    #contentMenu{
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #e8e8e8;
        width: 100px;

    }

    #contentMenu .menu{
        padding-left: 0px;
        margin-bottom: 0px;
    }
    #contentMenu .menu li{
        padding-left: 10px;
        line-height: 32px;
        list-style: none;

    }
    #contentMenu .menu li:hover{
        background-color: #00A7CB;
        color: #ffffff;
    }
    .contentMenu .sub-menu{
        position: absolute;
        left:110px;
        top:0
    }

    #jqContextMenu ul,#jqContextMenu li{
        padding: 0;
        margin: 0;
        list-style: none;

    }
    #jqContextMenu .sub-menu{
        position: absolute;
        top:0;
        left:148px;
        display: none;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #e8e8e8;
        width: 150px;
        font-size:10px;
    }
    #jqContextMenu .sub-menu li{
        padding-left: 10px;
        line-height: 26px;
    }
    #jqContextMenu ul.menu>li:hover .sub-menu{
        display: block;
    }
    #jqContextMenu .sub-menu li:hover{
        background-color: #00A7CB;
        border: none;
    }
</style>
<script>
    import contentmenu from './jsmind/js/jquery.contextmenu.r2'
    import jsMind from './jsmind/js/jsmind'
    import jsMindDraggable from './jsmind/js/jsmind.draggable'

    export default {
        data(){

            return {
                copyNode:[],
                jsMind:jsMind
            }
        },
        props: {
            mindOptions:{
                type: Object
            },
            mindData:{
                type: Object
            }
        },
        watch:{
            mindData:function () {
                this.$_initMindData()
            }
        },
        mounted(){
            var that = this
            var methodList=['beforeNodeEdit','afterNodeEdit','beforeCreateNodeElement','afterCreateNodeElement',
                'resetNodeCustomStyle','nodeEditorEnable','nodeMoveEnable']
            this.mindOptions = $.extend(true, {}, this.getDefaults(), this.mindOptions);

            methodList.forEach(item=>{
                var key = item
                var innderKey = "inner"+ key
                if(this.mindOptions[key])this.mindOptions[innderKey] = function (a,b,c,d,e) {
                    return that.$parent[key].call(that.$parent,a,b,c,d,e)
                }
            })
            this.mindOptions.shortcut = {
                mapping:{
                    copy: jsMind.key.ctrl + 67,
                    paste:jsMind.key.ctrl + 86,
                    delnode    : 46, // Delete
                },
                handles:{
                    copy:that.$_copyNode,
                    paste:that.$_pasteNode,
                    delnode:that.$_removeNode
                }
            }

            this.jm = new jsMind(this.mindOptions);

            this.$_initMindData();


        },
        methods:{
            $_initMindData:function () {

                var mind={
                    /* 元数据，定义思维导图的名称、作者、版本等信息 */
                    "meta":{
                        "name":"jsMind-TestCase",
                        "author":"hizzgdev@163.com",
                        "version":"0.1"
                    },
                    /* 数据格式声明 */
                    "format":"node_tree",
                    /* 数据内容 */
                    "data":this.mindData
                }

                this.jm.show(mind)

                if(this.mindOptions.hasContentMenu==true){

                    this.$nextTick(()=>{
                        //组装右键菜单事件
                        this.$_bindContextMenu()
                    })
                }
            },
            $_deepClone:function (source) {
                const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
                for(let keys in source){ // 遍历目标
                    if(source.hasOwnProperty(keys) && (keys!='parent' && keys!='LastModifyTime')){
                        if(source[keys] && typeof source[keys] === 'object'){ // 如果值是对象，就递归一下
                            targetObj[keys] = source[keys].constructor === Array ? [] : {};
                            targetObj[keys] = this.$_deepClone(source[keys]);
                        }else{ // 如果不是，就直接赋值
                            targetObj[keys] = source[keys];
                        }
                    }
                }
                return targetObj;

            },
            $_bindContextMenu:function () {

                var that = this
                for(let prop in this.mindOptions.contentMenuData){
                    var menuData = this.mindOptions.contentMenuData[prop]
                    var menuStyle={
                            border: '1px solid #ccc',
                            borderRadius: '3px',
                            backgroundColor: '#e8e8e8',
                            width: '150px',
                            fontSize: '12px'
                        }
                    var itemStyle = {
                            paddingLeft: '10px',
                            lineHeight: '28px',
                            border: 'none',

                        }
                    var itemHoverStyle =  {
                            backgroundColor: '#00A7CB',
                            color: '#ffffff',
                            border: 'none'
                        }

                    if(menuData.hasOwnProperty("initStyle")){
                        var initStyle = menuData.initStyle
                        if(initStyle.hasOwnProperty("menuStyle")){
                            menuStyle = initStyle.menuStyle
                        }
                        if(initStyle.hasOwnProperty("itemStyle")){
                            itemStyle = initStyle.itemStyle
                        }
                        if(initStyle.hasOwnProperty("itemHoverStyle")){
                            itemHoverStyle = initStyle.itemHoverStyle
                        }

                    }

                    var keyaddNode = 'addNode'+ menuData.nodeType
                    var keycopyNode = 'copyNode' + menuData.nodeType
                    var keycopyNodeText = 'copyNodeText' + menuData.nodeType
                    var keypasteNode = 'pasteNode' + menuData.nodeType
                    var keyremoveNode = 'removeNode' + menuData.nodeType


                    var outerBindings = {}
                    outerBindings[keyaddNode] = that.$_addNode
                    outerBindings[keycopyNode] = that.$_copyNode
                    outerBindings[keycopyNodeText] = that.$_copyNodeText
                    outerBindings[keypasteNode] = that.$_pasteNode
                    outerBindings[keyremoveNode] = that.$_removeNode

                    //追加客户化菜单
                    if(menuData.Menu && menuData.Menu.length > 0){
                        for(var index in menuData.Menu){
                            var sunMenu = menuData.Menu[index]

                            if(sunMenu.callBackName){
                                var callName = sunMenu.callBackName
                                outerBindings[sunMenu.id] = function(callName){
                                   return function (t) {
                                       that.$parent[callName].call(that.$parent,that.jm,t)
                                   }
                                }(callName)

                            }


                            for(var index1 in sunMenu.children){
                                var child = sunMenu.children[index1]
                                if(child.callBackName){
                                    var callName = child.callBackName
                                    outerBindings[child.id]= function (callName) {
                                        return function (t) {
                                            that.$parent[callName].call(that.$parent,that.jm,t)
                                        }

                                    }(callName)
                                }

                            }
                        }

                    }

                    var contentMenuMindKey = 'contentMenuMind'+menuData.nodeType

                    $("jmnode[nodeType="+menuData.nodeType+"]").contextMenu(contentMenuMindKey,{

                        //菜单样式
                        menuStyle: menuStyle,
                        //菜单项样式
                        itemStyle: itemStyle,
                        //菜单项鼠标放在上面样式
                        itemHoverStyle: itemHoverStyle,
                        bindings:outerBindings,
                        onContextMenu:function(e) {

                            var el = e.currentTarget;
                            if(el.tagName.toLowerCase() == 'jmnode'){
                                var nodeid = el.getAttribute("nodeid")
                                that.jm.select_node(nodeid,false,e)
                            }

                            return true;
                        }
                    })
                }

            },
            $_addNode:function () {
                var that = this
                var selNode = that.jm.get_selected_node();
                //添加一个节点
                if(!selNode){

                    return NotifyWarning("请选择节点");
                }

                var nodeid = jsMind.util.uuid.getid();
                var topic = '未定义';
                var data = {'nodeType':'TestGroup',IsModify:true}
                that.jm.add_node(selNode, nodeid, topic);
                that.jm.begin_edit(nodeid);
                that.$_bindContextMenu()
            },
            $_copyNode:function (e) {

                var that = this
                that.copyNode = []
                //获取所有的选中的节点
                var selNodes = that.jm.get_selected_node_list();
                if(selNodes.length==0){
                    return NotifyWarning("请选择节点");
                }

                selNodes.forEach((selNode)=>{
                    that.copyNode.push(that.$_deepClone(selNode))
                })

                that.jm.set_selected_node_list([]);
                that.jm.set_copy_flag(true)

            },
            $_copyNodeText:function () {
                var selNodes = this.jm.get_selected_node_list();
                if(selNodes.length==0){
                    return NotifyWarning("请选择节点");
                }
                if(selNodes.length!=1){
                    return NotifyWarning("只能复制一个节点的内容");
                }

                var topic = jsMind.util.htmlDecodeByRegExp(selNodes[0].topic);


                window.setClipboardData(topic)
            },
            $_pasteNode:function () {
                var that = this
                var selNode = that.jm.get_selected_node();
                var nodeList = that.jm.get_selected_node_list()
                //添加一个节点
                if(that.jm.get_copy_flag()==false){
                    NotifyWarning("请先复制节点");
                    return ;
                }

                //黏贴前的check
                var ret = true
                if(this.mindOptions.hasOwnProperty("beforePasteNode")){
                    ret = this.$parent["beforePasteNode"].call(this.$parent,nodeList)
                }
                if(!ret)return;


                function renderChildren(nodeid,children) {

                    var pNode = that.jm.mind.get_node(nodeid);
                    for(let i=0;i<children.length;i++){
                        var childNode = children[i]
                        var newNodeId = jsMind.util.uuid.getid()
                        that.jm.add_node(pNode, newNodeId, childNode.topic,childNode.data);
                        if(!childNode.children || childNode.children.length==0)continue
                        renderChildren(newNodeId,childNode.children);

                    }
                }

                that.copyNode.forEach(node=>{
                    var nodeid = jsMind.util.uuid.getid();
                    that.jm.add_node(selNode, nodeid, node.topic,node.data);
                    //this.jm.begin_edit(nodeid);

                    if(node.children){
                        var pNode = that.jm.mind.get_node(nodeid);
                        if(node.children){
                            renderChildren(nodeid,node.children)
                        }

//                        for(let i=0;i<node.children.length;i++){
//                            var childNode = node.children[i]
//                            that.jm.add_node(pNode, jsMind.util.uuid.getid(), childNode.topic,childNode.data);
//                        }
                    }

                })
                that.$_bindContextMenu()
                that.jm.select_clear();
                that.jm.set_copy_flag(false)
            },
            $_removeNode:function () {
                var that = this
                //var selNode = that.jm.get_selected_node();
                var nodeList = that.jm.get_selected_node_list()
                //添加一个节点
                if(nodeList.length==0){
                    NotifyWarning("请选择节点");
                    return ;
                }

                var ret = true
                if(this.mindOptions.hasOwnProperty("beforeDelNodeElement")){
                    ret = this.$parent["beforeDelNodeElement"].call(this.$parent,nodeList)
                }
                if(!ret)return;

                nodeList.forEach(node=>{
                    that.jm.remove_node(node);
                })
            },
            $_closeMenucontext:function () {
                this.menuContextShow=false
                document.removeEventListener('click', this.$_closeMenucontext)
            },
            emitEvent:function (callBackName) {
                var selNode =this.jm.get_selected_node()
                this.$parent[callBackName].call(this.$parent,selNode)
            },
            getDefaults:function () {
                return {
                    container:'jsmind_container',
                    editable:true,
                    theme:'greensea',
                    mode:'side',
                    support_html:true,
                    view: {
                        engine: 'svg',
                        hmargin: 100,
                        vmargin: 50,
                        line_width: 2,
                        line_color: '#555'
                    }
                }
            }
        }
    }
</script>

<style>
    .jsmind-inner::-webkit-scrollbar{
        width:2px;
        height:2px;

        /**/
    }
    .jsmind-inner::-webkit-scrollbar-track{
        /*background: rgb(239, 239, 239);*/
        /*border-radius:2px;*/
        background: none;
    }
    .jsmind-inner::-webkit-scrollbar-thumb{
        /*background: #bfbfbf;*/
        /*border-radius:10px;*/
        background: none;
    }
    /*.jsmind-inner::-webkit-scrollbar-thumb:hover{*/
    /*background: #333;*/
    /*}*/
    .jsmind-inner::-webkit-scrollbar-corner{
        /*background: #c1c1c1;*/
        background: none;
    }
    #jqContextMenu .sub-menu{
        position: absolute;
        top:0;
        left:148px;
        display: none;
        border: 1px solid #ccc;
        border-radius: 3px;
        background-color: #e8e8e8;
        width: 150px;
        font-size:10px;
    }
    #jqContextMenu .sub-menu li{
        padding-left: 10px;
        line-height: 26px;
    }
    #jqContextMenu ul.menu>li:hover .sub-menu{
        display: block;
    }
    #jqContextMenu .sub-menu li:hover{
        background-color: #00A7CB;
        border: none;
    }
</style>