<script lang="ts" setup>
/**
 * 诊所今日摘要：今日挂号（待接诊/接诊中/已完成）+ 待发货订单
 * 数据走 workbench/clinic-summary；挂号跳挂号订单页，待发货跳商品订单页
 */
import type { ClinicSummaryResult } from '../api';

import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { getClinicSummaryApi } from '../api';
import KpiCard from './KpiCard.vue';
import StatChip from './StatChip.vue';

interface Props {
  title: string;
}
defineProps<Props>();

const router = useRouter();
const data = ref<ClinicSummaryResult | null>(null);
const loading = ref(true);
const error = ref(false);

/**
 * 拉取今日摘要；失败进入错误态可重试（不再静默消失）
 */
async function fetchSummary() {
  loading.value = true;
  error.value = false;
  try {
    data.value = await getClinicSummaryApi();
  } catch {
    error.value = true;
  } finally {
    loading.value = false;
  }
}

/**
 * 跳转挂号订单列表
 */
function goRegister() {
  router.push('/business/register/list').catch(() => {});
}

/**
 * 跳转商品订单列表
 */
function goProductOrder() {
  router.push('/order/product-order').catch(() => {});
}

onMounted(fetchSummary);
</script>

<template>
  <KpiCard
    :title="title"
    :loading="loading"
    :error="error"
    @refresh="fetchSummary"
  >
    <template v-if="data">
      <StatChip
        :highlight="data.wait_accept > 0"
        :value="data.wait_accept"
        icon="lucide:clock"
        label="待接诊"
        @click="goRegister"
      />
      <StatChip
        :value="data.accepting"
        icon="lucide:stethoscope"
        label="接诊中"
        @click="goRegister"
      />
      <StatChip
        :value="data.completed"
        icon="lucide:check-circle-2"
        label="已完成"
        @click="goRegister"
      />
      <StatChip
        :highlight="data.wait_delivery > 0"
        :value="data.wait_delivery"
        icon="lucide:package"
        label="待发货"
        @click="goProductOrder"
      />
    </template>
  </KpiCard>
</template>
