<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import SidebarItem from './SidebarItem.vue'
import SidebarLogo from './SidebarLogo.vue'
import { usePermissionStore } from '@/store/modules/permission'
import { useAppStore } from '@/store/modules/app'

const route = useRoute()
const permissionStore = usePermissionStore()
const appStore = useAppStore()

// 当前激活的菜单
const activeMenu = computed(() => {
  const { meta, path } = route
  // 如果设置了 activeMenu 就使用它，否则使用当前路径
  return meta?.activeMenu || path
})

// 从 permission store 获取菜单列表
const menuList = computed(() => permissionStore.menuList)
</script>

<template>
  <div class="sidebar">
    <SidebarLogo :collapsed="appStore.sidebarCollapsed" />
    <el-scrollbar class="sidebar-scroll">
      <el-menu :default-active="activeMenu" :unique-opened="true" :collapse="appStore.sidebarCollapsed" mode="vertical"
        router>
        <SidebarItem v-for="item in menuList" :key="item.path" :item="item" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<style scoped lang="scss">
.sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--admin-sidebar-bg);
}

.sidebar-scroll {
  flex: 1;
  overflow: hidden;
}

:deep(.el-menu) {
  border-right: none;

  &:not(.el-menu--collapse) {
    width: 100%;
  }
}
</style>
