<template>
  <!-- 左侧二级菜单 v-show="subRoutes.length>1" -->
  <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" :class="{'menu-list-wrap': !appStore.sidebar.opened}">
        <el-menu-item v-for="item in subRoutes" :key="resolvePath(item.path)" :index="resolvePath(item.path)" >
          <template v-if="!appStore.sidebar.opened">
            <el-badge :show-zero="false"  :max="99"  :offset="[5, 15]">
              {{ item.meta.title }}
            </el-badge>
          </template>
          <template #title >
            <el-badge :show-zero="false"  :max="99"  :offset="[5, 15]">
              {{ item.meta.title }}
            </el-badge>
          </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";
import { useTagsViewStore, TagView } from "@/framework/store/modules/tagsView";
import { useAppStore } from "@/framework/store/modules/app";

const routesStore = useRoutesStore();
const tagsViewStore = useTagsViewStore();


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
          appStore.sidebar.moduleNumber=activeRoute.children.length
          // if(activeRoute.children.length<=1){
          //   appStore.sidebar.opened=false
          // }
        }
    },
    { 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: #fff;
    // margin-right: 8px;
    padding: 0 8px;

    .top{
      height: 64px;
      // border-bottom: 1px solid #F0F0F0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menu-name{
        font-size: 18px;
        font-weight: 600;
        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{
  background-color: #fff;
}
.el-menu--vertical{
  border: none;
}

.el-menu-item{
  border-radius: 12x;
}
.el-menu-item:hover{
  background-color: #EDF0F5;
  // border-radius: 12px;
  // color: #2467E8;
}
.el-menu-item.is-active{
  background-color: #DEE8FC;
  // border-radius: 12px;
  color: #2467E8;
  position: relative;

  &::after{
    content: '';
    width: 4px;
    height: 22px;
    background-color: #2467E8;
    position: absolute;
    right: 0;
  }
}

.menu-list-wrap .is-active::after{
  right: 12px;
}

</style>