<template>
  <el-container>
    <el-header height="36px" style="margin-top: 8px">
      <el-select v-model="type" style="width: 100px">
        <el-option v-for="item in types" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-input v-model="content" style="width: 170px" clearable :placeholder="placeHolder"></el-input>
      <el-date-picker
        v-model="datePeriod"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        style="width: 260px"
      ></el-date-picker>
      <el-button type="primary" icon="el-icon-search" style="margin-left: 20px" @click="queryIndex">查询</el-button>
      <el-button type="primary" icon="el-icon-printer" @click="doPrint">打印</el-button>
    </el-header>
    <el-main>
      <el-row :gutter="5">
        <el-col :span="6">
          <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="检验名称"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="18">
          <div id="reportDetail" style="width: 90%; height: 100%; padding: 0 30px; background-color: white">
            <h3 style="width: 100%; text-align: center; font-weight: bold; height: 30px; line-height: 30px">湖南泰和医院检查报告单</h3>
            <div style="width: 100%; margin-top: 15px; font-size: 12px">
              <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%">{{ 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>
          </div>
          <div style="position: absolute; width: 68%; bottom: 10px; left: 27.5%; right: 5%">
            <div id="footer">
              <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>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { computed, reactive, ref } from 'vue'
import { shortcuts } from '@/data/shortcuts'
import { queryInspectionDetail, queryInspectionsIndex } from '@/api/inspections'
import store from '@/store'
import { ElMessage } from 'element-plus'
import { initLodop, getLodop } from '@/utils/c-lodop'
export default {
  setup() {
    const type = ref(1)
    const types = initTypes()
    const content = ref(null)
    const datePeriod = ref(null)
    const placeHolder = computed(() => {
      return '请输入' + ptntType.value
    })
    const ptntType = computed(() => {
      if (type.value === 1) {
        return '住院号'
      } else if (type.value === 0) {
        return '门诊号'
      } else if (type.value === 3) {
        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)

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

    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) bacName.value = res.inspectionItems[0].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
              }
            }
          }
        })
      })
    }

    const doPrint = () => {
      initLodop()
      const mainInfo = document.getElementById('reportDetail').innerHTML
      const footer = document.getElementById('footer').innerHTML
      const LODOP = getLodop()
      LODOP.PRINT_INIT('')
      // LODOP.SET_PRINT_MODE('PRINT_PAGE_PERCENT', 'Full-Page') //整页缩放
      LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) //宽度溢出缩放

      // LODOP.SET_PRINT_PAGESIZE(3, 0, 20, 'A5')
      // LODOP.ADD_PRINT_HTM(0, 0, 520, 750, mainInfo)

      //ADD_PRINT_HTM(intTop,intLeft,intWidth,intHeight,strHtml)增加超文本项
      LODOP.SET_PRINT_PAGESIZE(3, 0, 20, 'A4')
      LODOP.ADD_PRINT_HTM(0, 0, '210mm', '267mm', mainInfo)
      LODOP.ADD_PRINT_HTM('118.5mm', 0, '210mm', '30mm', footer)

      LODOP.PREVIEW()
    }

    return {
      type,
      types,
      content,
      ptntType,
      placeHolder,
      datePeriod,
      shortcuts,
      halfSize,
      halfBacSize,
      queryIndex,
      tableHeight,
      inspectionIndex,
      inspectionDetail,
      queryDetail,
      antibioticResults,
      filterSex,
      filterAgeUnit,
      bacName,
      getItemAlert,
      doPrint,
    }
  },
}

function initTypes() {
  return [
    { code: 1, name: '住院号' },
    { code: 0, name: '门诊号' },
    { code: 3, name: '体检号' },
  ]
}

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>
