<template>
  <aside class="sidebar" :class="{ 'is-collapsed': collapsed }">
    <!-- 菜单区域 -->
    <el-menu
      class="sidebar-menu"
      :unique-opened="true"
      :default-active="activeMenu"
      :collapse="collapsed"
      router
    >
      <template v-for="menu in menuList" :key="menu.id">
        <!-- 无子菜单 -->
        <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.path">
          <el-icon v-if="menu.icon">
            <component :is="iconMap[menu.icon]" />
          </el-icon>
          <template #title>{{ menu.label }}</template>
        </el-menu-item>

        <!-- 有子菜单 -->
        <el-sub-menu v-else :index="menu.path">
          <template #title>
            <el-icon v-if="menu.icon">
              <component :is="iconMap[menu.icon]" />
            </el-icon>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item
            v-for="subMenu in menu.children"
            :key="subMenu.id"
            :index="subMenu.path"
          >
            <template #title>{{ subMenu.label }}</template>
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </aside>
</template>

<script setup lang="ts">
import {
  HomeFilled,
  List,
  UserFilled,
  Platform,
  BellFilled,
  GoodsFilled,
  WarningFilled,
  Tools,
} from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/modules/user'

defineProps<{
  collapsed?: boolean
}>()

const route = useRoute()
const userStore = useUserStore()

// 计算当前激活的菜单 index
const activeMenu = computed(() => {
  return route.fullPath
})

// 获取完整菜单列表
const menuList = computed(() => {
  return userStore.sideMenu || []
})

// 图标映射表
const iconMap: Record<string, any> = {
  HomeFilled,
  List,
  UserFilled,
  Platform,
  BellFilled,
  GoodsFilled,
  WarningFilled,
  Tools,
}
</script>

<style scoped lang="scss">
.sidebar {
  position: fixed;
  top: 60px;
  left: 0;
  bottom: 0;
  width: 200px;
  background: var(--el-bg-color-page);
  border-right: 1px solid var(--el-border-color-light);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 999;
  transition: width 0.3s ease;

  &.is-collapsed {
    width: 64px;

    :deep(.el-menu--collapse) {
      width: 64px;

      .el-sub-menu__title,
      .el-menu-item {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
    }
  }

  .sidebar-menu {
    height: 100%;
    border: none;
    background: transparent;

    &:not(.el-menu--collapse) {
      width: 200px;
    }

    :deep(.el-menu-item) {
      height: 50px;
      line-height: 50px;

      &.is-active {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        border-right: 3px solid var(--el-color-primary);
      }
    }

    :deep(.el-sub-menu) {
      .el-sub-menu__title {
        height: 50px;
        line-height: 50px;
      }

      &.is-active {
        > .el-sub-menu__title {
          color: var(--el-color-primary);
        }
      }
    }
  }
}

// 暗色模式适配
:deep(.dark) {
  .sidebar {
    background: var(--el-bg-color);
    border-right-color: var(--el-border-color-darker);

    .sidebar-menu {
      :deep(.el-menu-item) {
        &.is-active {
          background: var(--el-color-primary-dark-2);
        }
      }
    }
  }
}
</style>
