<template>
    <li @click.stop="toggleMenu()" :class="[navListItemClass()]"
        :data-toggle="[node.hasChild ? 'dropdown' : '']">

        <template v-if="!node.hasChild">
            <router-link 
              v-if="node.linkTo" 
              @click.stop.native="changeActiveMenu(node.id)" 
              :to="{ path: node.linkTo, query:getQueryOption()}">
              <!--自定义菜单模板-->
              <component v-if="node.componentName" :icon-click-handler="iconClickHandler" :is="node.componentName" :node="node" ></component>
              <template v-else>
                {{node.name}}
              </template>
            </router-link>
            <a v-else-if="isHref" @click.stop.prevent="changeActiveMenu(node.id)"
               href='javascript:void(0);'>{{node.name}}</a>
            <component v-else-if="node.componentName" :icon-click-handler="iconClickHandler" :is="node.componentName" :node="node" ></component>

            <a v-else href='javascript:void(0);'>{{node.name}}</a>

        </template>

        <template v-if="node.hasChild">
            <!--自定义菜单模板-->
            <component v-if="node.componentName" :is="node.componentName" :node="node" :icon-click-handler="iconClickHandler" ></component>
            <a v-else href="javascript:void(0);">{{node.name}}</a>
            <ul role="menu" :style="{'display':isExpand ?'block':''}">
                <v-menu-node
                        v-for="node in node.childNode"
                        :style="{'textIndent':`${getMenuItemIndent(node)}px`}"
                        :node="node"
                        :data-maps="dataMaps"
                        @change-active-menu="changeActiveMenu"
                        :isHref="node.isHref"
                        :key="node.id"
                        :isClickReload="isClickReload"
                        :icon-click-handler="iconClickHandler"
                >
                </v-menu-node>
            </ul>

        </template>

    </li>
</template>

<script>

    import deepClone from '../../../../src/utils/deepClone.js'

    export default{
        name: 'v-menu-node',
        props: {
            node: {
                default(){
                    return {}
                }
            },

            // 数据映射
            dataMaps: {
                default(){
                    return {}
                }
            },

            isClickReload: [Boolean],

            // 是否是跳转链接
            isHref:[Boolean],

            // 图标点击回调
            iconClickHandler:Function
        },
        data(){
            return {
                // 是否展开
                isExpand: false,
                //缩进宽度
                indentWidth:15
            }
        },
        methods: {
            // 当前菜单的样式
            navListItemClass(){

                let result = {

                    'active':this.$route.path === this.node.linkTo,
                    'show':this.isExpand,
                    'nav-item-single':this.node.isLeaf && !this.node.hasChild
                }

                return result;
            },

            toggleMenu(){
                this.isExpand = !this.isExpand;
            },

            // 改变选中菜单
            changeActiveMenu(key){
                this.$emit('change-active-menu', key);
            },

            // 设置节点打开
            setExpand(){

                if (this.node.hasChild && this.dataMaps[this.node.id].isExpand) {
                    this.isExpand = true;
                }
            },

            // 拼接查询参数
            getQueryOption(){

                var query = deepClone(this.$route.query);

                if (query && this.isClickReload) {

                    query.t = (new Date()).getTime();
                }

                return query;
            },
            //获取菜单项(子级结点)的缩进
            getMenuItemIndent(node){

              let level=node.level;

              if(node.hasChild){
                  level++;
              }

              //获取当前节点的级别
              return level*this.indentWidth+15;
            }
        },
        mounted(){
            this.isExpand=this.node.isExpand;
        },

        watch: {
            "node": function (val) {

            },

            dataMaps: function (val) {
                this.setExpand();
            }
        }
    }
</script>