<template>
  <page-layer>
    <template #header>
      住院号:
      <el-input style="width: 120px" v-model="patNo" @blur="inputBlur"/>
      住院次数:
      <el-input-number v-model="times" :min="0"/>
      <el-button>查询</el-button>
      <el-button @click="print">打印</el-button>
    </template>
    <template #main>
      <div style="width: 1122px;height: 793px" ref="printDiv">
        <table style="width: 100%;max-height:  793px">
          <thead>
          <tr>
            <th colspan="23">泰和医院内分泌科血糖单</th>
          </tr>
          <tr>
            <th colspan="23">
              <div style="width: 100%;display: flex;justify-content: space-between">

                <div>
                  床号: {{ patientInfo?.bedNo }}
                </div>

                <div>
                  姓名: {{ patientInfo?.name }}
                </div>

                <div>
                  年龄: {{ patientInfo?.age }}
                </div>

                <div>
                  住院号:{{ patientInfo?.inpatientNo }}
                </div>

                <div>
                  单位: mmol/l
                </div>

              </div>
            </th>
          </tr>

          <tr class="tr">
            <th style="width: 110px">日期</th>
            <th style="width: 30px">空腹</th>
            <th>时间签名</th>
            <th>早餐后</th>
            <th>时间签名</th>
            <th>中餐前</th>
            <th>时间签名</th>
            <th>中餐后</th>
            <th>时间签名</th>
            <th>晚餐前</th>
            <th>时间签名</th>
            <th>晚餐后</th>
            <th>时间签名</th>
            <th style="width: 30px">零点</th>
            <th>时间签名</th>
            <th style="width: 30px">三点</th>
            <th>时间签名</th>
            <th>随机血糖</th>
            <th>时间签名</th>
            <th>随机血糖</th>
            <th>时间签名</th>
            <th>随机血糖</th>
            <th>时间签名</th>
          </tr>
          </thead>
          <tbody>

          <tr v-for="item in data">
            <td style="padding: 10px">
              {{ item.date }}
            </td>
            <blood-sugar-table v-for="index in 11"
                               @right-click="rightClick"
                               :data="htmlTd(index - 1,item.data)"/>
          </tr>
          </tbody>
        </table>
      </div>
      <right-click-menu :mouse-position="position" closeManually ref="RightClickMenuRef">
        <div>
          {{ position.data.timecodeName }}
          <el-form label-width="70px">
            <el-form-item label="医生签名">
              <SelectStaffCode v-model="position.data" :name="['nurseId', 'nurseIdName']"/>
            </el-form-item>

            <el-form-item label="结果">
              <el-input style="width: 120px;" v-model="position.data.testResult"/>
            </el-form-item>

            <el-form-item label="时间">
              <el-time-picker
                  format="HH:mm:ss"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  v-model="position.data.testTime"/>
            </el-form-item>

          </el-form>

          <el-button @click="confirmTheChanges">确认</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </right-click-menu>
    </template>
  </page-layer>
</template>

<script setup name='BloodSugarQuery'>
import {
  getPatientLoodSugar,
  getThePatienMaxHospitalizationTimes,
  modifyPatientBloodGlucoseInfo
} from "@/api/blood-sugar/query";
import BloodSugarTable from "@/components/blood-sugar-table/BloodSugarTable.vue";
import {getLodop, initLodop} from "@/utils/c-lodop";
import RightClickMenu from "@/components/menu-item/RightClickMenu.vue";
import SelectStaffCode from "@/components/SelectStaffCode.vue";
import {clone} from "@/utils/clone";
import {getFormatDatetime} from "@/utils/date";
import PageLayer from "@/layout/PageLayer";

let patNo = $ref('0412588')
let times = $ref(1)

const queryPatientSBloodSugarInformation = () => {
  getPatientLoodSugar(patNo, times).then((res) => {
    data = res.bloodSugarData
    patientInfo = res.patientInfo
  })
}

let data = $ref()
let patientInfo = $ref()

let thead = ["空腹", "早餐后", "中餐前", "中餐后", "晚餐前", "晚餐后", "零点", "三点", "随机血糖1", "随机血糖2", "随机血糖3"]

const inputBlur = () => {
  if (patNo) {
    getThePatienMaxHospitalizationTimes(patNo).then((res) => {
      console.log(res)
    })
  }
}

let position = $ref()
const RightClickMenuRef = ref()
let tempBloodSugarData = $ref()
const rightClick = (val, event) => {
  position = {
    event: event,
    data: val
  }
  tempBloodSugarData = clone(val)
}

const confirmTheChanges = () => {
  modifyPatientBloodGlucoseInfo(position.data).then((res) => {
    position.data.formatTestTime = getFormatDatetime(position.data.testTime, 'HH:mm')
    RightClickMenuRef.value.close()
  })
}

const cancel = () => {
  position.data.nurseId = tempBloodSugarData.nurseId
  position.data.nurseIdName = tempBloodSugarData.nurseIdName
  position.data.testResult = tempBloodSugarData.testResult
  position.data.testTime = tempBloodSugarData.testTime
  RightClickMenuRef.value.close()
}

const htmlTd = (index, data) => {
  return data[thead[index]]
}

const printDiv = ref()

const print = () => {
  let LODOP = getLodop()
  let style = `<style>td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px 0;
}

.tr th {
  border: 1px solid #000;
  text-align: center;
}

table, tr, td {
  border-collapse: collapse;
}</style>`

  const strHtml = style + '<body>' + printDiv.value.innerHTML + '</body>'
  LODOP.PRINT_INIT('泰和医院内分泌科血糖单') // 初始化打印机 名字
  LODOP.SET_PRINT_PAGESIZE(2, 0, 0, 'A4') // 设置纸张大小  A4
  LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
  LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', strHtml) //要打印的内容
  LODOP.SET_PRINT_STYLE('ItemType', 3) //设置对象风格
  LODOP.ADD_PRINT_TEXT('290mm', '190mm', '20mm', '2mm', '第#页/共&页') //增加纯文本项
  LODOP.PREVIEW() // 关闭
  console.log(printDiv)
}


onMounted(() => {
  queryPatientSBloodSugarInformation()
  initLodop()
})


</script>

<style scoped lang="scss">
td {
  border: 1px solid #000;
  text-align: center;
  padding: 10px 0;
}

.tr th {
  border: 1px solid #000;
  text-align: center;
}

table, tr, td {
  border-collapse: collapse;
}
</style>
