<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import MenuItem from './MenuItem.vue'
import type { RouteRecordRawWithMeta } from '~/router/routes.d'
import { asyncFilteredRoutes } from '~/router/index'
import { constantRoutes } from '~/router/routes'

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

const allRoutes = computed(() => {
  return [...constantRoutes, ...asyncFilteredRoutes.value].sort((a, b) => (a.meta.sort as number) - (b.meta.sort as number))
})

const index = computed(() => {
  const reservedMatched = [...route?.matched].reverse()
  for (const r of reservedMatched) {
    if (!r.meta.hidden)
      return ((r?.redirect as { name: string })?.name) ?? r.name
  }
  return '/'
})
</script>

<template>
  <el-menu class="w-full border_right_none" :default-active="index" background-color="#041220" text-color="#fff">
    <MenuItem v-for="route in allRoutes" :key="route.name" :item="route" />
  </el-menu>
</template>

<style lang="scss" scoped>
.border_right_none {
  border-right: none;
}
</style>
