<template>
  <div style="height: 10%;font-size: 12px;display: flex">
    <div style="width: 70%;color: blue;border: 1px solid #000;border-radius: 5px;padding: 0 5px">
      {{ otherInfo }}
    </div>
    <div style="flex: 1;color: red">
      注意：体温单位为℃脉搏单位为”次m1n”，血压单位为"mmg”,Sp02
      单位为“%”，体重单位为”kg”，呼吸单位为“次/min”，血糖单位
      ”mo1/1”
    </div>
  </div>
  <div style="height: 90%">
    <el-auto-resizer>
      <template #default="{ height, width }">
        <div style="height: 40px; ">
          <el-date-picker v-model="dateRange"
                          type="daterange"
                          format="YYYY-MM-DD"
                          value-format="YYYY-MM-DD"
                          :shortcuts="shortcuts"/>
          <el-button @click="query">查询</el-button>
        </div>
        <vxe-table :height="height - 40"
                   border
                   :scroll-x="{gt: 20}"
                   :scroll-y="{gt: 50,enabled: true}"
                   :column-config="{resizable: true}"
                   :row-config="{ height: 24}"
                   class="vxe-padding_zero hl-style"
                   header-row-class-name="padding_zero"
                   :row-class-name="rowClassName"
                   @cell-click="rowClick"
                   show-header-overflow
                   show-overflow
                   :data="listRef">
          <vxe-column field="recDateStr" title="日期" width="80" sortable>
            <template #default="{row,rowIndex}">
              <component :is="dateDisplay(row,row.recDateStr,rowIndex)"/>
            </template>
          </vxe-column>
          <vxe-column title="时间" width="40">
            <template #default="{row,rowIndex}">
              <component :is="timePlsy(row,row.recTimeStr,rowIndex)"/>
            </template>
          </vxe-column>
          <vxe-column field="patientState" title="病情" width="50"/>
          <vxe-column title="体温" width="50">
            <template #default="{row}">
              <template v-if="stringIsBlank(row.temperature1)">
                <span></span>
              </template>
              <template v-else>
                {{ row.temperature1 }}{{ row.temperature1Type }}
              </template>
            </template>
          </vxe-column>

          <vxe-colgroup title="次/min">
            <vxe-column field="heart" title="心率" width="40"/>
            <vxe-column field="pulse1" title="脉搏" width="40"/>
          </vxe-colgroup>

          <vxe-column field="breathe1" title="呼吸" width="40"/>
          <vxe-column field="pressure1AmAndPm" title="血压" width="60"/>
          <vxe-column field="spo2" title="Sp02%" width="50"/>
          <vxe-column field="mind" title="意识" width="40"/>

          <vxe-colgroup title="入量">
            <vxe-column field="col1Name" title="名称" width="100"/>
            <vxe-column field="col1Am" title="ml" width="40"/>
          </vxe-colgroup>

          <vxe-colgroup title="出量">
            <vxe-column field="col2Name" title="名称" width="80"/>
            <vxe-column field="col2Am" title="ml" width="40"/>
            <vxe-column title="颜色" field="urineColor" width="40"/>
            <vxe-column title="状态" field="shitShape" width="40"/>
          </vxe-colgroup>

          <vxe-column field="skin" title="皮肤" width="40"/>


          <vxe-colgroup title="管道">
            <vxe-column field="tubesName" title="管道名称" width="90"/>
            <vxe-column field="tubesStatus" title="管道情况" width="90"/>
          </vxe-colgroup>

          <vxe-column field="glu" title="血糖" width="40"/>
          <vxe-column field="otherInfo" title="护理措施及效果" min-width="250"/>

          <vxe-column field="userid" title="护士" width="70">
            <template #default="{row,rowIndex}">
              <component :is="timePlsy(row,row.userid , rowIndex)"/>
            </template>
          </vxe-column>

        </vxe-table>


      </template>
    </el-auto-resizer>
  </div>
</template>

<script setup name='EmrYzTemperature' lang="tsx">
import {Ref, ref, onMounted} from "vue";
import {getYzTemperature} from "@/api/zhu-yuan-yi-sheng/emr-patient";
import {stringIsBlank} from '@/utils/blank-utils';
import {stringNotBlank} from "@/utils/blank-utils";
import {shortcuts} from '@/data/shortcuts'
import {getServerDateApi} from "@/api/public-api";
import moment from "moment";
import {getFormatDatetime, currentAndAFewDaysAgo} from '@/utils/date'


