<template>
  <div class="detail-sidebar">
    <el-menu
      :default-active="activeMenu"
      class="sidebar-menu"
      @select="handleMenuSelect"
    >
      <!-- 项目基本信息 -->
      <el-menu-item 
        index="basicInfo" 
        v-hasPermi="['project:management:queryBasicInfo']"
      >
        <el-icon><Document /></el-icon>
        <span>{{ t('project.management.detail.menu.basicInfo') }}</span>
      </el-menu-item>

      <!-- 中心信息 -->
      <el-menu-item 
        index="centerInfo" 
        v-hasPermi="['project:management:queryCenterInfo']"
      >
        <el-icon><OfficeBuilding /></el-icon>
        <span>{{ t('project.management.detail.menu.centerInfo') }}</span>
      </el-menu-item>

      <!-- 成员信息 - 带子菜单 -->
      <el-sub-menu 
        index="memberInfo" 
        v-hasPermi="['project:management:queryMemberInfo']"
      >
        <template #title>
          <el-icon><User /></el-icon>
          <span>{{ t('project.management.detail.menu.memberInfo') }}</span>
        </template>
        
        <!-- 项目成员 -->
        <el-menu-item 
          index="projectMember" 
          v-hasPermi="['project:management:queryProjectMember']"
        >
          <el-icon><UserFilled /></el-icon>
          <span>{{ t('project.management.detail.menu.projectMember') }}</span>
        </el-menu-item>

        <!-- 中心成员 -->
        <el-menu-item 
          index="centerMember" 
          v-hasPermi="['project:management:queryCenterMember']"
        >
          <el-icon><Avatar /></el-icon>
          <span>{{ t('project.management.detail.menu.centerMember') }}</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { Document, OfficeBuilding, User, UserFilled, Avatar } from '@element-plus/icons-vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// Props
defineProps<{
  activeMenu?: string;
}>();

// Emit
const emit = defineEmits<{
  menuSelect: [index: string];
}>();

// 菜单选择事件
const handleMenuSelect = (index: string) => {
  emit('menuSelect', index);
}
</script>

<style scoped>
/* Sidebar 样式 */
.detail-sidebar {
  width: 200px;
  background-color: #ffffff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.sidebar-menu {
  border-right: none;
}

.sidebar-menu .el-menu-item {
  height: 48px;
  line-height: 48px;
}

/* 滚动条样式 */
.detail-sidebar::-webkit-scrollbar {
  width: 6px;
}

.detail-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.detail-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
}
</style>
