<script setup lang="ts">
import { useThemeStore } from '@/stores/theme'
import { useMenuStore } from '@/stores/menu'
import { isAbsolutePath } from '@/utils/utils'

const themeStore = useThemeStore()
const themeStyle = computed(() => themeStore.themeStyle)

const menuStore = useMenuStore()
const router = useRouter()
const route = useRoute()

const handleSelect = (index: string) => {
  if (isAbsolutePath(index)) {
    window.open(index)
  } else {
    router.push(index)
  }
}

// 生成菜单部分开始
const menuRouter = computed(() => menuStore.leftMenuList)
watch(
  menuRouter,
  val => {
    if (themeStore.themeNav === 'top') {
      val[0] && handleSelect(menuStore.activeRoutePath || val[0].path)
    }
  },
  {
    immediate: true
  }
)
// generatorMenu(menuRouter.value)
// 生成菜单部分结束
</script>

<template>
  <el-menu
    :default-active="route.path"
    :collapse="menuStore.collapse"
    :collapse-transition="false"
    unique-opened
    class="layout-menu"
    :class="{ 'menu-normal': !menuStore.collapse }"
    :style="{ color: themeStyle.textColor }"
  >
    <global-sub-menu v-for="item in menuRouter" :key="item.name" :menu="item"></global-sub-menu>
  </el-menu>
</template>

<style lang="scss" scoped>
.menu-normal {
  width: var(--menu-width);
}
.layout-menu {
  height: calc(100vh - var(--el-header-height));
  border: none;
  flex-shrink: 0;
  overflow: auto;
}
.layout-menu .el-menu-item.is-active {
  background-color: var(--el-color-primary) !important;
  color: #fff;
}
.nav-dark,
.header-dark {
  .el-menu-item:hover,
  .el-sub-menu__title:hover {
    color: #fff;
    background-color: transparent;
  }
}
</style>
