<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 }">
                <vxe-table :height="height"
                           border
                           class="hl-style"
                           header-row-class-name="padding_zero"
                           show-overflow
                           :column-config="{resizable: true}"
                           :row-config="{ height: 24}"
                           :row-class-name="rowClassName"
                           @cell-click="rowClick"
                           :data="listRef">
                    <vxe-column field="recDateStr" title="日期" width="80">
                        <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="体温">
                        <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="col2Am" width="40"/>
                        <vxe-column title="颜色" field="urineColor" width="40"/>
                        <vxe-column title="状态" 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 XcTableV3 from "@/components/xiao-chan/xc-table-v3/XcTableV3.vue";
import {XcColumn} from "@/components/xiao-chan/xc-table-v3/XcColumn";
import {patInfo} from './emr-tools-store'
import {stringIsBlank} from '@/utils/blank-utils'
import {stringNotBlank} from "@/utils/blank-utils";

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 = ''
    if (stringNotBlank(item.patientState)) {
        str += '病情:' + item.patientState
    }
    if (stringNotBlank(item.temperature1)) {
        str += '，' + '体温:' + item.temperature1 + item.temperature1Type
    }
    if (stringNotBlank(item.heart)) {
        str += '，' + '心率:' + item.heart
    }
    if (stringNotBlank(item.pulse1)) {
        str += '，' + '脉搏:' + item.pulse1
    }
    if (stringNotBlank(item.breathe1)) {
        str += '，' + '呼吸:' + item.breathe1
    }
    if (stringNotBlank(item.pressure1AmAndPm)) {
        str += '，' + '血压:' + item.pressure1AmAndPm
    }
    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.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 = () => {
    getYzTemperature(patInfo.value.inpatientNo, patInfo.value.admissTimes)
        .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(() => {
    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>
