<!-- 分栏布局下，次级菜单栏 -->
<template>
    <div>
        <el-scrollbar class="nav-sub-menu-box">
            <!-- logo部分 -->
            <div class="nav-left-top" :title="settingStore.title" @click="appStore.showHome()">
                <span class="admin-title">{{ settingStore.title }} 后台</span>
            </div>
            <!-- 分割线 -->
            <div>
                <el-divider class="nav-smb-divider">
                    <span v-if="layoutColumnStore.activeTopMenu">{{ layoutColumnStore.activeTopMenu.title }}</span>
                    <span v-else>选择菜单</span>
                </el-divider>
            </div>
            <!-- 次级菜单部分 -->
            <transition name="left-jump-right">
                <div v-if="appStore.navCmbRightShow" class="nav-cmb-right-menu-box">
                    <el-menu
                        :unique-opened="true"
                        :default-active="appStore.activeMenuId"
                        @select="selectMenu"
                        v-if="layoutColumnStore.activeTopMenu"
                    >
                        <template v-for="(menu) in layoutColumnStore.activeTopMenu.children">
                            <!-- 1 如果是子菜单 -->
                            <el-menu-item v-if="menuIsShow(menu) && !menuIsDir(menu)" :index="menu.id" :key="menu.id">
                                <svg-icon class="menu-i" :name="menu.icon" :title="menu.title"></svg-icon>
                                <span class="menu-name">{{ menu.title }}</span>
                            </el-menu-item>
                            <!-- 1 如果是父菜单 -->
                            <el-sub-menu v-if="menuIsShow(menu) && menuIsDir(menu)" :index="menu.id" :key="menu.id">
                                <template #title>
                                    <svg-icon class="menu-i" :name="menu.icon" :title="menu.title"></svg-icon>
                                    <span class="menu-name">{{ menu.title }}</span>
                                </template>
                                <!-- 遍历其子项 -->
                                <template v-for="(menu2) in menu.children">
                                    <!-- 2 如果是子菜单 -->
                                    <el-menu-item v-if="menuIsShow(menu2) && !menuIsDir(menu2)" :index="menu2.id" :key="menu2.id">
                                        <svg-icon class="menu-i" :name="menu2.icon" :title="menu2.title"></svg-icon>
                                        <span class="menu-name">{{ menu2.title }}</span>
                                    </el-menu-item>
                                    <!-- 2 如果是父菜单 -->
                                    <el-sub-menu v-if="menuIsShow(menu2) && menuIsDir(menu2)" :index="menu2.id" :key="menu2.id">
                                        <template #title>
                                            <svg-icon class="menu-i" :name="menu2.icon" :title="menu2.title"></svg-icon>
                                            <span class="menu-name">{{ menu2.title }}</span>
                                        </template>
                                        <!-- 遍历其子项 -->
                                        <template v-for="(menu3) in menu2.children">
                                            <!-- 3 如果是子菜单 -->
                                            <el-menu-item v-if="menuIsShow(menu3) && !menuIsDir(menu3)" :index="menu3.id" :key="menu3.id">
                                                <svg-icon class="menu-i" :name="menu3.icon" :title="menu3.title"></svg-icon>
                                                <span class="menu-name">{{ menu3.title }}</span>
                                            </el-menu-item>
                                            <!-- 3 如果是父菜单 -->
                                            <el-sub-menu v-if="menuIsShow(menu3) && menuIsDir(menu3)" :index="menu3.id" :key="menu3.id">
                                                <template #title>
                                                    <svg-icon class="menu-i" :name="menu3.icon" :title="menu3.title"></svg-icon>
                                                    <span class="menu-name">{{ menu3.title }}</span>
                                                </template>
                                                <!-- 4 -->
                                                <template v-for="(menu4) in menu3.children">
                                                    <el-menu-item v-if="menuIsShow(menu4)" :index="menu4.id" :key="menu4.id">
                                                        <svg-icon class="menu-i" :name="menu4.icon" :title="menu4.title"></svg-icon>
                                                        <span class="menu-name">{{ menu4.title }}</span>
                                                    </el-menu-item>
                                                </template>
                                            </el-sub-menu>
                                        </template>
                                    </el-sub-menu>
                                </template>
                            </el-sub-menu>
                        </template>
                    </el-menu>
                </div>
            </transition>
        </el-scrollbar>
    </div>
