<script setup lang="ts">
import { usePagination } from 'alova/client';
import { getPatientDiagnosisRecordsMethod } from '@/request/api/report.api';
import type { VxeGridInstance, VxeGridListeners, VxeGridProps } from 'vxe-table';
import type { DiagnosisReportVO } from '@/model/diagnosis-report.model';
import { VxeUI } from 'vxe-pc-ui';

const props = defineProps<{ patient: { id: string } }>();

const grid = ref<VxeGridInstance>();
const { data, loading, page, isLastPage } = usePagination((page, size) => getPatientDiagnosisRecordsMethod(page, size, { patientId: props.patient.id }), {
  initialData: { total: 0, data: [] },
  initialPage: 1,
  initialPageSize: 100,
  append: true,
  watchingStates: [() => props.patient.id],
});
const gridOptions = reactive<VxeGridProps<DiagnosisReportVO>>({
  // @ts-ignore
  loading,
  height: 'auto',
  headerAlign: 'center',
  align: 'center',
  columnConfig: {
    resizable: true,
  },
  columns: [
    { field: 'date', title: '就诊日期', width: '150px' },
    { field: 'department.name', title: '就诊科室' },
    { field: 'doctor.name', title: '就诊医生' },
    { field: 'disease.name', title: '疾病' },
    { field: 'symptom.name', title: '证型' },
    { title: '操作', align: 'center', width: 120, showOverflow: false, slots: { default: 'cell-operation' } },
  ],
  // @ts-ignore
  data,
  scrollY: {
    gt: 0,
  },
});
const gridEvents: VxeGridListeners = {
  scrollBoundary({ direction, isBottom }) {
    if (isBottom && direction === 'bottom' && !isLastPage.value) page.value++;
  },
};

function openPatientDiagnosisRecordPreview(row: DiagnosisReportVO, index?: number) {
  const component = defineAsyncComponent(() => import('@/components/PatientMedicalHistoryPreview.vue'));
  VxeUI.modal.open({
    title: `门诊病历`,
    escClosable: true,
    destroyOnClose: true,
    resize: true,
    width: window.innerWidth * 0.6,
    height: window.innerHeight * 0.8,
    minWidth: Math.min(window.innerWidth * 0.98, 1200),
    slots: {
      default() {
        return h(component, row.medicalHistory);
      },
    },
  });
}
</script>

<template>
  <vxe-grid ref="grid" v-bind="gridOptions" v-on="gridEvents">
    <template #cell-operation="{ row }">
      <vxe-button-group mode="text">
        <vxe-button content="查看" :disabled="!row.medicalHistory" status="warning" @click="openPatientDiagnosisRecordPreview(row)"></vxe-button>
      </vxe-button-group>
    </template>
  </vxe-grid>
</template>

<style scoped lang="scss"></style>
