<template>
    <p-sub-menu ref="subMenu" :level="level" :parent="parent" placement='right'>
        <template slot="title">
            {{ menuitem.name }}
            <!-- 只有顶级菜单才显示图标 -->
            <i v-if="menuitem.type=='dir' && level === 0" class="el-icon-arrow-right" style="position: absolute;right: 8px;top: 50%;transform: translateY(-50%);font-size: 12px;"></i>
        </template>
        <template v-for="item in menuitem.children">
            <p-menu-item :icon="item.iconClass" v-if="item.isShow && !(item.children && item.children.length)"
                @click="handleOpenFunc(item)" :key="item.resId">{{ item.name }}</p-menu-item>
            <nav-sub-menus :menuitem="item" :level="level + 1" v-if="item.isShow && item.children && item.children.length" :key="item.resId"></nav-sub-menus>
        </template>
    </p-sub-menu>


</template>
<script>
import { PMenu, PSubMenu, PMenuItem } from '../menus'
export default {
    name: 'NavSubMenus',
    inject: ['addTab', 'showTab', 'hideTab', 'hideKyMenus'],
    components: {
        PMenu, PSubMenu, PMenuItem
    },
    props: {
        menuitem: {
            type: Object
        },
        level: {
            type: Number
        },
        parent: {
            type: Object
        }
    },
    methods: {
        async handleOpenFunc(item) {
            let me = this;
            if (item.type == "link") {
                window.open(item.resUrl, item.name);
                return;
            } else if (item.type == "sso") {
                item.ssoUrl = await me.$store.dispatch("user/openSSOFuncPage", {
                    serviceUrl: item.resUrl
                });
            }
            me.addTab(item);//inject 提供的方法只能 传一个参数
            me.$refs.subMenu.hide();
            
            setTimeout(() => {
                me.hideKyMenus && me.hideKyMenus();
            }, 200);

        }
    }
}
</script>