<template>
    <el-menu class="app-sidemenu" :default-active="activeMenu" unique-opened>
        <AppSubmenu :data-list="menus" />
    </el-menu>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { useMenu } from '@/hooks/menu'
import AppSubmenu from './submenu.vue'

const { route, getMenus } = useMenu()
const level = 2 // 菜单层级
const menus = getMenus(level) // 如果是无限级菜单，activeMenu 应该直接返回 route.name

// 高亮菜单
const activeMenu = computed(() => {
    return route.matched[level - 1]?.name ?? route.name
})
</script>