<template>
  <div class="student-list-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.college" placeholder="全部" clearable style="width: 160px">
                <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 label="住宿状态">
              <el-select v-model="queryForm.status" placeholder="全部" clearable style="width: 120px">
                <el-option label="在住" value="active" />
                <el-option label="已退宿" value="left" />
                <el-option label="临时住宿" value="temp" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleQuery"> <vab-icon icon="search-line"></vab-icon> 查询</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="add-line"></vab-icon> 新增学生</el-button>
          <el-button type="success" @click="handleImport"> <vab-icon icon="upload-line"></vab-icon> 批量导入</el-button>
          <el-button type="warning" @click="handleExport"> <vab-icon icon="download-line"></vab-icon> 导出数据</el-button>
        </vab-query-form-right-panel>
      </vab-query-form>

      <el-table v-loading="loading" :data="tableData" border stripe>
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="学号" width="120" sortable fixed />
        <el-table-column prop="name" label="姓名" width="100" fixed />
        <el-table-column prop="gender" label="性别" width="70">
          <template #default="{ row }">
            <el-tag :type="row.gender === '男' ? '' : 'danger'" size="small">{{ row.gender }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="college" label="学院" min-width="150" show-overflow-tooltip />
        <el-table-column prop="major" label="专业" min-width="150" show-overflow-tooltip />
        <el-table-column prop="room" label="当前宿舍" width="150">
          <template #default="{ row }">
            <span v-if="row.room" class="text-primary font-bold cursor-pointer" @click="handleViewRoom(row)">
              {{ row.room }}
            </span>
            <span v-else class="text-gray">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="status" label="状态" width="90">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusLabel(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="checkInTime" label="入住时间" width="160" sortable />
        <el-table-column label="操作" width="180" fixed="right" align="center">
          <template #default="{ row }">
            <el-button type="primary" style="margin-right: 5px;" text size="small" @click="handleEdit(row)"> <vab-icon icon="edit-line"></vab-icon> 编辑</el-button>
            <el-button type="primary" text size="small" @click="handleDetail(row)"> <vab-icon icon="file-line"></vab-icon> 档案</el-button>
            <el-popconfirm title="确定删除该学生档案吗？这将清除其所有历史记录。" @confirm="handleDelete(row)">
              <template #reference>
                <el-button type="danger" text size="small"> <vab-icon icon="delete-line"></vab-icon> 删除</el-button>
              </template>
            </el-popconfirm>
          </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>

    <student-edit ref="editRef" @fetch-data="handleQuery" />

    <!-- 档案详情抽屉 -->
    <el-drawer v-model="detailVisible" title="学生详细档案" size="40%">
      <div v-if="currentStudent" class="student-profile">
        <div class="profile-header">
          <el-avatar :size="80" shape="square" src="https://picsum.photos/200/200" />
          <div class="header-info">
            <div class="name">
              {{ currentStudent.name }}
              <vab-icon 
                :icon="currentStudent.gender === '男' ? 'men-line' : 'women-line'" 
                :class="currentStudent.gender === '男' ? 'text-blue' : 'text-pink'" 
              />
            </div>
            <div class="tags">
              <el-tag size="small">{{ currentStudent.college }}</el-tag>
              <el-tag size="small" type="info">{{ currentStudent.major }}</el-tag>
              <el-tag size="small" :type="getStatusType(currentStudent.status)">{{ getStatusLabel(currentStudent.status) }}</el-tag>
            </div>
          </div>
        </div>

        <el-tabs class="mt-20">
          <el-tab-pane label="基本信息">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="学号">{{ currentStudent.id }}</el-descriptions-item>
              <el-descriptions-item label="身份证号">33010620000101****</el-descriptions-item>
              <el-descriptions-item label="联系电话">{{ currentStudent.phone }}</el-descriptions-item>
              <el-descriptions-item label="电子邮箱">{{ currentStudent.id }}@intl.zju.edu.cn</el-descriptions-item>
              <el-descriptions-item label="家庭住址">浙江省杭州市西湖区...</el-descriptions-item>
              <el-descriptions-item label="紧急联系人">张父 (13900000000)</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="住宿记录">
             <el-timeline class="mt-10">
              <el-timeline-item timestamp="2026-01-23" placement="top" type="success">
                <div class="card">
                  <h4>办理入住</h4>
                  <p>入住房间：一号书院 302-1</p>
                  <p>操作人：系统管理员</p>
                </div>
              </el-timeline-item>
              <el-timeline-item timestamp="2025-09-01" placement="top" type="primary">
                <div class="card">
                  <h4>新生报到</h4>
                  <p>完成线上预报到流程</p>
                </div>
              </el-timeline-item>
            </el-timeline>
          </el-tab-pane>
          <el-tab-pane label="违纪/奖惩">
            <el-empty description="暂无记录" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
  </div>
</template>

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

defineOptions({
  name: 'StudentList',
})

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

const loading = ref(false)
const total = ref(100)
const tableData = ref([])
const detailVisible = ref(false)
const currentStudent = ref(null)
const editRef = ref()

// --- Mock Data ---
const generateMockData = () => {
  return [
    {
      id: '31901001',
      name: '梁健',
      gender: '男',
      college: 'ZJUI',
      major: '电气工程及其自动化',
      room: '一号书院 302-1',
      phone: '13800138001',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901002',
      name: '鲁永波',
      gender: '男',
      college: 'ZJE',
      major: '生物医学',
      room: '三号书院 501-2',
      phone: '13800138002',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901003',
      name: '王应哲',
      gender: '男',
      college: 'ZIBS',
      major: '工商管理',
      room: '二号书院 105-1',
      phone: '13800138003',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901004',
      name: '杨勇捷',
      gender: '男',
      college: 'ZJUI',
      major: '土木工程',
      room: '一号书院 402-1',
      phone: '13800138004',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901005',
      name: '苑国波',
      gender: '男',
      college: 'ZJE',
      major: '生物信息',
      room: '三号书院 201-2',
      phone: '13800138005',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901006',
      name: '曹青青',
      gender: '女',
      college: 'ZIBS',
      major: 'iMBA',
      room: '二号书院 305-1',
      phone: '13800138006',
      status: 'active',
      checkInTime: '2025-09-01',
    },
    {
      id: '31901007',
      name: '石焕然',
      gender: '男',
      college: 'ZJUI',
      major: '机械工程',
      room: '一号书院 602-1',
      phone: '13800138007',
      status: 'active',
      checkInTime: '2025-09-01',
    },
  ]
}

// --- Helpers ---
const getStatusLabel = (status) => {
  const map = { active: '在住', left: '已退宿', temp: '临时' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { active: 'success', left: 'info', temp: 'warning' }
  return map[status]
}

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

const handleAdd = () => {
  editRef.value.showEdit()
}

const handleEdit = (row) => {
  editRef.value.showEdit(row)
}

const handleDelete = (row) => {
  ElMessage.success('删除成功')
  handleQuery()
}

const handleDetail = (row) => {
  currentStudent.value = row
  detailVisible.value = true
}

const handleViewRoom = (row) => {
  ElMessage.info(`跳转至房间 ${row.room} 详情`)
}

const handleImport = () => {
  ElMessageBox.confirm('请选择Excel文件进行上传，支持批量导入学生基础数据。', '批量导入', {
    confirmButtonText: '选择文件',
    cancelButtonText: '取消'
  }).then(() => {
    ElMessage.success('导入成功：成功解析 150 条数据')
    handleQuery()
  })
}

const handleExport = () => {
  ElMessage.success('正在导出Excel...')
}

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

handleQuery()
</script>

<style lang="scss" scoped>
.student-list-container {
  .text-primary { color: var(--el-color-primary); }
  .text-gray { color: #909399; }
  .font-bold { font-weight: bold; }
  .cursor-pointer { cursor: pointer; }
}
</style>
