<template>
  <div class="check-in-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 @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="所属学院">
              <el-select v-model="queryForm.college" placeholder="请选择学院" clearable style="width: 180px">
                <el-option label="ZJE (浙江大学爱丁堡大学联合学院)" value="ZJE" />
                <el-option label="ZJUI (浙江大学伊利诺伊大学厄巴纳香槟校区联合学院)" value="ZJUI" />
                <el-option label="ZIBS (浙江大学国际联合商学院)" value="ZIBS" />
              </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="handleManualAdd"> <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="id" label="学号" width="120" sortable />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{ row }">
            <el-tag :type="row.gender === '男' ? '' : 'danger'">{{ row.gender }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="college" label="学院" min-width="200" />
        <el-table-column prop="major" label="专业" min-width="150" />
        <el-table-column prop="preAssigned" label="预分配房间" width="150">
          <template #default="{ row }">
            <span v-if="row.preAssigned" class="text-primary font-bold">{{ row.preAssigned }}</span>
            <el-tag v-else type="info" size="small">未分配</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="报到状态" width="100">
          <template #default="{ row }">
            <el-tag :type="statusMap[row.status].type">{{ statusMap[row.status].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleCheckIn(row)"> <vab-icon icon="add-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-in-dialog ref="checkInDialogRef" @success="handleSuccess" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import CheckInDialog from './components/CheckInDialog.vue'

defineOptions({
  name: 'CheckIn',
})

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

const loading = ref(false)
const total = ref(100)
const checkInDialogRef = ref()

// Mock Status
const statusMap = {
  pending: { label: '待报到', type: 'info' },
  processing: { label: '办理中', type: 'warning' },
  done: { label: '已入住', type: 'success' },
}

// Mock Table Data
const tableData = ref([
  { id: '31901001', name: '梁健', gender: '男', college: 'ZJUI', major: '电气工程及其自动化', preAssigned: '一号书院 302-1', status: 'pending' },
  { id: '31901002', name: '鲁永波', gender: '男', college: 'ZJE', major: '生物医学', preAssigned: '三号书院 501-2', status: 'pending' },
  { id: '31901003', name: '王应哲', gender: '男', college: 'ZIBS', major: '工商管理', preAssigned: '', status: 'pending' },
  { id: '31901004', name: '杨勇捷', gender: '男', college: 'ZJUI', major: '机械工程', preAssigned: '三号书院 501-3', status: 'processing' },
  { id: '31901005', name: '苑国波', gender: '男', college: 'ZIBS', major: 'iMBA', preAssigned: '', status: 'pending' },
])

// --- Methods ---
const handleQuery = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('查询成功')
  }, 500)
}

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

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

const handleManualAdd = () => {
  ElMessage.info('临时入住功能待开发')
}

const handleCheckIn = (row) => {
  checkInDialogRef.value.open(row)
}

const handleSuccess = (student) => {
  const index = tableData.value.findIndex(item => item.id === student.id)
  if (index !== -1) {
    tableData.value[index].status = 'done'
  }
}
</script>

<style lang="scss" scoped>
.check-in-container {
  .text-primary { color: var(--el-color-primary); }
  .text-gray { color: #909399; }
  .font-bold { font-weight: bold; }
  .text-center { text-align: center; }
}
</style>
