<template>
  <el-container class="main-layout">
    <el-aside width="220px" class="sidebar">
      <div class="logo">
        <h2>训练物资管控</h2>
      </div>
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <el-menu-item index="/dashboard">
          <el-icon><HomeFilled /></el-icon>
          <span>首页</span>
        </el-menu-item>
        
        <el-menu-item v-if="authStore.hasPermission(1)" index="/organizations">
          <el-icon><OfficeBuilding /></el-icon>
          <span>组织管理</span>
        </el-menu-item>
        
        <el-sub-menu v-if="canViewAllocations" index="allocations">
          <template #title>
            <el-icon><Box /></el-icon>
            <span>物资配额</span>
          </template>
          <el-menu-item index="/allocations">配额列表</el-menu-item>
          <el-menu-item v-if="authStore.canCreateAllocations" index="/allocations/create">创建配额</el-menu-item>
          <el-menu-item index="/allocations/change-requests">删改申请</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="personnel">
          <template #title>
            <el-icon><User /></el-icon>
            <span>人才管理</span>
          </template>
          <el-menu-item index="/personnel">人才列表</el-menu-item>
          <el-menu-item index="/personnel/create">添加人才</el-menu-item>
        </el-sub-menu>
        
        <el-menu-item v-if="authStore.canApprove" index="/approvals">
          <el-icon><Checked /></el-icon>
          <span>审批管理</span>
        </el-menu-item>
        
        <el-menu-item v-if="authStore.hasPermission(1)" index="/audit-logs">
          <el-icon><Document /></el-icon>
          <span>操作记录</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    
    <el-container>
      <el-header class="header">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-if="currentRoute.meta.title">
              {{ currentRoute.meta.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="header-right">
          <span class="user-info">
            <el-icon><User /></el-icon>
            {{ authStore.user?.username }} ({{ levelName }})
          </span>
          <el-button type="danger" text @click="handleLogout">
            <el-icon><SwitchButton /></el-icon>
            退出
          </el-button>
        </div>
      </el-header>
      
      <el-main class="main-content">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { OrganizationalLevel } from '@/types'
import {
  HomeFilled,
  OfficeBuilding,
  Box,
  User,
  Checked,
  Document,
  SwitchButton
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

const activeMenu = computed(() => route.path)
const currentRoute = computed(() => route)

// 只有师本部和团本部可以查看物资配额（营、连级隐藏）
const canViewAllocations = computed(() => authStore.organizationalLevelNum <= 2)

const levelName = computed(() => {
  const level = authStore.user?.organizationalLevel
  switch (level) {
    case OrganizationalLevel.Division: return '师团'
    case OrganizationalLevel.Regiment: return '团'
    case OrganizationalLevel.Battalion: return '营'
    case OrganizationalLevel.Company: return '连'
    default: return ''
  }
})

onMounted(async () => {
  if (authStore.token && !authStore.user) {
    await authStore.fetchProfile()
  }
})

async function handleLogout() {
  await authStore.logout()
  router.push('/login')
}
</script>

<style scoped>
.main-layout {
  height: 100vh;
}

.sidebar {
  background-color: #304156;
  overflow-y: auto;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #263445;
}

.logo h2 {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

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

.header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #606266;
}

.main-content {
  background-color: #f0f2f5;
  padding: 20px;
  overflow-y: auto;
}
</style>
