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

import type { VxeColumnPropTypes, VxeTableEvents, VxeTableInstance } from 'vxe-table';


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

const patientId = computed(() => props.patient?.id);
const { data: records, loading: recordsLoading, page, pageSize, total, isLastPage } = usePagination(
  (page, size) => patientUpdateRecordsMethod(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 { data: dictionaries, loading: _loading } = useRequest(patientDictionariesMethod);

const loading = computed(() => _loading.value || recordsLoading.value);

const formatterWhether: VxeColumnPropTypes.Formatter<PatientRecordModel> = ({ cellValue }) => {
  return dictionary(dictionaries, 'sys_yes_no', cellValue).join('');
};
const formatterFoodAllergy: VxeColumnPropTypes.Formatter<PatientRecordModel> = ({ cellValue }) => {
  return dictionary(dictionaries, 'food_allergy', cellValue).join(', ');
};
const formatterHobbyFlavor: VxeColumnPropTypes.Formatter<PatientRecordModel> = ({ cellValue }) => {
  return dictionary(dictionaries, 'hobby_flavor', cellValue).join(', ');
};
const formatterJob: VxeColumnPropTypes.Formatter<PatientRecordModel> = ({ cellValue }) => {
  return dictionary(dictionaries, 'job', cellValue).join(', ');
};
const formatterSpecialPeriod: VxeColumnPropTypes.Formatter<PatientRecordModel> = ({ cellValue }) => {
  return dictionary(dictionaries, 'women_special_period', cellValue).join(', ');
};

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

const cellClickEvent: VxeTableEvents.CellClick<PatientRecordModel> = ({ 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
    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>
    <template v-if="props.patient?.gender === '1'">
      <vxe-column field="womenSpecialPeriod" title="女性特殊期" :formatter="formatterSpecialPeriod"></vxe-column>
    </template>
    <vxe-column field="height" title="身高">
      <template #default="{row}">
        {{ row[ 'height' ] }}
        <template v-if="row['height']">cm</template>
      </template>
    </vxe-column>
    <vxe-column field="weight" title="体重">
      <template #default="{row}">
        {{ row[ 'height' ] }}
        <template v-if="row['height']">kg</template>
      </template>
    </vxe-column>
    <vxe-column field="drinkState" title="饮酒情况" :formatter="formatterWhether"></vxe-column>
    <vxe-column field="smokeState" title="抽烟情况" :formatter="formatterWhether"></vxe-column>
    <vxe-column field="foodAllergy" title="食物过敏" :formatter="formatterFoodAllergy"></vxe-column>
    <vxe-column field="hobbyFlavor" title="喜好口味" :formatter="formatterHobbyFlavor"></vxe-column>
    <vxe-column field="job" title="职业" :formatter="formatterJob"></vxe-column>
  </vxe-table>
</template>
<style scoped lang="scss">
</style>
