<script setup lang="ts">
import type { PatientModel }            from '@/model';
import { indicatorUpdateRecordsMethod } from '@/request/api/report.api';
import ReportIndicatorChartWidget       from '@/widgets/ReportIndicatorChartWidget.vue';
import { useWatcher }                   from 'alova/client';
import {
  transformIndicators,
} from '@/model'; 

const props = defineProps<{
  patient: PatientModel;
  records: any[];
}>();

const patientId = computed(() => props.patient?.id);
const { data: indicatorRecords, loading } = useWatcher(
  () => indicatorUpdateRecordsMethod(patientId.value),
  [ patientId ],
  {
    initialData: [], immediate: true,
    middleware: (_, next) => { if ( patientId.value ) next(); },
  },
);
// 外部直接传入 records 时，优先使用外部数据，不请求接口
watch(
  () => props.records,
  (records) => {
    if (records && records.length > 0) {
      indicatorRecords.value = transformIndicators(records);
      return indicatorRecords.value = indicatorRecords.value.filter(model => !!model.records?.length);
    } else if (!patientId.value) {
      indicatorRecords.value = [];
    }
  },
  { immediate: true, deep: true },
);
</script>
<template>
  <div ref="containerRef" class="h-full">
    <a-space direction="vertical" class="w-full" v-if="indicatorRecords.length > 0">
      <ReportIndicatorChartWidget style="height: 400px;" v-for="(item, idx) in indicatorRecords" :key="idx" :dataset="item" :loading />
    </a-space>
    <div v-else>
      <a-empty description="暂无数据" class="pt-20" />
    </div>
  </div>
</template>
<style scoped lang="scss">
</style>
