<template>
  <page-layer>
    <template #aside>
      <el-table :data="inspectionIndex" :height="tableHeight" stripe highlight-current-row
                @row-click="queryDetail">
        <el-table-column prop="ordr_CREATE_DATE" label="报告时间" width="130"></el-table-column>
        <el-table-column prop="aply_CTNT" label="检验名称" width="170"></el-table-column>
      </el-table>
    </template>
    <template #main>
      <div id="reportDetail"
           style="position: relative; width: 90%; height: 96%; padding: 0 30px; background-color: white">
        <h3 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">
          长沙泰和医院检查报告单</h3>
        <div style="display: flex">
          <div style="width: 25%">姓名：{{ inspectionDetail.inspectionHeader.ptnt_NAME }}</div>
          <div style="width: 25%">性别：{{ filterSex(inspectionDetail.inspectionHeader.ptnt_SEX) }}</div>
          <div style="width: 25%">
            年龄：{{ inspectionDetail.inspectionHeader.ptnt_AGE }}
            {{ filterAgeUnit(inspectionDetail.inspectionHeader.ptnt_AGE_UNIT) }}
          </div>
          <div style="width: 25%">
            {{ ptntType }}：
            {{ inspectionDetail.inspectionHeader.ptnt_NO }}
          </div>
        </div>
        <div style="display: flex">
          <div style="width: 25%">科室：{{ inspectionDetail.inspectionHeader.dept_NAME }}</div>
          <div style="width: 25%">床号：{{ inspectionDetail.inspectionHeader.ptnt_BED_NO }}</div>
          <div style="width: 25%">标本类型：{{ inspectionDetail.inspectionHeader.smpl_NAME }}</div>
          <div style="width: 25%">
            <div>申请项目：{{ inspectionDetail.inspectionHeader.aply_CNTN.substring(0, 13) }}</div>
            <div>{{ inspectionDetail.inspectionHeader.aply_CNTN.substring(13) }}</div>
          </div>
        </div>
        <div style="margin: 5px 0; border-top: 1px solid gray"></div>
        <div>
          <div v-if="inspectionDetail.inspectionHeader.info_TYPE === '1'">
            <div style="display: inline-block; width: 49.7%; vertical-align: top">
              <div style="display: flex">
                <div style="width: 25%">检验项目</div>
                <div style="width: 16.66%">结果</div>
                <div style="width: 16.66%">单位</div>
                <div style="width: 16.66%">说明</div>
                <div style="width: 25%">参考值</div>
              </div>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <div v-for="(item, index) in inspectionDetail.inspectionItems.slice(0, halfSize)"
                   :key="index" style="display: flex">
                <div style="width: 25%">
                  <div>{{ item.itm_NAME.substring(0, 6) }}</div>
                  <div>{{ item.itm_NAME.substring(6) }}</div>
                </div>
                <div style="width: 16.66%">
                  <div>{{ item.itm_VALUE.substring(0, 6) }}</div>
                  <div>{{ item.itm_VALUE.substring(6) }}</div>
                  <div>{{ item.itm_STR_VALUE.substring(0, 6) }}</div>
                  <div>{{ item.itm_STR_VALUE.substring(6) }}</div>
                </div>
                <div style="width: 16.66%">{{ item.itm_UNIT }}</div>
                <div style="width: 16.66%">
                                    <span
                                        v-html="getItemAlert(item.itm_ALERT, item.itm_STR_VALUE, item.itm_VALUE)"></span>
                </div>
                <div style="width: 25%">{{ item.range }}</div>
              </div>
            </div>
            <div style="display: inline-block; width: 49.7%; vertical-align: top">
              <div style="display: flex">
                <div style="width: 25%">检验项目</div>
                <div style="width: 16.66%">结果</div>
                <div style="width: 16.66%">单位</div>
                <div style="width: 16.66%">说明</div>
                <div style="width: 25%">参考值</div>
              </div>
              <div style="margin: 5px 0; border-top: 1px solid gray"></div>
              <div v-for="(item, index) in inspectionDetail.inspectionItems.slice(halfSize)" :key="index"
                   style="display: flex">
                <div style="width: 25%">
                  <div>{{ item.itm_NAME.substring(0, 6) }}</div>
                  <div>{{ item.itm_NAME.substring(6) }}</div>
                </div>
                <div style="width: 16.66%">
                  <div>{{ item.itm_VALUE.substring(0, 6) }}</div>
                  <div>{{ item.itm_VALUE.substring(6) }}</div>
                  <div>{{ item.itm_STR_VALUE.substring(0, 6) }}</div>
                  <div>{{ item.itm_STR_VALUE.substring(6) }}</div>
                </div>
                <div style="width: 16.66%">{{ item.itm_UNIT }}</div>
                <div style="width: 16.66%">
                                    <span
                                        v-html="getItemAlert(item.itm_ALERT, item.itm_STR_VALUE, item.itm_VALUE)"></span>
                </div>
                <div style="width: 25%">{{ item.range }}</div>
              </div>
            </div>
          </div>
          <div v-if="inspectionDetail.inspectionHeader.info_TYPE === '2'">
            <div style="display: flex">
              <div style="width: 25%">检验项目</div>
              <div style="width: 75%">结果</div>
            </div>
            <div style="margin: 5px 0; border-top: 1px solid gray"></div>
            <div v-for="(item, index) in inspectionDetail.inspectionItems" :key="index"
                 style="display: flex">
              <div style="width: 25%">{{ item.itm_NAME }}</div>
              <div style="width: 75%">{{ item.itm_STR_VALUE || item.itm_VALUE || bacName }}</div>
            </div>
            <div style="margin: 0 30px" v-if="halfBacSize > 0">
              <div style="display: inline-block; width: 49.7%; vertical-align: top">
                <div style="display: flex">
                  <div style="width: 33.33%">抗菌药物</div>
                  <div style="width: 33.33%">抗菌药物编码</div>
                  <div style="width: 16.66%">MIC值</div>
                  <div style="width: 16.66%">敏感性</div>
                </div>
                <div style="margin: 5px 0; border-top: 1px solid gray"></div>
                <div style="display: flex"
                     v-for="(bac, index) in antibioticResults.slice(0, halfBacSize)" :key="index">
                  <div style="width: 33.33%">
                    <div>{{ bac.anti_NAME_CN.substring(0, 6) }}</div>
                    <div>{{ bac.anti_NAME_CN.substring(6) }}</div>
                  </div>
                  <div style="width: 33.33%">{{ bac.anti_ABB }}</div>
                  <div style="width: 16.66%">{{ bac.anti_MIC }}</div>
                  <div style="width: 16.66%">{{ bac.anti_VALUE }}</div>
                </div>
              </div>
              <div style="display: inline-block; width: 47%; vertical-align: top">
                <div style="display: flex">
                  <div style="width: 33.33%">抗菌药物</div>
                  <div style="width: 33.33%">抗菌药物编码</div>
                  <div style="width: 16.66%">MIC值</div>
                  <div style="width: 16.66%">敏感性</div>
                </div>
                <div style="margin: 5px 0; border-top: 1px solid gray"></div>
                <div style="display: flex" v-for="(bac, index) in antibioticResults.slice(halfBacSize)"
                     :key="index">
                  <div style="width: 33.33%">
                    <div>{{ bac.anti_NAME_CN.substring(0, 6) }}</div>
                    <div>{{ bac.anti_NAME_CN.substring(6) }}</div>
                  </div>
                  <div style="width: 33.33%">{{ bac.anti_ABB }}</div>
                  <div style="width: 16.66%">{{ bac.anti_MIC }}</div>
                  <div style="width: 16.66%">{{ bac.anti_VALUE }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="position: absolute; left: 30px; right: 30px; bottom: 0">
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <div style="display: flex">
            <div style="width: 33.33%">接收时间：{{ inspectionDetail.inspectionHeader.aply_DATE }}</div>
            <div style="width: 33.33%">检验时间：{{ inspectionDetail.inspectionHeader.ordr_CREATE_DATE }}</div>
            <div style="width: 33.33%">报告时间：{{ inspectionDetail.inspectionHeader.audt_TIME }}</div>
          </div>
          <div style="display: flex">
            <div style="width: 33.33%">送检医生：{{ inspectionDetail.inspectionHeader.test_USR_NAME }}</div>
            <div style="width: 33.33%">检验人：{{ inspectionDetail.inspectionHeader.ordr_USR_NAME }}</div>
            <div style="width: 33.33%">审核人：{{ inspectionDetail.inspectionHeader.audt_USR_NAME }}</div>
          </div>
          <div style="margin: 5px 0; border-top: 1px solid gray"></div>
          <div style="width: 100%; text-align: center; font-weight: bold; height: 30px; font-size: 12px">
            ***此结果仅对所检测的标本负责***
            <span style="margin-left: 10px; font-size: 12px">备注：升高(↑)，降低(↓)，阳性(+)，阴性(-)</span>
          </div>
        </div>
      </div>
    </template>
  </page-layer>
</template>

<script setup name="inspectionReport">
import {computed, onMounted, reactive, ref, watch} from 'vue'
import {queryInspectionDetail, queryInspectionsIndex} from '@/api/inspections'
import store from '@/store'
import {clone} from '@/utils/clone'
import {ElMessage} from 'element-plus'
import PageLayer from "@/layout/PageLayer";

const props = defineProps({
  jyjcInfo: {
    type: Object,
    required: true,
  }
})
const params = props.jyjcInfo
const ptntType = computed(() => {
  if (params.type === 1) {
    return '住院号'
  } else if (params.type === 0) {
    return '门诊号'
  }
  return ''
})
const windowSize = store.state.app.windowSize
const tableHeight = windowSize.h - 45
const inspectionIndex = ref([])
const bacName = ref(null)
const antibioticResults = ref([])
const inspectionDetail = reactive({
  inspectionHeader: {
    aply_CNTN: '',
  },
  inspectionItems: [],
})
const halfSize = ref(0)
const halfBacSize = ref(0)

onMounted(() => {
  queryIndex()
})

const queryIndex = () => {
  if (!params.content) {
    ElMessage({
      message: '请输入患者' + ptntType.value + '。',
      type: 'warning',
      duration: 2000,
      showClose: true,
    })
    return
  }
  if (!params.start) {
    ElMessage({
      message: '请选择日期范围。',
      type: 'warning',
      duration: 2000,
      showClose: true,
    })
    return
  }
  const param = clone(params)
  queryInspectionsIndex(param).then((res) => {
    inspectionIndex.value = res
    if (inspectionIndex.value.length > 0) {
      nextTick(() => {
        queryDetail(inspectionIndex.value[0])
      })
    }
  })
}

const queryDetail = (row) => {
  queryInspectionDetail(row.ordr_ID).then((res) => {
    halfSize.value = Math.ceil(res.inspectionItems.length / 2)
    inspectionDetail.inspectionHeader = res.inspectionHeader
    inspectionDetail.inspectionItems = res.inspectionItems
    if (res.inspectionItems.length > 0) {
      res.inspectionItems.forEach((item) => {
        if (item.itm_NAME.indexOf('培养') > -1) {
          bacName.value = item.itm_STR_VALUE
        }
      })
    }
    res.inspectionItems.forEach((item) => {
      if (item.bacteriaResults && item.bacteriaResults.length > 0) {
        if (item.bacteriaResults[0].antibioticResults != null) {
          const bacSize = Math.ceil(item.bacteriaResults[0].antibioticResults.length / 2)
          if (bacSize > halfBacSize.value) {
            halfBacSize.value = bacSize
            antibioticResults.value = item.bacteriaResults[0].antibioticResults
          }
        }
      }
    })
  })
}

function filterSex(val) {
  switch (val) {
    case '0':
      return '未填'
    case '1':
      return '男'
    case '2':
      return '女'
    case '3':
      return '未知'
  }
  return ''
}

function filterAgeUnit(val) {
  switch (val) {
    case '0':
      return '岁'
    case '1':
      return '月'
    case '2':
      return '天'
    case '3':
      return '时'
  }
  return ''
}

function getItemAlert(val, strValue, value) {
  if (strValue !== '' || value === '') return ''
  switch (val) {
    case 'L':
      return '<span style="color:#F56C6C;font-weight:bold">↓</span>'
    case 'H':
      return '<span style="color:#F56C6C;font-weight:bold">↑</span>'
  }
  return '<span style="color:#67C23A;font-weight:bold">正常</span>'
}
</script>
