<template>
  <el-menu ellipsis mode="horizontal" :router="false" :default-active="activeMenu" style="width: 1000px">
    <!-- 不能直接使用 SubMenuItem 组件，无法触发 el-menu 隐藏省略功能 -->
    <template v-for="subItem in menuList" :key="subItem.path">
      <el-sub-menu v-if="subItem.children?.length" :key="subItem.path" :index="subItem.path + 'el-sub-menu'">
        <template #title>
          <el-icon>
            <SvgIcon v-if="subItem.meta?.icon.startsWith('svg-')" :name="subItem.meta?.icon.substring(4)" />
            <component v-else :is="subItem.meta?.icon" />
          </el-icon>
          <span>{{ subItem.meta.title }}</span>
        </template>
        <SubMenuItem :menu-list="subItem.children" />
      </el-sub-menu>
      <el-menu-item v-else :key="subItem.path + 'el-menu-item'" :index="subItem.path" @click="handleClickMenu(subItem)">
        <el-icon>
          <SvgIcon v-if="subItem.meta?.icon.startsWith('svg-')" :name="subItem.meta?.icon.substring(4)" />
          <component v-else :is="subItem.meta?.icon" />
        </el-icon>
        <template #title>
          <span>{{ subItem.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>
  </el-menu>
</template>
<script lang="ts" name="AppMenu" setup>
import { useAuthStore } from '@/stores'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const menuList = computed(() => authStore.showMenuListGet)

const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
const handleClickMenu = (subItem: Menu.MenuOptions) => {
  if (subItem.meta.isLink) return window.open(subItem.path, '_blank')
  router.push(subItem.path)
}
</script>
