<template>
    <!-- 左下：菜单栏 -->
    <div>
        <el-scrollbar class="menu-box">
            <div class="menu-box-pan">

                <!--
                  菜单：
                    unique-opened = 是否只有菜单打开
                    default-active = 正在高亮的菜单id
                    collapse = 是否折叠
                    参考文档：https://element-plus.gitee.io/zh-CN/component/menu.html
                -->
                <el-menu
                    :unique-opened="true"
                    :default-active="appStore.activeMenuId"
                    :collapse="!appStore.isOpen"
                    @select="selectMenu"
                >
                    <template v-for="(menu) in appStore.menuList">
                        <!-- 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>
        </el-scrollbar>
    </div>
</template>

<script setup name="nav-menu-bar">
import SvgIcon from "../../components/svg-icon";
import { useAppStore } from "../../store/app";
import {menuIsShow, menuIsDir} from '../../router/router-util';

const appStore = useAppStore();

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

</script>

<style scoped lang="scss">

  .menu-box{
    .menu-box-pan{
      width: 100%; overflow-x: hidden; padding-bottom: 200px
    }

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

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

    /* 避免菜单文字居中显示带来的不和谐现象 */
    .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>
