<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { RouteRecordDetailRaw } from '~/router/routes.d'
import MenuItem from './MenuItem.vue';
import { app_routes } from '~/store/app';

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

const allRoutes = computed(() => {
  const routes: RouteRecordDetailRaw[] = JSON.parse(sessionStorage.getItem('routes') as string)
  return routes.sort((a, b) => a.meta.sort - b.meta.sort)
})
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
    }
  }
})

</script>

<template>
  <el-menu class="h-full border-none" :default-active="index">
    <MenuItem v-for="route in allRoutes" :item="route">
    </MenuItem>
  </el-menu>
</template>


