<!-- 分栏布局下，顶级菜单栏 -->
<template>
    <div>
        <!-- Logo 部分 -->
        <div class="nav-left-top" :title="settingStore.title" @click="appStore.showHome()">
            <img :src="settingStore.logo" class="admin-logo" alt="logo">
        </div>
        <!-- 菜单部分 -->
        <el-scrollbar class="top-menu-box">
            <template v-for="menu in appStore.menuList" :key="menu.id">
                <div
                    class="top-menu-item"
                    :class="{'top-menu-item-active': layoutColumnStore.activeTopMenu && menu.id === layoutColumnStore.activeTopMenu.id}"
                    v-if="menuIsShow(menu)"
                    @click="selectTopMenu(menu)">
                    <svg-icon class="menu-i" :name="menu.icon" :title="menu.title"></svg-icon>
                    <p>{{ menu.title }}</p>
                </div>
            </template>
        </el-scrollbar>
    </div>
</template>

<script setup name="nav-cmb-left">
import { useAppStore } from "../../../store/app";
import {useLayoutColumnStore} from "../../../store/layoutColumn";
import {useSettingStore} from "../../../store/setting";
import {watch, nextTick} from "vue";
import {homeTab} from "../../../router/home";
import {menuIsShow} from '../../../router/router-util';
const layoutColumnStore = useLayoutColumnStore();
const appStore = useAppStore();
const settingStore = useSettingStore();

// 点击菜单时
const selectTopMenu = function(menu) {
    if(layoutColumnStore.activeTopMenu === menu) {
        return;
    }
    layoutColumnStore.activeTopMenu = menu;
    // 动画效果 
    appStore.navCmbRightShow = false;
    nextTick(function (){
        appStore.navCmbRightShow = true;
    })
};

// 刷新 top-menu 选中信息
const f5SelectTopMenu = function() {
    // 如果是首屏
    if(appStore.nativeTab.id === homeTab.id) {
        return;
    }

    // 否则从搜索列表中搜寻
    for (let item of appStore.searchList) {
        if(item.id === appStore.nativeTab.id) {
            const topMenu = item.level[0];
            return selectTopMenu(topMenu);
        }
    }

    // 如果遍历全局没有找到
    // return;
}

// 监听 tab 切换，刷新一下
watch(() => appStore.nativeTab, () => {
    f5SelectTopMenu();
})

// 组件加载时触发一下
nextTick(function (){
    f5SelectTopMenu();
})


</script>

<style scoped lang="scss">
// logo部分
.nav-left-top{
  cursor: pointer;
  border-right: 0 !important;
}
.admin-logo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
  margin-left: 18px;
}

// 菜单部分
.top-menu-box{
  //background-color: red;
}
.top-menu-item{
  height: 50px;
  text-align: center;
  line-height: 20px;
  white-space: nowrap;
  transition: all 0.2s;
  .menu-i{
    margin-top: 9px;
  }
  p{
    font-size: 12px;
    margin-top: -4px;
  }
}

.top-menu-item:hover{
  background-color: var(--menu-hover-bg-color);
  cursor: pointer;
}
.top-menu-item.top-menu-item-active{
  background-color: var(--menu-active-bg-color);
  color: var(--menu-active-color);
}










</style>
