<script setup lang="ts">
defineProps<{
  id: number
  patientName: string
  serviceType: string
  status: string
  serviceDate: string
  staffName?: string
}>()

const statusMap: Record<string, { label: string; class: string }> = {
  ORDER_CREATED: { label: '待派单', class: 'bg-gray-100 text-gray-600' },
  ORDER_ASSIGNED: { label: '已派单', class: 'bg-blue-50 text-blue-600' },
  ORDER_ACCEPTED: { label: '已接单', class: 'bg-indigo-50 text-indigo-600' },
  ORDER_CHECKED_IN: { label: '已签到', class: 'bg-teal-50 text-teal-600' },
  ORDER_IN_SERVICE: { label: '服务中', class: 'bg-accent-50 text-accent-700' },
  ORDER_COMPLETED: { label: '已完成', class: 'bg-green-50 text-green-600' },
  ORDER_EXCEPTION: { label: '异常', class: 'bg-red-50 text-red-600' },
  ACCEPTED: { label: '已验收', class: 'bg-green-100 text-green-700' },
}
</script>

<template>
  <div class="flex items-center gap-4 px-4 py-3 bg-white border-b border-gray-50 hover:bg-gray-50 transition-colors">
    <span class="text-sm text-text-secondary w-12 shrink-0">#{{ id }}</span>
    <span class="text-sm font-medium flex-1 truncate">{{ patientName }}</span>
    <span class="text-xs text-text-secondary w-16 shrink-0">{{ serviceType }}</span>
    <span class="text-xs w-24 shrink-0">{{ serviceDate }}</span>
    <span class="text-xs px-2 py-1 rounded-full font-medium shrink-0" :class="statusMap[status]?.class || 'bg-gray-100'">
      {{ statusMap[status]?.label || status }}
    </span>
    <span class="text-xs text-text-secondary w-20 shrink-0 truncate">{{ staffName || '-' }}</span>
  </div>
</template>
