<template>
  <div class="history-order-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-date-picker 
                v-model="queryForm.dateRange" 
                type="daterange" 
                range-separator="至" 
                start-placeholder="开始日期" 
                end-placeholder="结束日期" 
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @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 size="small" @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="orderNo" label="记录编号" width="180" fixed />
        <el-table-column prop="studentName" label="姓名" width="100" />
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="college" label="学院" width="120" />
        <el-table-column prop="room" label="住宿房间" width="150" />
        <el-table-column prop="period" label="住宿时段" min-width="200" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="getTypeTag(row.type)">{{ getTypeLabel(row.type) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="相关费用" width="120" align="right">
          <template #default="{ row }">
            <span>¥ {{ row.amount.toFixed(2) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" text 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>

    <history-detail-dialog ref="detailDialogRef" />
  </div>
</template>

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

defineOptions({
  name: 'HistoryOrder',
})

const queryForm = reactive({
  keyword: '',
  dateRange: [],
  pageNo: 1,
  pageSize: 10,
})

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

const getTypeLabel = (type: string) => {
  const map: any = { check_in: '入住办理', check_out: '退宿结算', adjust: '调宿变更' }
  return map[type] || type
}
const getTypeTag = (type: string) => {
  const map: any = { check_in: 'success', check_out: 'info', adjust: 'warning' }
  return map[type]
}

const generateMockData = () => {
  return [
    {
      orderNo: 'HIS20250901001',
      studentName: '梁健',
      studentId: '31901001',
      college: 'ZJUI',
      room: '一号书院 302-1',
      period: '2025-09-01 至 2026-06-30',
      type: 'check_in',
      amount: 1200.00,
      operator: '系统管理员',
      remark: '新生报到统一办理'
    },
    {
      orderNo: 'HIS20250715005',
      studentName: '鲁永波',
      studentId: '31901002',
      college: 'ZJE',
      room: '三号书院 501-2',
      period: '2024-09-01 至 2025-07-15',
      type: 'check_out',
      amount: 0.00,
      operator: '王宿管',
      remark: '暑期离校退宿'
    },
    {
      orderNo: 'HIS20250310003',
      studentName: '王应哲',
      studentId: '31901003',
      college: 'ZIBS',
      room: '二号书院 105-1',
      period: '2025-03-10 变更',
      type: 'adjust',
      amount: 0.00,
      operator: '李辅导员',
      remark: '因宿舍矛盾申请调宿'
    }
  ]
}

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

const handleExport = () => {
  ElMessage.success('历史数据导出中...')
}

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>
.history-order-container {
  
}
</style>
