<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 师团级和团级显示物资配额 -->
      <el-col v-if="authStore.organizationalLevelNum <= 2" :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon :size="24" color="#409EFF"><Box /></el-icon>
              <span>物资配额</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.allocations }}</div>
          <div class="stat-label">总配额条数</div>
        </el-card>
      </el-col>
      <!-- 师团级和团级显示完成率 -->
      <el-col v-if="authStore.organizationalLevelNum <= 2" :span="6">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon :size="24" color="#67C23A"><DataAnalysis /></el-icon>
              <span>完成率</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.completionRate }}%</div>
          <div class="stat-label">平均完成率</div>
        </el-card>
      </el-col>
      <el-col :span="authStore.organizationalLevelNum <= 2 ? 6 : 12">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon :size="24" color="#E6A23C"><User /></el-icon>
              <span>人才管理</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.personnel }}</div>
          <div class="stat-label">人员总数</div>
        </el-card>
      </el-col>
      <el-col :span="authStore.organizationalLevelNum <= 2 ? 6 : 12">
        <el-card class="stat-card">
          <template #header>
            <div class="card-header">
              <el-icon :size="24" color="#F56C6C"><Checked /></el-icon>
              <span>待审批</span>
            </div>
          </template>
          <div class="stat-value">{{ stats.pendingApprovals }}</div>
          <div class="stat-label">待处理审批</div>
        </el-card>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <el-button type="primary" @click="$router.push('/allocations')">
              <el-icon><Box /></el-icon>
              查看配额
            </el-button>
            <el-button type="success" @click="$router.push('/reports')">
              <el-icon><DataAnalysis /></el-icon>
              上报数据
            </el-button>
            <el-button type="warning" @click="$router.push('/personnel')">
              <el-icon><User /></el-icon>
              人才管理
            </el-button>
            <el-button v-if="authStore.canApprove" type="danger" @click="$router.push('/approvals')">
              <el-icon><Checked /></el-icon>
              审批管理
            </el-button>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>当前用户信息</span>
          </template>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="用户名">{{ authStore.user?.username }}</el-descriptions-item>
            <el-descriptions-item label="姓名">{{ authStore.user?.displayName }}</el-descriptions-item>
            <el-descriptions-item label="所属单位">{{ authStore.user?.organizationalUnitName }}</el-descriptions-item>
            <el-descriptions-item label="组织层级">{{ levelName }}</el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { statsApi } from '@/api'
import { OrganizationalLevel } from '@/types'
import { Box, DataAnalysis, User, Checked } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const authStore = useAuthStore()

const stats = ref({
  allocations: 0,
  completionRate: 0,
  personnel: 0,
  pendingApprovals: 0
})

const loading = ref(false)

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 ''
  }
})

async function loadStats() {
  loading.value = true
  try {
    stats.value = await statsApi.getDashboardStats()
  } catch {
    ElMessage.error('加载统计数据失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.dashboard {
  padding: 10px;
}

.stat-card {
  text-align: center;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
}

.stat-label {
  color: #909399;
  margin-top: 8px;
}

.mt-20 {
  margin-top: 20px;
}

.quick-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
</style>
