<template>
  <!-- 左侧二级菜单 -->
  <div class="sidebar-container" :class="{'sidebar-container-close': !appStore.sidebar.opened}">
    <div class="top">
      <span class="menu-name" v-show="appStore.sidebar.opened">{{ activeMenuName }}</span>
      <Hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSideBar" />
    </div>

    <el-menu :default-active="activePath" :router="true" background-color="#F6F8FB" text-color="#303335" :collapse="!appStore.sidebar.opened" :collapse-transition="false">
        <el-menu-item v-for="item in subRoutes" :key="resolvePath(item.path)" :index="resolvePath(item.path)" >
          <template v-if="!appStore.sidebar.opened">
            {{ item.meta.title }}
          </template>
            <template #title >{{ item.meta.title }}</template>
        </el-menu-item>
    </el-menu>
    
  </div>
</template>

<script lang="ts" setup>
import Hamburger from "@/framework/components/Hamburger/index.vue";
import path from 'path-browserify';
import { isExternal } from '@/framework/utils/index';
import { ref, watch} from 'vue'
import { useRouter } from 'vue-router';
import { useRoutesStore } from "@/framework/store/modules/routes";
const routesStore = useRoutesStore();

import { useAppStore } from "@/framework/store/modules/app";
const appStore = useAppStore()

/**
 * 左侧菜单栏显示/隐藏
 */
function toggleSideBar() {
  appStore.toggleSidebar(!appStore.sidebar.opened);
}

let activePath= ref('')
let activeMenuName = ref('')
let activeMenuPath = ref('')
let subRoutes:any = ref([])


let router = useRouter()
watch(
    () => router,
    (newValue) => {
        activePath.value = newValue.currentRoute.value.fullPath
        const path = newValue.currentRoute.value.matched[0].path
        const activeRoute = routesStore.routes.find((item: any) => item.path === path)
        if (activeRoute) {
          activeMenuName.value = activeRoute.meta.title
          activeMenuPath.value = activeRoute.path
          subRoutes.value = activeRoute.children
        }
    },
    { immediate: true,deep: true }
);

/**
 * 解析路径
 *
 * @param routePath 路由路径
 */
 function resolvePath(routePath: string) {
  if (isExternal(routePath)) {
    return routePath;
  }
  // 完整路径 = 父级路径(/level/level_3) + 路由路径
  const fullPath = path.resolve(activeMenuPath.value, routePath); // 相对路径 → 绝对路径
  return fullPath;
}


</script>

<style lang="scss" scoped>
.sidebar-container {
    width: $sideBarWidth;
    height: 100%;
    overflow-y: scroll;
    overflow-x:hidden;
    background-color: #F6F8FB;

    .top{
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menu-name{
        padding-left: 16px;
        color: #303335;
      }
    }
    
    &::-webkit-scrollbar {
        width: 3px;
        height: 10px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #fff;
        border-radius: 3px;
    }
    :deep(.el-tooltip__trigger) {
      display: block;
      width: 64px;
      padding: 0 10px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
}


.sidebar-container-close{
  width: 64px;
}

.el-menu--vertical{
  border: none;
}


</style>