<template>
    <nav class="v-nav-menu__h3">
        <div class="submenu v-nav-menu__scroll">
            <slot></slot>
            <ul class="nav-list">
                <v-menu-node
                        v-for="node in internalNodeList"
                        :node="node"
                        :data-maps="internalDataMap"
                        @change-active-menu="changeActiveMenu"
                        :isHref="node.isHref"
                        :key="node.id"
                        :isClickReload="isClickReload"
                        :icon-click-handler="iconClickHandler"
                >
                </v-menu-node>
            </ul>
        </div>
    </nav>
</template>

<script>
    import vMenuNode from './v-menu-node.vue';

    export default{
        name: 'v-menu',
        components: {
            vMenuNode
        },
        props: {
            nodeList: {
                require: true,
                type: Array
            },

            defaultExpandedKeys: {
                type: Array,
                default: function () {
                    return []
                }
            },

            isExpandAll: {
                type: Boolean
            },

            // 当前选中的菜单
            activeMenuKey: [String, Number],

            // true 将会触发 路由改变事件
            isClickReload:[Boolean],

            // 收藏、取消收藏回调
            iconClickHandler:Function
        },
        data(){
            return {
                internalNodeList: [],

                // 数据映射
                dataMaps: {},

                internalDataMap: {},


                // 当前选中的key
                internalActiveMenuKey: this.activeMenuKey
            }
        },
        methods: {
            // 数据初始化
            nodeListInit(nodeList){

                this.internalNodeList=nodeList;

                this.setInternalNodeList(this.internalNodeList, true,0);

            },

            // 内部数据初始化（递归）
            setInternalNodeList(nodes, isLeaf,level){

                var self = this;

                var nodes2 = isLeaf ? nodes : nodes.childNode;

                nodes2.map((item, index) => {

                    item.hasChild = false;

                    item.level=level;

                    item.isLeaf = isLeaf ? isLeaf : false;

                    if (!isLeaf) item.parentId = nodes.id;

                    if (Array.isArray(item.childNode) && item.childNode.length > 0) {
                        
                        item.hasChild = true;

                        let nextLevel= level+1;

                        self.setInternalNodeList(item,undefined,nextLevel);
                    }

                    self.setDataMap(item);
                })
            },

            // 给 dataMap 赋值（子节点不复制）
            setDataMap(item){
                var entity = {};
                for (var attr in item) {
                    if (attr === "childNode") {
                        continue;
                    }
                    entity[attr] = item[attr];
                }

                this.dataMaps[item.id] = entity;
            },


            expands(){
                if (this.isExpandAll) {

                    this.expandAll();
                } else {
                    this.setExpandedNode();
                }

                this.internalDataMap = this.dataMaps;
            },

            // 设置要打开节点
            setExpandedNode(){
                var self = this;
                if (Array.isArray(self.defaultExpandedKeys) && self.defaultExpandedKeys.length > 0) {
                    self.defaultExpandedKeys.forEach(key => {
                        self.expandByKey(key);
                    })
                }
            },

            // 展开全部
            expandAll(){
                if (this.dataMaps) {

                    for (var item in this.dataMaps) {
                        this.dataMaps[item].isExpand = true;
                    }

                }
            },

            // 设置当前key对应的所有父级节点为打开状态
            expandByKey(key){
                var self = this;

                if (self.dataMaps[key]) {
                    self.dataMaps[key].isExpand = true;

                    if (!self.dataMaps[key].isLeaf) {
                        self.expandByKey(self.dataMaps[key].parentId)
                    }
                }
            },
            // 改变选中菜单
            changeActiveMenu(key){

                this.internalActiveMenuKey = key;

                let currentNode = this.dataMaps[key];

                this.$emit('change-active-menu', currentNode);
            },

            // 对外提供的方法
            getCurrentNodeByKey(key){

                return this.internalDataMap[key];
            }
        },

        created(){

            // 数据初始化
            this.nodeListInit(this.nodeList);

        },

        watch: {
            'nodeList': function (newVal) {
                this.nodeListInit(newVal);
            }
        }
    }
</script>