<template>
  <div class="modern-page-container">
    <div class="page-wrapper">
      <!-- 筛选 -->
      <el-card class="search-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon class="title-icon"><Search /></el-icon>
              统计条件
            </span>
          </div>
        </template>
        <el-form :model="queryForm" :inline="true" class="search-form">
          <el-form-item label="毕业年份" prop="graduYear">
            <el-select
              v-model="queryForm.graduYear"
              placeholder="请选择毕业年份"
              clearable
              style="width: 160px">
              <el-option
                v-for="y in graduYearOptions"
                :key="y"
                :label="y + '年'"
                :value="y" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="loadStatistics">查询统计</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 汇总卡片 -->
      <el-row :gutter="16" class="summary-row">
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card">
            <div class="stat-label">毕业生总数</div>
            <div class="stat-value">{{ summary.total }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card stat-success">
            <div class="stat-label">确认毕业</div>
            <div class="stat-value">{{ summary.confirmed }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card stat-warning">
            <div class="stat-label">待确认</div>
            <div class="stat-value">{{ summary.pending }}</div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stat-card stat-danger">
            <div class="stat-label">不可毕业</div>
            <div class="stat-value">{{ summary.rejected }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 按学院统计表格 -->
      <el-card class="content-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span class="card-title">
              <el-icon class="title-icon"><Document /></el-icon>
              按学院统计
            </span>
          </div>
        </template>
        <el-table
          :data="deptStats"
          v-loading="loading"
          stripe
          border
          class="modern-table">
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="deptName" label="学院" min-width="140" show-overflow-tooltip />
          <el-table-column prop="total" label="应毕业人数" width="110" align="center" />
          <el-table-column prop="pending" label="待确认" width="90" align="center" />
          <el-table-column prop="confirmed" label="确认毕业" width="100" align="center" />
          <el-table-column prop="rejected" label="不可毕业" width="100" align="center" />
          <el-table-column prop="completionRate" label="完成率" width="100" align="center">
            <template #default="scope">
              <span :class="completionRateClass(scope.row.completionRate)">
                {{ scope.row.completionRate }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <template #empty>
          <el-empty description="请选择毕业年份并点击「查询统计」" :image-size="100" />
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts" name="GradustuAnalyse">
import { reactive, ref, computed, onMounted } from 'vue'
import { useMessage } from '/@/hooks/message'
import { fetchListForAnalyse } from '/@/api/stuwork/gradustu'
import { Search, Document } from '@element-plus/icons-vue'

const queryForm = reactive({
  graduYear: ''
})

const loading = ref(false)
const rawList = ref<any[]>([])

const graduYearOptions = computed(() => {
  const y = new Date().getFullYear()
  return Array.from({ length: 11 }, (_, i) => y - 5 + i)
})

// 汇总：总人数、确认毕业、待确认、不可毕业
const summary = computed(() => {
  const list = rawList.value
  let pending = 0
  let confirmed = 0
  let rejected = 0
  list.forEach((item: any) => {
    const s = String(item.status ?? '')
    if (s === '0') pending++
    else if (s === '1') confirmed++
    else if (s === '-1') rejected++
  })
  return {
    total: list.length,
    pending,
    confirmed,
    rejected
  }
})

// 按学院聚合
const deptStats = computed(() => {
  const list = rawList.value
  const map: Record<string, { deptCode: string; deptName: string; total: number; pending: number; confirmed: number; rejected: number }> = {}
  list.forEach((item: any) => {
    const code = item.deptCode || '未知'
    const name = item.deptName || item.deptCode || '未知'
    if (!map[code]) {
      map[code] = { deptCode: code, deptName: name, total: 0, pending: 0, confirmed: 0, rejected: 0 }
    }
    const row = map[code]
    row.total++
    const s = String(item.status ?? '')
    if (s === '0') row.pending++
    else if (s === '1') row.confirmed++
    else if (s === '-1') row.rejected++
  })
  return Object.values(map).map((row) => ({
    ...row,
    completionRate: row.total > 0 ? ((row.confirmed / row.total) * 100).toFixed(1) + '%' : '0%'
  }))
})

const completionRateClass = (rate: string) => {
  const num = parseFloat(rate)
  if (num >= 100) return 'rate-high'
  if (num >= 80) return 'rate-mid'
  return 'rate-low'
}

const loadStatistics = async () => {
  if (!queryForm.graduYear) {
    useMessage().warning('请选择毕业年份')
    return
  }
  loading.value = true
  try {
    const list = await fetchListForAnalyse(queryForm.graduYear)
    rawList.value = list
  } catch (err: any) {
    useMessage().error(err.msg || '获取数据失败')
    rawList.value = []
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  queryForm.graduYear = String(new Date().getFullYear())
})
</script>

<style scoped lang="scss">
@import '/@/assets/styles/modern-page.scss';

.summary-row {
  margin-bottom: 16px;
}
.stat-card {
  text-align: center;
  .stat-label {
    font-size: 14px;
    color: var(--el-text-color-secondary);
  }
  .stat-value {
    font-size: 24px;
    font-weight: 600;
    margin-top: 8px;
  }
  &.stat-success .stat-value {
    color: var(--el-color-success);
  }
  &.stat-warning .stat-value {
    color: var(--el-color-warning);
  }
  &.stat-danger .stat-value {
    color: var(--el-color-danger);
  }
}
.rate-high {
  color: var(--el-color-success);
  font-weight: 500;
}
.rate-mid {
  color: var(--el-color-warning);
}
.rate-low {
  color: var(--el-color-danger);
}
</style>
