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

        <template v-if="!node.hasChild">
            <router-link v-if="node.linkTo && !isHref" @click.stop.native="changeActiveMenu(node.id)"
                         :to="{ path: node.linkTo, query:getQueryOption()}">{{node.name}}
                <i v-if="favorite" @click.stop.prevent="favoriteClickHandler()" :class='[isFavorite()?"v-nav-menu-favorite":""]'></i>
            </router-link>
            <a v-if="isHref" @click.stop.prevent="changeActiveMenu(node.id)"
               href='javascript:void(0);'>{{node.name}}
                <i v-if="favorite" @click.stop.prevent="favoriteClickHandler()" :class='[isFavorite()?"v-nav-menu-favorite":""]'></i></a>
        </template>

        <template v-if="node.hasChild">
            <a href="javascript:void(0);">{{node.name}}</a>
            <ul role="menu" :style="isExpand ? 'display: block':''">
                <tree-node
                        v-for="node in node.childNode"
                        :node="node"
                        :data-maps="dataMaps"
                        :active-menu-key="activeMenuKey"
                        @change-active-menu="changeActiveMenu"
                        :isHref="node.isHref"
                        :key="node.id"
                        :isClickReload="isClickReload"
                        :favorite="favorite"
                        :favorite-list="favoriteList"
                        :favorite-click="favoriteClick"
                >
                </tree-node>
            </ul>

        </template>

    </li>
</template>

<script>

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

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

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

            activeMenuKey: [String, Number],

            isClickReload: [Boolean],

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

            // 收藏功能
            favorite:{
                type:Boolean,
                default:false
            },

            // 已收藏的列表（存储的是菜单id）
            favoriteList:[Array],

            // 收藏、取消收藏回调
            favoriteClick:Function
        },
        data(){
            return {
                // 是否展开
                isExpand: false,

            }
        },
        methods: {
            // 当前菜单的样式
            navListItemClass(){

                let result = {

                    'active':this.activeMenuKey === this.node.id,
                    '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;
            },

            // 是否此菜单已收藏
            isFavorite(){

                if (Array.isArray(this.favoriteList) && this.favoriteList.length > 0){

                    if (this.favoriteList.indexOf(this.node.id) > -1){

                        return true;
                    }
                }

                return false;
            },

            // 收藏功能回调
            favoriteClickHandler(){

                this.favoriteClick && this.favoriteClick(this.node);

            }
        },

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

            },

            dataMaps: function (val) {

                this.setExpand();
            }
        }
    }
</script>