<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 @click="inquire">查询</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
        console.log(res)
    })
}

const inquire = () => {
    queryPatientSBloodSugarInformation()
}

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>
