<template>
  <nav class="module-rail">
    <div class="module-rail__brand">
      <span class="module-rail__logo">医梦AI</span>
    </div>
    <ul class="module-rail__items">
      <li v-for="mod in modules" :key="mod.key"
          class="module-rail__item"
          :class="{ 'is-active': activeModule === mod.key }"
          @click="$emit('select', mod.key)"
          :title="mod.label">
        <el-icon :size="20"><component :is="mod.icon" /></el-icon>
        <span class="module-rail__label">{{ mod.label }}</span>
      </li>
    </ul>
    <div class="module-rail__spacer"></div>
    <div class="module-rail__footer">
      <slot name="footer" />
    </div>
  </nav>
</template>

<script setup>
import { HomeFilled, Aim, DataAnalysis, Setting } from '@element-plus/icons-vue'

defineProps({
  activeModule: { type: String, default: 'workspace' }
})

defineEmits(['select'])

const modules = [
  { key: 'workspace', label: '工作台', icon: HomeFilled },
  { key: 'okr', label: '目标与对齐', icon: Aim },
  { key: 'performance', label: '绩效评审', icon: DataAnalysis },
  { key: 'admin', label: '系统管理', icon: Setting }
]
</script>

<style scoped>
.module-rail {
  width: var(--shell-rail-width, 64px);
  min-height: 100vh;
  background: var(--shell-bg-deep, #120d4a);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  user-select: none;
}
.module-rail__brand {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 6px);
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.module-rail__logo {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
}
.module-rail__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-rail__item {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  transition: color var(--motion-fast, 160ms ease), background-color var(--motion-fast, 160ms ease);
}
.module-rail__item:hover { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.06); }
.module-rail__item.is-active { color: var(--color-accent, #3ad4d8); background: rgba(58,212,216,0.08); }
.module-rail__label { font-size: 9px; font-weight: 500; }
.module-rail__spacer { flex: 1; }
.module-rail__footer { padding: 8px 0; }
</style>
