<template>
  <el-container>
    <el-main :style="zuJianDaXiao">
      纸张：
      <el-radio v-model="zhiZhang" :label="1" size="large">A4</el-radio>
      <el-radio v-model="zhiZhang" :label="2" size="large">A5</el-radio>
      <el-button @click="daYing">打印</el-button>
      <div id="daYing">
        <div style="width:394.875pt;height:760px;background-color: white;font-size: 13px">
          <svg id="barcode"></svg>
          <div style="text-align: center;font-size: 25px;width:100%;height: 50px;margin-top: 3.75pt ">长沙泰和医院</div>
          <div style="text-align: center;font-size: 16px;margin-top: 7px;">{{ biaoTi }}</div>
          <div class="tanXingHeZiHeng" style="width: 520px;margin:1px auto">
            <div class="wen-zi">
              <div>病人身份：</div>
              <div>{{ huanZheXinXi.responceTypeName }}</div>
            </div>

            <div class="wen-zi">
              <div>单号：</div>
              <div>{{ huanZheXinXi.reqNo }}</div>
            </div>

            <div class="wen-zi">
              <div>
                急诊：
              </div>
              <div>
                <div style="border: 1px solid #000;width: 20px;height: 20px;margin: -10px 10px auto auto">
                  <span v-if="jzFlag" style="font-size: 27px;">√</span>
                </div>
              </div>
            </div>
          </div>

          <div style="border: 1px solid #000;border-bottom: 0;margin: 0 3.75pt 0 3.75pt;">
            <div class="tanXingHeZiShu">
              <div class="tanXingHeZiHeng">
                <div class="wen-zi">
                  <div>住院号：</div>
                  <div>{{ huanZheXinXi.inpatientNo }}</div>
                </div>
                <div class="wen-zi">
                  <div>姓名：</div>
                  <div>{{ huanZheXinXi.pname }}</div>
                </div>
                <div class="wen-zi">
                  <div>性别：</div>
                  <div>{{ cptSex(huanZheXinXi.sex) }}</div>
                </div>
                <div class="wen-zi">
                  <div>年龄：</div>
                  <div>{{ huanZheXinXi.page }}</div>
                </div>
                <div class="wen-zi">
                  <div>床号：</div>
                  <div>{{ huanZheXinXi.bedNo }}</div>
                </div>
              </div>
              <div class="tanXingHeZiHeng" style="margin-bottom: 3.75pt">
                <div class="wen-zi">
                  <div>病人住址：</div>
                  <div>{{ huanZheXinXi.homeStreet }}</div>
                </div>
                <div class="wen-zi">
                  <div>联系电话：</div>
                  <div>{{ huanZheXinXi.homeTel }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="zhu-yao-ge-zi">
            <div class="zuo-ge-zi">
            <span>
            病史摘要<br>
            申请检查
            要求：
            </span>
            </div>
            <div class="you-ge-zi">
              {{ huanZheXinXi.reqComment }}
            </div>
          </div>
          <div class="zhu-yao-ge-zi">
            <div class="zuo-ge-zi">
              <span>体征</span>
            </div>
            <div class="you-ge-zi">
              {{ huanZheXinXi.reqTzComment }}
            </div>
          </div>
          <div class="zhu-yao-ge-zi">
            <div class="zuo-ge-zi">
            <span>
              相关辅检<br>
              结果
            </span>
            </div>
            <div class="you-ge-zi">
              {{ huanZheXinXi.reqOtherResult }}
            </div>
          </div>
          <div class="zhu-yao-ge-zi">
            <div class="zuo-ge-zi">
            <span>
              临床诊断
            </span>
            </div>
            <div class="you-ge-zi">
              {{ huanZheXinXi.diagText }}
            </div>
          </div>
          <div class="zhu-yao-ge-zi">
            <div class="zuo-ge-zi">
            <span>
              检查部位<br>
              及项目
            </span>
            </div>
            <div class="you-ge-zi">
              {{ huanZheXinXi.orderName }}
            </div>
          </div>
          <div class="zhu-yao-ge-zi" style="border-bottom: 1px solid #000000">
            <div class="zuo-ge-zi" style="height: 50px">
            </div>
            <div class="you-ge-zi">
              <div class="tanXingHeZiShu">
                <div class="tanXingHeZiHeng">
                  <div class="wen-zi">
                    <div>申请科室：</div>
                    <div>{{ huanZheXinXi.reqDeptName }}</div>
                  </div>
                  <div class="wen-zi">
                    <div>申请医生：</div>
                    <div style="width: 100px;">{{ huanZheXinXi.reqDoctorName }}</div>
                  </div>
                </div>
                <div class="tanXingHeZiHeng">
                  <div class="wen-zi">
                    <div>申请日期：</div>
                    <div>{{ huanZheXinXi.reqDate }}</div>
                  </div>
                  <div class="wen-zi">
                    <div>医师签字：</div>
                    <div style="width: 100px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div style="margin: 1px  auto auto 20px">
            注意事项：
            <pre>{{ zhuYiShiXiang }}</pre>
          </div>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script setup name="DaYingJianCha">
import {computed, onMounted, ref} from "vue";
import JsBarcode from "jsbarcode";
import {stringIsBlank, stringNotBlank} from "@/utils/blank-utils";
import {cptSex} from "@/utils/computed";
import {getLodop, initLodop} from "@/utils/c-lodop";
import {ElMessage} from "element-plus";


const props = defineProps({
  width: {
    type: Number,
    default: 560,
  },
  height: {
    type: Number,
    default: 500,
  }
})

const css = `*{font-size:9pt}.tanXingHeZiHeng{display:flex;justify-content:space-between;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiShu{display:flex;flex-direction:column}.wen-zi{display:flex;margin-top:3pt}.wen-zi div:first-child{display:flex;flex-direction:row;justify-content:center}.wen-zi div:nth-child(2){margin-left:3pt;display:table}.zhu-yao-ge-zi{border:1px solid #000;border-bottom:0;margin:0 3.75pt 0 3.75pt;display:flex}.you-ge-zi{width:100%;word-wrap:break-word;padding:5px}.zuo-ge-zi span{margin:5px auto}.zuo-ge-zi{width:82.5pt;height:70px;border-right:1px solid #000;text-align:center;display:flex;padding:0 5px}pre{white-space:pre-wrap;word-wrap:break-word;margin:0;padding:0}#daYing{position:relative}#barcode{width:150px;position:absolute;z-index:222}`
const huanZheXinXi = ref({})
const biaoTi = ref('检查申请单')
// 主要事项
const zhuYiShiXiang = ref('')
const jzFlag = ref(false)

const zhiZhang = ref(2)

const jieShouShuJu = (val) => {
  huanZheXinXi.value = val.shuJu
  biaoTi.value = val.biaoTi
  zhuYiShiXiang.value = val.zhuYiShiXiang
  jzFlag.value = false
  if (stringNotBlank(val.shuJu.jzFlag)) {
    if (val.shuJu.jzFlag === '1') {
      jzFlag.value = true
    }
  }
  JsBarcode('#barcode', val.shuJu.inpatientNo, {
    lineColor: '#333', //线条颜色
    width: 2, //线宽
    height: 25, //条码高度
    displayValue: true, //是否显示文字信息
  })
}

const zuJianDaXiao = computed(() => {
  return {
    width: props.width + 'px',
    height: props.height + 'px',
    overflow: 'auto'
  }
})

const daYing = () => {
  if (!huanZheXinXi) {
    return ElMessage.error('请先选择患者')
  }
  let LODOP = getLodop()
  // A5: 148毫米 × 210毫米 = 559.37px * 793.70px
  const strFormHtml = '<style>' + css + '</style>' + '<body>' + document.getElementById('daYing').innerHTML + '</body>';
  LODOP.PRINT_INIT(0, 0, 522, 333, '检查申请') // 初始化打印机 名字
  // LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT", "Full-Width");
  // 整宽不变形
  if (zhiZhang.value === 1) {
    LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4')   // 设置纸张大小  A
  } else {
    LODOP.SET_PRINT_PAGESIZE(1, 0, 0, 'A5')
  }
  LODOP.ADD_PRINT_HTM(0, 0, '100%', '100%', strFormHtml) //  参数分别为顶边距，左边距，宽，高，打印项内容。
  // LODOP.PRINT_DESIGN()
  LODOP.PREVIEW() // 关闭
}

onMounted(() => {
  initLodop()
  JsBarcode('#barcode', '000000', {
    lineColor: '#333', //线条颜色
    width: 2, //线宽
    height: 25, //条码高度
    displayValue: true, //是否显示文字信息
  })
})

defineExpose({
  jieShouShuJu,
  daYing
})


</script>

<style scoped>
* {
  font-size: 9pt;
}

.tanXingHeZiHeng {
  display: flex;
  justify-content: space-between;
  margin-top: 3pt;
  padding: 0 3.75pt;
}

.tanXingHeZiShu {
  display: flex;
  flex-direction: column;
}

.wen-zi {
  display: flex;
  margin-top: 3pt;
}

.wen-zi div:first-child {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.wen-zi div:nth-child(2) {
  margin-left: 3pt;
  display: table;
}

.zhu-yao-ge-zi {
  border: 1px solid #000;
  border-bottom: 0;
  margin: 0 3.75pt 0 3.75pt;
  display: flex;
}

.you-ge-zi {
  width: 100%;
  word-wrap: break-word;
  padding: 5px;
}

.zuo-ge-zi span {
  margin: 5px auto;
}

.zuo-ge-zi {
  width: 82.5pt;
  height: 70px;
  border-right: 1px solid #000;
  text-align: center;
  display: flex;
  padding: 0 5px
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  padding: 0;
}

#daYing {
  position: relative;
}

#barcode {
  width: 150px;
  position: absolute;
  z-index: 222;
}

</style>
