<template>
  <div class="check-out-container">
    <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="pending" />
                <el-option label="核验中" value="checking" />
                <el-option label="已完成" value="completed" />
                <el-option label="已驳回" value="rejected" />
              </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="handleApply"> <vab-icon icon="add-line" /> 发起退宿</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column prop="applyNo" label="申请编号" width="160" fixed />
        <el-table-column prop="studentName" label="学生姓名" width="100" />
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="room" label="退宿房间" min-width="150" />
        <el-table-column prop="reason" label="退宿原因" width="120" show-overflow-tooltip />
        <el-table-column prop="applyTime" label="申请时间" width="160" sortable />
        <el-table-column prop="status" label="当前状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="核验进度" width="380">
          <template #default="{ row }">
            <el-steps :active="getStepActive(row)" simple size="small">
              <el-step title="宿管" :status="getStepStatus(row, 'dorm')" />
              <el-step title="财务" :status="getStepStatus(row, 'finance')" />
              <el-step title="办结" :status="getStepStatus(row, 'final')" />
            </el-steps>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button v-if="row.status === 'pending' || row.status === 'checking'" type="primary" size="small" @click="handleProcess(row)"> <vab-icon icon="check-line" /> 办理</el-button>
            <el-button size="small" @click="handleDetail(row)"> <vab-icon icon="info-line" /> 详情</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>

    <check-out-process-dialog ref="processDialogRef" @success="handleSuccess" />
    <check-out-detail-dialog ref="detailDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import CheckOutProcessDialog from './components/CheckOutProcessDialog.vue'
import CheckOutDetailDialog from './components/CheckOutDetailDialog.vue'

defineOptions({
  name: 'CheckOut',
})

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

const loading = ref(false)
const total = ref(100)
const tableData = ref<any[]>([])
const processDialogRef = ref()
const detailDialogRef = ref()

// --- Mock Data ---
const generateMockData = () => {
  return [
    {
      applyNo: 'TS20260123001',
      studentName: '梁健',
      studentId: '31901001',
      room: '一号书院 302-1',
      reason: '毕业离校',
      applyTime: '2026-01-23 09:00:00',
      status: 'checking',
      dormChecked: false,
      financeChecked: false,
    },
    {
      applyNo: 'TS20260122005',
      studentName: '鲁永波',
      studentId: '31901002',
      room: '三号书院 501-2',
      reason: '外出实习',
      applyTime: '2026-01-22 14:00:00',
      status: 'completed',
      dormChecked: true,
      financeChecked: true,
    }
  ]
}

// --- Helpers ---
const getStatusLabel = (status: string) => {
  const map: any = { pending: '待审批', checking: '核验中', completed: '已完成', rejected: '已驳回' }
  return map[status]
}
const getStatusType = (status: string) => {
  const map: any = { pending: 'warning', checking: 'primary', completed: 'success', rejected: 'danger' }
  return map[status]
}

const getStepActive = (row: any) => {
  if (row.status === 'completed') return 3
  if (row.financeChecked) return 2
  if (row.dormChecked) return 1
  return 0
}

const getStepStatus = (row: any, step: string) => {
  if (row.status === 'completed') return 'success'
  if (step === 'dorm' && row.dormChecked) return 'success'
  if (step === 'finance' && row.financeChecked) return 'success'
  return 'wait'
}

// --- Methods ---
const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    tableData.value = generateMockData()
    loading.value = false
  }, 500)
}

const handleApply = () => {
  ElMessage.info('代发起申请功能待开发')
}

const handleProcess = (row: any) => {
  processDialogRef.value.open(row)
}

const handleSuccess = (apply: any) => {
  // Update list status mock
  const item = tableData.value.find(i => i.applyNo === apply.applyNo)
  if (item) {
    item.status = 'completed'
    item.dormChecked = true
    item.financeChecked = true
  }
}

const handleDetail = (row: any) => {
  detailDialogRef.value.open(row)
}

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

handleQuery()
</script>

<style lang="scss" scoped>
:deep(.el-step.is-simple .el-step__head) {
  display: flex;
}
</style>
