<template>
  <div class="visitor-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-input v-model="queryForm.student" 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="active" />
                <el-option label="已离开" value="left" />
              </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="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="visitorName" label="访客姓名" width="100" />
        <el-table-column prop="phone" label="联系电话" width="120" />
        <el-table-column prop="idCard" label="身份证号" width="180" show-overflow-tooltip />
        <el-table-column prop="studentName" label="被访学生" width="120">
          <template #default="{ row }">
            <span>{{ row.studentName }}</span>
            <span class="text-xs text-gray ml-5">({{ row.room }})</span>
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="访问事由" show-overflow-tooltip />
        <el-table-column prop="visitTime" 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="进出记录" min-width="180">
          <template #default="{ row }">
            <div v-if="row.enterTime">进: {{ row.enterTime }}</div>
            <div v-if="row.leaveTime" class="text-gray">出: {{ row.leaveTime }}</div>
          </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="handleCheckIn(row)"> <vab-icon icon="check-line" /> 入校</el-button>
            <el-button v-if="row.status === 'active'" type="warning" size="small" @click="handleCheckOut(row)"> <vab-icon icon="close-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>

    <visitor-register-dialog ref="registerDialogRef" @success="handleQuery" />
    <visitor-detail-dialog ref="detailDialogRef" />
  </div>
</template>

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

defineOptions({
  name: 'VisitorList',
})

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

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

// --- Helpers ---
const getStatusLabel = (status) => {
  const map = { pending: '待访问', active: '访问中', left: '已离开' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { pending: 'info', active: 'success', left: 'gray' }
  return map[status]
}

// --- Methods ---
const generateMockData = () => {
  return [
    {
      id: 1,
      visitorName: '苑xx（父）',
      phone: '13900000001',
      idCard: '33010619700101****',
      studentName: '苑国波',
      room: '一号书院 302-1',
      reason: '送生活用品',
      visitTime: '2026-01-24 10:00:00',
      status: 'active',
      enterTime: '2026-01-24 09:55:00',
      leaveTime: ''
    },
    {
      id: 2,
      visitorName: '梁健(父)',
      phone: '13900000002',
      idCard: '33010619720202****',
      studentName: '鲁永波',
      room: '三号书院 501-2',
      reason: '探望',
      visitTime: '2026-01-24 14:00:00',
      status: 'pending',
      enterTime: '',
      leaveTime: ''
    }
  ]
}

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

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

const handleCheckIn = (row) => {
  row.status = 'active'
  row.enterTime = new Date().toLocaleString()
  ElMessage.success('入校登记完成')
}

const handleCheckOut = (row) => {
  row.status = 'left'
  row.leaveTime = new Date().toLocaleString()
  ElMessage.success('离校登记完成')
}

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

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

handleQuery()
</script>

<style lang="scss" scoped>
.visitor-list-container {
  .text-xs { font-size: 12px; }
  .text-gray { color: #909399; }
  .ml-5 { margin-left: 5px; }
}
</style>