<template>
  <div :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:393pt;height:760px;background-color: white;font-size: 13px">
        <div style="height: 20px"></div>
        <h1 style="text-align: center;font-size: 18px ">长沙泰和医院</h1>
        <div style=" margin-left: 40px"><span>申请单号：{{ data.recordId }}</span></div>
        <div style="text-align: center;width: 100%;margin-top: -15px;font-size: 14px">手术申请单</div>
        <div style=" margin-left: 40px"><span>病房：{{ data.deptCodeName }}</span></div>
        <div style="text-align: center;width: 100%;margin-top: -15px;font-size: 14px">
          急诊:<span v-show="data.urgentClinicFlag === '1'">√</span>
        </div>
        <!--    患者信息    -->
        <div style="border: 1px solid #000;margin: 5px;height: 550px">

          <div class="tanXingHeZiHeng">
            <div class="wen-zi">
              <div>住院号：</div>
              <div>{{ data.inpatientNo }}</div>
            </div>

            <div class="wen-zi">
              <div>床号：</div>
              <div>{{ data.bedNo }}</div>
            </div>

            <div class="wen-zi">
              <div>姓名：</div>
              <div>{{ data.patientName }}</div>
            </div>

            <div class="wen-zi">
              <div>性别：</div>
              <div>{{ cptSex(data.sex) }}</div>
            </div>

            <div class="wen-zi">
              <div>年龄：</div>
              <div>{{ data.age }}</div>
            </div>
          </div>

          <div class="wen-zi">
            <div>术前诊断：</div>
            <div>{{ data.diagBeforeOp }}</div>
          </div>

          <div class="wen-zi">
            <div>手术名称：</div>
            <div>{{ data.opName }}</div>
          </div>

          <div class="wen-zi">
            <div>麻醉方法：</div>
            <div>{{ data.hocusCodeName }}</div>
          </div>

          <div class="tanXingHeZiHeng" style="border-bottom: 1px solid #000">
            <div class="wen-zi">
              <div>手术等级(术前)：</div>
              <div>{{ data.opScaleName }}</div>
            </div>

            <div class="wen-zi">
              <div>手术等级(术后):</div>
              <div style="width: 160px;">

              </div>
            </div>
          </div>
          <div class="wen-zi">
            <div>主刀医生:</div>
            <div>{{ data.doctorZdName }}</div>
          </div>

          <div class="tanXingHeZiHeng2">
            <div class="wen-zi">
              <div>第一助手:</div>
              <div style="width: 120px">{{ data.doctor1Name }}</div>
            </div>
            <div class="wen-zi">
              <div>第二助手:</div>
              <div style="width: 120px">{{ data.doctor2Name }}</div>
            </div>
          </div>

          <div class="tanXingHeZiHeng2">
            <div class="wen-zi">
              <div>第三助手:</div>
              <div style="width: 120px">{{ data.doctor3Name }}</div>
            </div>
            <div class="wen-zi">
              <div>麻醉医生:</div>
              <div style="width: 120px">{{ data.doctorMzName }}</div>
            </div>
          </div>

          <div class="tanXingHeZiHeng2" style="border-bottom: 1px solid #000">
            <div class="wen-zi">
              <div>器械护士:</div>
              <div style="width: 120px">{{ data.nurseQxName }}</div>
            </div>
            <div class="wen-zi">
              <div>巡回护士:</div>
              <div style="width: 120px">{{ data.nurseXhName }}</div>
            </div>
          </div>

          <div class="tanXingHeZiHeng2">
            <div class="wen-zi">
              <div>申请日期:</div>
              <div style="width: 120px">{{ data.applyDate }}</div>
            </div>
            <div class="wen-zi">
              <div>手术时间:</div>
              <div style="width: 120px">{{ data.opDatetime }}</div>
            </div>
          </div>

          <div class="tanXingHeZiHeng2" style="border-bottom: 1px solid #000">
            <div class="wen-zi">
              <div>住院医师:</div>
              <div style="width: 120px">{{ data.referPhysicianName }}</div>
            </div>
            <div class="wen-zi">
              <div>科主任:</div>
              <div style="width: 120px">{{ data.deptDirectorName }}</div>
            </div>
          </div>

          <div>
            <div style="margin: 10px;">附注说明(包括传染疾病类型注明等):</div>
            <div style="width: 480px;height: 120px; margin:10px;overflow: hidden">
              {{ data.remark }}
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="DaYingShouShuShengQingDan">
import {computed, onMounted, ref} from "vue";
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 zuJianDaXiao = computed(() => {
  return {
    width: props.width + 'px',
    height: props.height + 'px',
    overflow: 'auto'
  }
})
const zhiZhang = ref(2)
const data = ref({})
const css = '*{font-size:16px}.tanXingHeZiHeng{display:flex;justify-content:space-between;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiHeng2{display:flex;margin-top:3pt;padding:0 3.75pt}.tanXingHeZiShu{display:flex;flex-direction:column}.wen-zi{display:flex;margin-top:3pt;margin-left:5px;height:25px}.wen-zi div:first-child{display:flex;flex-direction:row;justify-content:center;text-align:right}.wen-zi div:nth-child(2){margin-left:3pt;display:table}.ge-zi{display:table-column}'

const daYing = () => {
  if (!data) {
    return ElMessage.error('请先选择患者')
  }

  let LODOP = getLodop()
  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()
})

defineExpose({
  daYing,
  data
})

</script>

<style scoped>
* {
  font-size: 16px;
}

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

.tanXingHeZiHeng2 {
  display: flex;
  margin-top: 3pt;
  padding: 0 3.75pt;
}

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

.wen-zi {
  display: flex;
  margin-top: 3pt;
  margin-left: 5px;
  height: 25px;
}

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

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

.ge-zi {
  display: table-column;
}


</style>