</template>

<script setup name="nav-cmb-right">
import SvgIcon from "../../../components/svg-icon";
import { useAppStore } from "../../../store/app";
import {useSettingStore} from "../../../store/setting";
import {useLayoutColumnStore} from "../../../store/layoutColumn";
const settingStore = useSettingStore();
const appStore = useAppStore();
const layoutColumnStore = useLayoutColumnStore();
import {menuIsShow, menuIsDir} from '../../../router/router-util';


// 点击子菜单时触发的回调
// 参数：index=点击菜单index标识（不是下标，是菜单id）,
// indexArray=所有已经打开的菜单id数组，形如：['1', '1-1', '1-1-1']
const selectMenu = function(index, indexArray) {
    appStore.showMenuById(index);
};

</script>

<style scoped lang="scss">
// 样式变量 （把深色布局改为浅色布局）
.nav-sub-menu-box{
    background-color: #FFF;
    color: #333;

    --menu-bg-color-2: #fafafa;	/* 二级菜单 - 背景色 */
    --menu-hover-bg-color: var(--t-light-color);			/* 菜单悬浮 - 背景色 */
    --menu-active-bg-color: var(--t-light-color);		/* 菜单选中 - 背景色 */
    --menu-active-color: var(--menu-active-bg-color-copy2);				/* 菜单选中 - 文字色 */
}
.nav-sub-menu-box{
    //border-right: 111px #DDD solid;
}
.nav-cmb-right-menu-box{width: 100%; transition: all 0.5s !important;}

// logo 部分
.nav-left-top{
    border-right: 0 !important;
    text-align: center;
    cursor: pointer;
    .admin-title{
        font-size: 1.1em;
        vertical-align: middle;
    }
}

// 分割线
.nav-smb-divider{
    margin-top: 10px;
    :deep(.el-divider__text){
        color: #888;
        font-size: 13px;
    }
}

// 菜单
.nav-sub-menu-box .menu-i{display: inline-block; vertical-align: middle; width: 24px; font-size: 16px !important; position: relative; top: -1px;}
.nav-sub-menu-box .menu-i{margin-right: 0px;}
.nav-sub-menu-box .menu-name{margin-left: 5px;}

/* 动画速度加快 */
.nav-sub-menu-box :deep(*){transition: all 0.3s;}

.nav-sub-menu-box :deep(*) {

    /* 避免菜单文字居中显示带来的不和谐现象 */
    .el-menu-item{display: block;}

    /* 隐藏右边框 */
    .el-menu{border: 0px;}

    /* 一级菜单，高度45px */
    .el-menu-item,
    .el-sub-menu__title{height: 45px !important; line-height: 45px !important;}

    /* 二级以下菜单，高度40px */
    .el-sub-menu .el-menu-item,
    .el-sub-menu .el-sub-menu .el-sub-menu__title{height: 40px !important; line-height: 40px !important;}

    /* 二级菜单 左边距 */
    .el-sub-menu .el-menu-item,
    .el-sub-menu .el-sub-menu .el-sub-menu__title{padding-left: 2.5em !important;}

    /* 三级菜单 左边距 */
    .el-sub-menu .el-sub-menu .el-menu-item,
    .el-sub-menu .el-sub-menu .el-sub-menu .el-sub-menu__title{padding-left: 3.6em !important;}

    /* 四级菜单 左边距 */
    .el-sub-menu .el-sub-menu .el-sub-menu .el-menu-item{padding-left: 4.7em !important;}

}

</style>
