<script setup lang="ts">
import {onMounted, Ref, ref, computed} from "vue";
import {reportQueryCenterApiByGet} from "@/api/base-data/report-center";
import CyAutoSize from "@/components/cy/auto-size/cy-auto-size.vue";
import XcElOption from "@/components/xiao-chan/xc-el-option/XcElOption.vue";
import XEUtils from "xe-utils";
import {SortBy, SortState, TableV2SortOrder} from "element-plus";

const props = defineProps<{
  patNo: string,
  times: number
}>()

const data = ref([])
const patInfo: Ref<{
  name: string;
  sex: string;
  age: string;
  smallDeptName: string
  bedNo: string
  inpatientNo: string
}> = ref({})


const currentType = ref('GLU')

const typeList = [
  {code: 'GLU', name: '血糖'},
  {code: 'UA', name: '尿酸'},
  {code: 'KB', name: '血酮'},
  {code: 'BP', name: '血压'}
]

const sortState = ref<SortState>({
  'time': TableV2SortOrder.DESC,
})

const onSort = ({key, order}: SortBy) => {
  sortState.value[key] = order
  if (order === 'asc') {
    data.value = data.value.sort((a, b) => new Date(a.time) - new Date(b.time))
  } else {
    data.value = data.value.sort((a, b) => new Date(b.time) - new Date(a.time))
  }
}

const columns = [
  {
    key: 'time',
    title: '测试时间',
    dataKey: 'time',
    width: '220px',
    sortable: true
  },
  {
    key: 'resultJson.result',
    title: '结果',
    dataKey: 'resultJson.result',
    width: '220px'
  },
  {
    key: 'resultJson.testNutritionalTime',
    title: '备注',
    dataKey: 'resultJson.testNutritionalTime',
    width: '220px'
  },
  {
    key: 'createdName',
    title: '签名',
    dataKey: 'createdName',
    width: '220px'
  }
]

const columnsBP = [
  {
    key: 'time',
    title: '测试时间',
    dataKey: 'time',
    width: '220px',
    sortable: true
  },
  {
    key: 'resultJson.result.bloodMeasureHigh',
    title: '高压',
    dataKey: 'resultJson.result.bloodMeasureHigh',
    width: '220px'
  },
  {
    key: 'resultJson.result.bloodMeasureLow',
    title: '低压',
    dataKey: 'resultJson.result.bloodMeasureLow',
    width: '220px'
  },
  {
    key: 'resultJson.result.checkHeartRate',
    title: '心率',
    dataKey: 'resultJson.result.checkHeartRate',
    width: '220px'
  },
  {
    key: 'createdName',
    title: '签名',
    dataKey: 'createdName',
    width: '220px'
  }

]


const tempColumns = computed(() => {
  return currentType.value === 'BP' ? columnsBP : columns
})

const tempData = computed(() => {
  return XEUtils.filter(data.value, (item) => {
    return item.type === currentType.value
  })
})

onMounted(() => {
  reportQueryCenterApiByGet("/intergration/sannuo/bloodSugar", {
    patNo: props.patNo,
    times: props.times,
  }).then(res => {
    data.value = res.data
    patInfo.value = res.patInfo
  })
})
</script>

<template>
  <div style="height: 100% ; width: 100% ; display: flex;flex-flow: column;flex-wrap: wrap;">
    <div style="height: max-content">
      <div style="display: grid ; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ">
        <div>
          姓名：{{ patInfo.name }}
        </div>
        <div>性别：{{ patInfo.sex }}</div>
        <div>年龄：{{ patInfo.age }}</div>
        <div>科室：{{ patInfo.smallDeptName }}</div>
        <div>床号：{{ patInfo.bedNo }}</div>
        <div>住院号：{{ patInfo.inpatientNo }}</div>
      </div>
      <div>
        <el-select style="width: 90px;" v-model="currentType">
          <xc-el-option :data="typeList"/>
        </el-select>
      </div>
    </div>
    <div style="flex: 1">
      <cy-auto-size>
        <template #default="{width,height}">
          <el-table-v2 :data="tempData"
                       :height="height"
                       v-model:sort-state="sortState"
                       :width="width"
                       @column-sort="onSort"
                       :columns="tempColumns"/>
        </template>
      </cy-auto-size>
    </div>

  </div>

</template>

<style scoped lang="scss">

</style>
