<template>
  <div class="queue-list">
    <el-table :data="queueList" style="width: 100%" v-loading="loading">
      <el-table-column prop="id" label="序号" width="80"/>
      <el-table-column prop="status" label="状态"/>
      <el-table-column prop="createTime" label="挂号时间"/>
      <!-- 其它列 -->
    </el-table>
    <el-pagination
      v-if="total > pageSize"
      background
      layout="prev, pager, next, jumper"
      :current-page="pageNum"
      :page-size="pageSize"
      :total="total"
      @current-change="handlePageChange" />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getQueueOrders } from '@/api/outpatient'

const props = defineProps({
  patientId: { type: [String, Number], required: true }
})

const queueList = ref([])
const loading = ref(false)
const pageNum = ref(1)
const pageSize = ref(20)
const total = ref(0)

const fetchQueue = async () => {
  loading.value = true
  try {
    const res = await getQueueOrders(props.patientId, pageNum.value, pageSize.value)
    queueList.value = res.data
    total.value = res.total || queueList.value.length
  } finally {
    loading.value = false
  }
}

const handlePageChange = (newPage) => {
  pageNum.value = newPage
  fetchQueue()
}

onMounted(fetchQueue)
watch(() => props.patientId, fetchQueue)
</script>
