<script setup lang="ts">
import { ref } from 'vue'
import RecursiveMenuItem from '@/components/RecursiveMenuItem.vue'
import { useCollapsedStore } from '@/stores/CollapsedStore'
import { buildTree, routeList } from '@/router/route'
import { useRoute } from 'vue-router'
const route = useRoute()

const store = useCollapsedStore()
const treeRoutes = ref(buildTree(routeList))
const activeIndex = ref(route.fullPath)
</script>

<template>
  <div class="h-full flex flex-col sider-area">
    <div class="flex items-center p-4 bg-el-menu-bg-color transition-all duration-300 logo-container">
      <div class="w-8 h-8 flex-shrink-0 logo">
        <img src="@/assets/logo.svg" alt="Logo" class="w-full h-full object-contain logo-image" />
      </div>
      <h1 v-show="!store.collapsed" class="ml-3 text-18px font-bold text-el-text-color-primary whitespace-nowrap overflow-hidden text-ellipsis system-title">
        沅陵后台管理系统
      </h1>
    </div>
    <el-menu
      :default-active="activeIndex"
      class="flex-grow border-r-0 el-menu-vertical"
      :collapse="store.collapsed"
      :collapse-transition="false"
      router
    >
      <recursive-menu-item
        v-for="item in treeRoutes"
        :key="item.path"
        :item="item"
      />
    </el-menu>
  </div>
</template>
