<template>
  <DepartmentSelectionCard v-if="card.cardKey === 'department-selection'" :card="card" @action="emit('action', $event)" />
  <DoctorSelectionCard v-else-if="card.cardKey === 'doctor-selection'" :card="card" @action="emit('action', $event)" />
  <TimeSlotSelectionCard v-else-if="card.cardKey === 'time-slot-selection'" :card="card" @action="emit('action', $event)" />
  <ConfirmAppointmentCard v-else-if="card.cardKey === 'confirm-appointment'" :card="card" @action="emit('action', $event)" />
  <PaymentQrCard v-else-if="card.cardKey === 'payment-qrcode'" :card="card" @action="emit('action', $event)" />
  <AppointmentSuccessCard v-else-if="card.cardKey === 'appointment-success'" :card="card" @finish="emit('finish')" />
  <ErrorCard v-else message="暂不支持的卡片类型" :trace-id="card.cardInstanceId" />
</template>

<script setup lang="ts">
import type { CardInstance } from '../api/types';
import AppointmentSuccessCard from './AppointmentSuccessCard.vue';
import ConfirmAppointmentCard from './ConfirmAppointmentCard.vue';
import DepartmentSelectionCard from './DepartmentSelectionCard.vue';
import DoctorSelectionCard from './DoctorSelectionCard.vue';
import ErrorCard from './ErrorCard.vue';
import PaymentQrCard from './PaymentQrCard.vue';
import TimeSlotSelectionCard from './TimeSlotSelectionCard.vue';

defineProps<{ card: CardInstance }>();
const emit = defineEmits<{ action: [data: { actionName: string; payload: Record<string, unknown> }]; finish: [] }>();
</script>
