<template>
  <BasicDrawer
    v-bind="$attrs"
    destroyOnClose
    @register="registerDrawer"
    :title="getTitle"
    :width="width"
    :showFooter="false"
  >
    <div class="w-full mt-2">
      <XTForm :form-data="formData" @change="callForm" />
      <div class="my-2">
        <ChartsCard
          title="透前血压趋势"
          :has-safe="false"
          :colors="chartData.colors"
          height="200px"
          :date-data="chartData.dateData"
          :info-data="chartData.infoData"
        />
      </div>
      <BasicTable @register="registerTable" />
    </div>
  </BasicDrawer>
</template>
<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { columnsHistory } from './data';
  import { BasicTable, useTable } from '@/components/Table';
  import { archivesVitalsHistoryQueryList } from '@/api/biz/archives/vitalsHistoryApi';
  import ChartsCard from '/@/components/XTCard/src/ChartsCard.vue';
  import { XTForm } from '/@/components/XTForm/index';

  import dayjs from 'dayjs';
  const getTitle = ref('体征历史数据');
  const width = '70%';
  const patientBasicId = ref();
  const createTime = ref([
    dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ]);
  // 表格数据
  const tableData = ref([]);
  const formData = [
    {
      name: 'createTime',
      label: '记录日期',
      componentType: 'RangePicker',
      placeholder: '请选择',
      format: 'YYYY-MM-DD',
      valueFormat: 'YYYY-MM-DD',
      defaultValue: [
        dayjs().subtract(3, 'month').format('YYYY-MM-DD'),
        dayjs().format('YYYY-MM-DD'),
      ],
    },
  ];
  const chartData = reactive({
    colors: [
      {
        color: 'rgba(33, 201, 153, 1)',
        label: '透前血压 (mmHg)',
        dot: 'rgba(33, 201, 153, 1)',
      },
    ],
    infoData: [],
    dateData: [],
  });

  const [registerTable, { setTableData }] = useTable({
    rowKey: 'id',
    showIndexColumn: false,
    bordered: true,
    striped: false,
    pagination: false,
    maxHeight: 200,
    dataSource: tableData.value,
    columns: columnsHistory,
  });
  const [registerDrawer, { setDrawerProps }] = useDrawerInner(async data => {
    console.log('🚀 ~ file: FormDrawer.vue:49 ~ data:', data);
    setDrawerProps({ confirmLoading: false });
    patientBasicId.value = data.record.patientBasicId;
    await getData();
  });

  async function getData() {
    const resData = await archivesVitalsHistoryQueryList({
      createTime: createTime.value,
      patientBasicId: patientBasicId.value,
    });
    // 折线图
    chartData.dateData = resData.map(ele => {
      return ele.dialysisTime ? dayjs(ele.dialysisTime).format('YYYY-MM-DD') : '';
    });
    chartData.infoData = resData.map(ele => {
      return ele.preBloodPressure;
    });
    tableData.value = resData;
    await nextTick();
    await setTableData(tableData.value);
  }

  async function callForm(data) {
    console.log('🚀 ~ file: FormDrawerHistory.vue:100 ~ callForm ~ data:', data);
    createTime.value = data.createTime;
    await getData();
  }
</script>
<style lang="less" scoped>
  ::v-deep(.ant-table-body) {
    height: 500px !important;
  }

  ::v-deep(.ant-table-tbody > tr > td) {
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 1px solid #f0f0f0;
  }

  ::v-deep(.ant-table-wrapper table) {
    border: 0;
  }

  ::v-deep(.ant-table-cell-fix-right-first::after, .ant-table-cell-fix-right-last::after) {
    content: '';
    top: auto;
    width: 0;
  }

  ::v-deep(.ant-input) {
    border-color: #c2ccd4;
    border-radius: 4px;
  }

  ::v-deep(.ant-input-affix-wrapper) {
    border-color: #c2ccd4;
    border-radius: 4px;
  }

  ::v-deep(.ant-picker) {
    border-color: #c2ccd4 !important;
    border-radius: 4px;
  }
</style>
