<template>
    <el-container>
        <el-aside width="280px">
          <PatientBaseList :yzType="yzType" @selectPatientInfo="selectPatientInfo" ></PatientBaseList>
        </el-aside>
        <el-container>
            <el-header style="height: 200px">
                <PatientInfo :patientInfo="patientInfo"></PatientInfo>
            </el-header>
            <div>
                <el-button icon="Printer" type="success" @click="daYingClick">打印</el-button>
            </div>
            <el-main>
            <div id="cqYz">
                <h1 style="text-align: center;margin-bottom: 10px">长沙泰和医院</h1>
                <h1 style="text-align: center;margin-bottom: 10px">长期医嘱单</h1>
                <div style="width: 100%;">
                                 <span><strong>姓名：</strong>{{patientInfo.name}}</span>
                                <span style="margin-left: 5px"><strong>性别：</strong>{{patientInfo.sexName}}</span>
                                <span style="margin-left: 5px"><strong>年龄：</strong>{{companyFunc(patientInfo.age,'岁')}}</span>
                                <span style="margin-left: 5px"><strong>科别：</strong>{{patientInfo.admissWardName}}</span>
                                <span style="margin-left: 5px"><strong>床号：</strong>{{patientInfo.bedNo}}</span>
                                <span style="margin-left: 5px"><strong>住院号：</strong>{{patientInfo.inpatientNo}}</span>
                           
                </div>
                <el-scrollbar height="400px">
                    <div style="width: 100%;" >
                        <table>
                            <tr>
                                <th colspan="5">起始</th>
                                <th colspan="4">停止</th>
                            </tr>
                            <tr>
                                <th style="width: 40px">日期</th>
                                <th style="width: 40px">时间</th>
                                <th>长期医嘱</th>
                                <th style="width: 58px">医师签名</th>
                                <th style="width: 85px">核对护士签名</th>
                                <th style="width: 40px">日期</th>
                                <th style="width: 40px">时间</th>
                                <th style="width: 58px">医师签名</th>
                                <th style="width: 85px">核对护士签名</th>
                            </tr>
                            <tr v-for="item in yzPrintVOList">
                                <td>{{item.date}}</td>
                                <td>{{item.time}}</td>
                                <td>{{item.orderGroupNo}} {{item.newOrderName}} {{item.newOrderNameCode}} {{item.frequCode}}</td>
                                <td>{{item.doctorName}}</td>
                                <td>{{item.nurseName}}</td>
                                <td>{{item.stopDate}}</td>
                                <td>{{item.stopTime}}</td>
                                <td>{{item.modifierName}}</td>
                                <td>{{item.execId2Name}}</td>
                            </tr>
                        </table>
                    </div>
            </el-scrollbar>

            </div>
        </el-main>
        </el-container>
    </el-container>
</template>

<script setup name='cqYzPrint'>
import PatientInfo from "@/components/medical-advice/PatientInfo.vue"
import PatientBaseList from "@/components/medical-advice/PatientBaseList.vue"
import {getLodop, initLodop} from '@/utils/c-lodop'
import {onMounted} from "vue";
import {stringNotBlank} from "@/utils/blank-utils";
// 基本信息
const patientInfo = ref({})
const yzType = ref('cq')
const yzPrintVOList = ref({})
const companyFunc = (val, company) => {
    if (stringNotBlank(val)) {
        return val + company
    } else {
        return ''
    }
}
const yzPrintCss=` *{font-size:12px !important; margin: 0;
            padding: 0;} .nav{margin: 0 auto;width: 100%;}ul{list-style: none;width: 100%;}.nav li{float: left;margin-left: 10px;}table{border:1px solid black;border-collapse:collapse;width:100%} th{border:1px solid black;text-align:center} td{border:1px solid black;text-align:center} tr{height:27px;line-height:27px}`

const selectPatientInfo=(val)=>{
    patientInfo.value =  val.patientInfo
    yzPrintVOList.value = val.yzPrintVOList
}
onMounted(() => {
    initLodop()
})
const daYingClick = () => {
    let LODOP = getLodop()
    LODOP.PRINT_INIT('临时医嘱单') // 初始化打印机 名字
    LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '') // 设置纸张大小  A4
    LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
    LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', '<style>' + yzPrintCss + '</style>' + '<body>' + document.getElementById('cqYz').innerHTML + '</body>') //要打印的内容
    LODOP.PREVIEW() // 关闭
}
</script>

<style scoped>
.nav{
    margin: 0 auto;
    width: 100%;
}
ul{
    list-style: none;
    width: 100%;
}
.nav li{
    float: left;
    margin-left: 10px;

}
#cqYz {
    width: 753px;
    padding: 0 0px;
}

table {
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
}

th {
    border: 1px solid black;
    text-align: center;
}

td {
    border: 1px solid black;
    text-align: left;
}

tr {
    height: 27px;
    line-height: 27px;
}
</style>
