<script setup lang="ts">
import type { AnalysisRecordModel, PatientModel } from '@/model';
import { analysisUpdateRecordsMethod }            from '@/request/api/report.api';
import { usePagination }                          from 'alova/client';

import { type VxeTableEvents, type VxeTableInstance } from 'vxe-pc-ui';


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

const patientId = computed(() => props.patient?.id);
const { data: records, loading, page, pageSize, total, isLastPage } = usePagination(
  (page, size) => analysisUpdateRecordsMethod(page, size, { patientId: patientId.value }),
  {
    initialData: { total: 0, data: [] },
    initialPage: 1, initialPageSize: 100,
    immediate: true, append: true,
    watchingStates: [ patientId ],
    middleware: (_, next) => { if ( patientId.value ) next(); },
  },
);

const tableRef = ref<VxeTableInstance<AnalysisRecordModel>>();

const cellClickEvent: VxeTableEvents.CellClick<AnalysisRecordModel> = ({ row, column, ...a }) => {
  tableRef.value?.setCurrentRow(row);
  tableRef.value?.setCurrentColumn(column);
};

const scrollEvent: VxeTableEvents.Scroll<AnalysisRecordModel> = (params) => {
  if ( params.scrollTop + params.bodyHeight >= params.scrollHeight && !isLastPage.value && !loading.value ) {
    page.value += 1;
  }
};
</script>
<template>
  <vxe-table
    ref="tableRef" :data="records" :loading
    max-height="100%" auto-resize align="center"
    :column-config="{resizable:true,isCurrent: true}"
    :row-config="{isCurrent: true, isHover: true}"
    @cell-click="cellClickEvent"
    @scroll=scrollEvent
  >
    <vxe-column field="recordDate" title="日期"></vxe-column>
    <vxe-column field="pickedSymptom" title="症状"></vxe-column>
    <vxe-column field="algorithmInferSymptom" title="联想症状"></vxe-column>
    <vxe-column field="upImg" title="舌面">
      <template #default="{row}">
        <a-image v-if="row['upImg']" :src="row['upImg']" style="max-height: 200px;"></a-image>
      </template>
    </vxe-column>
    <vxe-column field="downImg" title="舌底">
      <template #default="{row}">
        <a-image v-if="row['downImg']" :src="row['downImg']" style="max-height: 200px;"></a-image>
      </template>
    </vxe-column>
    <vxe-column field="faceImg" title="面部">
      <template #default="{row}">
        <a-image v-if="row['faceImg']" :src="row['faceImg']" style="max-height: 200px;"></a-image>
      </template>
    </vxe-column>
  </vxe-table>
</template>
<style scoped lang="scss"></style>