const props = defineProps({
  patNo: String,
  times: Number
})

const dateRange = ref([])


const dateDisplay = (row, cellData, index) => {
  let temp = listRef.value[index - 1]
  if (temp === null || typeof temp === 'undefined') {
    return <span>{cellData}</span>
  }
  if (row.tempDate === temp.tempDate) {
    return <span></span>
  } else if (cellData === temp.recDateStr) {
    return <span></span>
  } else {
    return <span>{cellData}</span>
  }
}

const timePlsy = (row, cellData, index) => {
  let temp = listRef.value[index - 1]
  if (temp === null || typeof temp === 'undefined') {
    return <span>{cellData}</span>
  }
  if (row.tempDate === temp.tempDate) {
    return <span></span>
  } else {
    return <span>{cellData}</span>
  }
}

const drawer: Ref<boolean> = ref(false)
const listRef: Ref = ref([])
const mapRef: Ref = ref({})
const key: Ref<string> = ref('')
const otherInfo: Ref<string> = ref('')

const rowClick = ({row}) => {
  key.value = row.tempDate
  let item = mapRef.value[key.value]
  let str = '护理记录时间：' + item.tempDate

  if (stringNotBlank(item.patientState)) {
    str += '病情:' + item.patientState
  }
  if (stringNotBlank(item.temperature1)) {
    str += '，' + '体温:' + item.temperature1 + item.temperature1Type + '°C'
  }
  if (stringNotBlank(item.heart)) {
    str += '，' + '心率:' + item.heart + '次/min'
  }
  if (stringNotBlank(item.pulse1)) {
    str += '，' + '脉搏:' + item.pulse1 + '次/min'
  }
  if (stringNotBlank(item.breathe1)) {
    str += '，' + '呼吸:' + item.breathe1 + '次/min'
  }
  if (stringNotBlank(item.pressure1AmAndPm)) {
    str += '，' + '血压:' + item.pressure1AmAndPm + 'mmHg'
  }
  if (stringNotBlank(item.spo2)) {
    str += '，' + 'Sp02%:' + item.spo2 + '%'
  }
  if (stringNotBlank(item.mind)) {
    str += '，' + '意识:' + item.mind
  }
  if (stringNotBlank(item.col1Name)) {
    str += '，' + '入量名称:' + item.col1Name
  }
  if (stringNotBlank(item.col1Am)) {
    str += '，' + '入量ml:' + item.col1Am
  }
  if (stringNotBlank(item.col2Name)) {
    str += '，' + '出量名称:' + item.col2Name
  }
  if (stringNotBlank(item.col2Am)) {
    str += '，' + '出量ml:' + item.col2Am
  }
  if (stringNotBlank(item.urineColor)) {
    str += '，' + '颜色:' + item.urineColor
  }
  if (stringNotBlank(item.shitShape)) {
    str += '，' + '状态:' + item.shitShape
  }
  if (stringNotBlank(item.skin)) {
    str += '，' + '皮肤:' + item.skin
  }
  if (stringNotBlank(item.tubesName)) {
    str += '，' + '状态:' + item.tubesName
  }
  if (stringNotBlank(item.tubesStatus)) {
    str += '，' + '管道名称:' + item.tubesStatus
  }
  if (stringNotBlank(item.glu)) {
    str += '，' + '管道情况:' + item.glu
  }
  if (stringNotBlank(mapRef.value[key.value]?.otherInfo)) {
    str += '护理措施及效果：' + mapRef.value[key.value]?.otherInfo
  }
  otherInfo.value = str
}
const query = () => {

  let param = {
    startTime: dateRange.value[0],
    endTime: dateRange.value[1],
    patNo: props.patNo,
    times: props.times
  }

  getYzTemperature(param)
      .then((res) => {
        let {list, map} = res
        drawer.value = true
        listRef.value = list
        mapRef.value = map
      })
}

const rowClassName = ({row}) => {
  if (key.value === row.tempDate) {
    return 'current row_padding_zero'
  }
  return 'row_padding_zero'
}

onMounted(async () => {
  dateRange.value = await currentAndAFewDaysAgo()
  query()
})
</script>

<style lang="scss">
.padding_zero th .vxe-cell {
  padding: 0 !important;
}

.row_padding_zero td .vxe-cell {
  padding: 0 !important;
}

.hl-style .current {
  background-color: #187;
  color: #fff;
}
</style>
