<script setup lang="ts">
import { useRouter } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'
import MenuItem from './MenuItem.vue'

let appicon = localStorage.getItem('appicon')
let appname = localStorage.getItem('appname')
console.log(appname)

const router = useRouter()
// console.log('router : ', router.options.routes)
const allRoutes = router.options.routes
  .find((route: RouteRecordRaw) => route.name === 'home')!
  .children?.sort((a, b) => a?.meta?.sort - b?.meta?.sort)

// const index = router.currentRoute.value.name
const index =  computed(() => {
  return router.currentRoute.value.name
})

function linkTo(){
  router.push('/frontpage/homePage')
}

</script>

<template>
  <div class="h-full bg-white flex flex-col">
    <div class="text-center text-3xl my-5 flex items-center cursor-pointer" @click="linkTo()">
      <!-- <img class="w-33px h-45px mr-5px" src="/images/logo.png" alt="">  -->
      <img class="w-36px h-36px mr-8px" :src="appicon" alt="" /> 
      <div>{{ appname }}</div>
    </div>
    <el-menu style="border: none;" class="flex-1" :default-active="index">
      <MenuItem v-for="route in allRoutes" :key="route.name" :item="route" />
    </el-menu>
  </div>
</template>
