<template>
  <div class="queue-management-container">
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="queueList" border style="width: 100%">
      <el-table-column prop="patientName" label="患者姓名" />
      <el-table-column prop="status" label="排队状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="queueTime" label="排队时间" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getQueueList } from '@/api/triage'

const queryParams = ref({ deptId: 1, startDate: null, endDate: null })
const dateRange = ref([])
const queueList = ref([])

// 修复 Bug #544：默认加载当天时间范围
const initDefaultDate = () => {
  const today = new Date()
  const start = new Date(today.getFullYear(), today.getMonth(), today.getDate())
  const end = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 23, 59, 59)
  queryParams.value.startDate = start
  queryParams.value.endDate = end
  dateRange.value = [start.toISOString().split('T')[0], end.toISOString().split('T')[0]]
}

const handleDateChange = (val) => {
  if (val && val.length === 2) {
    queryParams.value.startDate = new Date(val[0])
    queryParams.value.endDate = new Date(val[1] + ' 23:59:59')
  } else {
    queryParams.value.startDate = null
    queryParams.value.endDate = null
  }
}

const handleQuery = async () => {
  const res = await getQueueList(queryParams.value)
  queueList.value = res.data || []
}

const getStatusType = (status) => {
  if (status === '完诊') return 'success'
  if (status === '就诊中') return 'warning'
  return 'info'
}

onMounted(() => {
  initDefaultDate()
  handleQuery()
})
</script>

<style scoped>
.queue-management-container { padding: 20px; }
.search-form { margin-bottom: 20px; }
</style>
