<template>
  <div class="holiday-flow-container">
    <!-- 统计概览 -->
    <el-row :gutter="20" class="mb-20">
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">总人数</div>
            <div class="value">2,580</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">已离校</div>
            <div class="value text-warning">1,850</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">留校申请</div>
            <div class="value text-primary">320</div>
          </div>
        </vab-card>
      </el-col>
      <el-col :span="6">
        <vab-card shadow="hover">
          <div class="stat-item">
            <div class="title">未登记</div>
            <div class="value text-danger">410</div>
          </div>
        </vab-card>
      </el-col>
    </el-row>

    <vab-card>
      <vab-query-form>
        <vab-query-form-left-panel>
          <el-form :inline="true" :model="queryForm" @submit.prevent>
            <el-form-item label="学生信息">
              <el-input v-model="queryForm.keyword" placeholder="姓名/学号" clearable />
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 120px">
                <el-option label="已离校" value="left" />
                <el-option label="留校" value="stay" />
                <el-option label="未登记" value="none" />
              </el-select>
            </el-form-item>
            <el-form-item label="学院">
              <el-select v-model="queryForm.college" placeholder="全部" clearable style="width: 120px">
                <el-option label="ZJE" value="ZJE" />
                <el-option label="ZJUI" value="ZJUI" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line" /> 查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel>
          <el-button type="primary" @click="handleAdd"> <vab-icon icon="edit-line" /> 登记/申请</el-button>
          <el-button type="success" @click="handleExport"> <vab-icon icon="download-line" /> 导出报表</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="college" label="学院" width="120" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 'leave' ? 'warning' : 'primary'">{{ row.type === 'leave' ? '离校' : '留校' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="离校/留校时间" min-width="180">
          <template #default="{ row }">
            {{ row.time }}
          </template>
        </el-table-column>
        <el-table-column prop="info" label="去向/原因" min-width="180" show-overflow-tooltip />
        <el-table-column prop="status" label="审批状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getAuditStatusType(row.status)">{{ getAuditStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.status === 'pending'" type="success" size="small" @click="handleAudit(row, 'pass')">通过</el-button>
            <el-button v-if="row.status === 'pending'" type="danger" size="small" @click="handleAudit(row, 'reject')">驳回</el-button>
            <el-button type="text" size="small" @click="handleDetail(row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <vab-pagination
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </vab-card>

    <apply-dialog ref="applyDialogRef" @success="handleSuccess" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import ApplyDialog from './components/ApplyDialog.vue'

defineOptions({
  name: 'HolidayFlow',
})

const queryForm = reactive({
  keyword: '',
  status: '',
  college: '',
  pageNo: 1,
  pageSize: 10,
})

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const applyDialogRef = ref()

const getAuditStatusLabel = (status) => {
  const map = { pending: '待审批', passed: '已通过', rejected: '已驳回' }
  return map[status] || status
}
const getAuditStatusType = (status) => {
  const map = { pending: 'warning', passed: 'success', rejected: 'danger' }
  return map[status]
}

const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = [
      {
        id: 1,
        name: '梁健',
        studentId: '31901001',
        college: 'ZJE',
        type: 'stay',
        time: '2026-01-20 ~ 2026-02-25',
        info: '科研项目留校',
        status: 'passed'
      },
      {
        id: 2,
        name: '鲁永波',
        studentId: '31901002',
        college: 'ZJUI',
        type: 'leave',
        time: '2026-01-18 10:00',
        info: '回家 (G7588)',
        status: 'passed'
      },
      {
        id: 3,
        name: '王应哲',
        studentId: '31901003',
        college: 'ZIBS',
        type: 'stay',
        time: '2026-01-20 ~ 2026-02-10',
        info: '勤工助学',
        status: 'pending'
      }
    ]
    loading.value = false
  }, 500)
}

const handleAdd = () => {
  applyDialogRef.value.open()
}

const handleAudit = (row, action) => {
  row.status = action === 'pass' ? 'passed' : 'rejected'
  ElMessage.success(action === 'pass' ? '审批通过' : '已驳回')
  // Mock API call: update status and sync with power system if needed
}

const handleExport = () => {
  ElMessage.success('正在生成分类统计报表...')
}

const handleDetail = (row) => {
  ElMessage.info('查看详情')
}

const handleSuccess = () => {
  handleQuery()
}

const handleCurrentChange = (val) => {
  queryForm.pageNo = val
  handleQuery()
}
const handleSizeChange = (val) => {
  queryForm.pageSize = val
  handleQuery()
}

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

<style lang="scss" scoped>
.mb-20 { margin-bottom: 20px; }
.text-warning { color: var(--el-color-warning); }
.text-primary { color: var(--el-color-primary); }
.text-danger { color: var(--el-color-danger); }

.stat-item {
  text-align: center;
  padding: 10px 0;
  .title { font-size: 14px; color: #909399; margin-bottom: 10px; }
  .value { font-size: 24px; font-weight: bold; color: #303133; }
}
</style>
