<apex:page applyHtmlTag="false" Controller="ConsumTrialPDFController" showHeader="false" sidebar="false" id="allPage" action="{!init}">
<!-- renderAs="pdf" -->   
    <html>
        <head>
            <style type="text/css" media="print">
                @page {
                    size: A4;
                    margin: 4.7mm 3mm 3.5mm 3.2mm;
                    padding-top: 0.5mm;
                    padding-bottom: 0.5mm;
                }
                body {
                    font-family: Arial Unicode MS;
                    page-break-inside: auto;
                    font-size: 14px;
                }
                table {
                    border-collapse: collapse;
                    width: 100%;
                }
                table, th, td {
                    border: 1px solid black;
                    text-align: left;
                }
                table.headTable tr td {
                    font-size: 13px;
                }
                table.deliInfoTable tr td {
                    font-size: 13px;
                }
                table.detailListTable tr td {
                    font-size: 8px;
                    text-align: left;
                    box-sizing:border-box;
                    padding: 1px;
                }
                table.tailTable tr td {
                    font-size: 12px;
                }

            </style>
            <style>
                /* 20220221 PI改造 by 徐亮 start */
                body {
                    font-family: Arial Unicode MS;
                    page-break-inside: auto;
                    font-size: 14px;
                }
                table {
                    border-collapse: collapse;
                    width: 100%;
                }
                table, th, td {
                    border: 1px solid black;
                    text-align: left;
                }
                table.headTable tr td {
                    font-size: 13px;
                }
                table.deliInfoTable tr td {
                    font-size: 13px;
                }
                table.detailListTable tr td {
                    font-size: 8px;
                    text-align: left;
                    box-sizing:border-box;
                    padding: 1px;
                }
                table.tailTable tr td {
                    font-size: 12px;
                }
                body{margin: 0 auto;width: 920px;font-size: 14px;}
                #title1{height: 30px;}
                #title2{height: 80px;}
                #pdf-wrapper {position: relative;}
                #pdf-wrapper table{width: 100%;border-spacing: 0px;border-collapse: collapse;    border: none;}
                #pdf-wrapper table th,td{border-bottom: 1px #000 solid;}
                /* 20220221 PI改造 by 徐亮 end */
            </style>
            <!-- 20220221 PI改造 by 徐亮 start  -->
        <apex:includeScript value="{! URLFOR($Resource.AWSService, 'AWSService.js') }" />
        <script src="../../soap/ajax/53.0/connection.js" type="text/javascript"></script>
        <apex:stylesheet value="{!URLFOR($Resource.blockUIcss)}"/>
        <apex:includeScript value="{!URLFOR($Resource.jquery183minjs)}"/>
        <apex:includeScript value="{!URLFOR($Resource.PleaseWaitDialog)}"/>
        <apex:includeScript value="{!URLFOR($Resource.jspdf)}"/>
        <apex:includeScript value="{!URLFOR($Resource.html2canvas)}"/>

        <!-- 20220221 PI改造 by 徐亮 end  -->
        </head>
        <body>
            <div id="pdf-wrapper">
                <div id="title1"></div>
            <!-- 页码 -->
            <apex:variable value="{!1}" var="pageCnt" />
            <!-- 借用耗材备品发货清单 -->
            <!-- 序号 -->
            <apex:variable value="{!1}" var="lineCnt" />
            <apex:repeat value="{!pdfPageList}" var="eachPdfPage">
                <img style="width:79px;height:79px;padding:0px;margin-top:1px;z-index:999;position:absolute;" 
                        src="{!QRSrc}" />
                <!-- 表头 -->
                <table class="headTable" style="position:relative;">
                    <colgroup>
                        <col width="100%"/>
                    </colgroup>
                    <tr>
                        <th style="box-sizing:border-box; text-align:center; font-size:24px; font-weight:900;" height="35">奥林巴斯医疗手术附件（器械）临床试用表</th>
                    </tr>
                    <tr>
                        <td style="text-align:right;">
                            耗材备品申请单号：<apex:outputText value="{!targetConsumApply.Name}" />
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">
                            本单附件第（<apex:outputText value="{!pageCnt}" />）页/共（<apex:outputText value="{!pageTotalCnt}" />）页
                        </td>
                    </tr>
                </table>

                <!-- 发货信息 -->
                <table class="deliInfoTable">
                    <colgroup>
                        <col width="16%" />
                        <col width="14%" />
                        <col width="36%" />
                        <col width="16%" />
                        <col width="18%" />
                    </colgroup>
                    <tr>
                        <th style="text-align:center;" colspan="5" height="25">发货信息</th>
                    </tr>
                    <tr>
                        <td>使用目的</td>
                        <td colspan="4">
                            <apex:outputText value="{!targetConsumApply.demo_purpose2__c}" />
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">申请人信息</td>
                        <td>所属本部名</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.Salesdept__c}" />
                        </td>
                        <td>所属办事处名</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.WorkPlace__c}" />
                        </td>
                    </tr>
                    <tr>
                        <td>姓名</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.Person_In_Charge__r.Name}" />
                        </td>
                        <td colspan="1">联系电话</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.ApplyPerson_Phone__c}" />
                        </td>
                    </tr>
                    <tr>
                        <td>医疗机构信息</td>
                        <td>医疗机构名</td>
                        <td>
                            <apex:outputText value="{!hospitalName}" />
                        </td>
                        <td>科室名</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.Account__r.Department_Name__c}" />
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="3" >发货地址</td>
                        <td colspan="2" rowspan="3">
                            <apex:outputText value="{!shippmentAddress}" />
                        </td>
                        <td colspan="1">邮编</td>
                        <td>
                            <apex:outputText value="{!IF(targetConsumApply.Shipment_address__r.Post_Code__c==null, targetConsumApply.Post_Code__c, targetConsumApply.Shipment_address__r.Post_Code__c)}" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="1">接收人姓名</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.Loaner_received_staff__c}" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="1">接收人电话</td>
                        <td>
                            <apex:outputText value="{!targetConsumApply.Loaner_received_staff_phone__c}" />
                        </td>
                    </tr>
                </table>
                <apex:outputPanel layout="none" rendered="{!pageCnt == 1}">
                    <!-- ※奥林巴斯耗材备品借用须知 -->
                    <table style="table-layout:fixed;">
                        <colgroup>
                            <col width="100%" />
                        </colgroup>
                        <tr>
                            <th style="text-align:center;" colspan="5" height="25">※奥林巴斯耗材备品借用须知</th>
                        </tr>
                        <tr>
                            <td style="font-size:12px;">
                                1、严格遵循医疗产品的合规使用原则，为评价该产品在临床使用的有效性、安全性无偿提供给医疗从业者进行试用。<br />
                                2、一次性医疗产品和重复性使用产品用于临床后由试用者按该院对医疗废弃物的处置规定进行废弃。<br />
                                3、未经奥林巴斯公司书面同意，借用方不得以任何理由对耗材进行临床用途以外的处理，包括但不限于向第三方转借、出租、出售、抵押等。<br />
                                4、此次耗材出借基于正当合理的理由，而非通过出借耗材对借用方购买、推荐奥林巴斯公司产品、服务等产生任何不正当影响。<br />
                                5、借用方应独立依靠其专业水平和能力，严格按照奥林巴斯公司的要求（“产品使用说明书”）内容尽审慎义务正确操作、维护、监测耗材，<br />由于借用方错误、疏忽等借用方原因而导致的任何问题均应由借用方自行负责处理。<br />
                                6、其他未尽事宜，双方应本着友好合作原则进行协商解决。
                            </td>
                        </tr>
                    </table>
                </apex:outputPanel>
                <!-- 借用耗材备品发货清单 -->
                <table class="detailListTable" style="width: 100%;">
                    <colgroup>
                        <!-- 序号 -->
                        <col width="3.00%" />
                        <!-- 明细型号 -->
                        <col width="12.00%" />
                        <!-- 中文名称 33-->
                        <col width="28.00%" />
                        <!-- 管理编码 耗材追溯 yc -->
                        <col width="5.00%" />
                        <!-- 备品管理码 耗材追溯 yc -->
                        <col width="3.00%" />
                        <!-- 消耗品有效期 -->
                        <col width="6.00%" />
                        <!-- 展示/演示  -->
                        <col width="5.27%" />
                        <!-- 试用数量 3.46-->
                        <col width="3.46%" />
                        <!-- 试用日期 -->
                        <col width="6.78%" />
                        <!-- 病例/动物脏器 -->
                        <col width="4.82%" />
                        <!-- 试用者盖章 -->
                        <col width="4.52%" />
                        <!-- 跟台者盖章 -->
                        <col width="4.37%" />
                        <!-- 备用 -->
                        <col width="3.46%" />
                        <!-- 备注 -->
                        <!-- <col width="10%" /> -->
                    </colgroup>
                    <apex:outputPanel layout="none" rendered="{!eachPdfPage.equipSetDetailList.size > 0}">
                        <tr>
                            <th style="text-align:center;" colspan="12" height="25">借用耗材备品发货清单</th>
                        </tr>
                        <tr>
                            <th style="text-align:center; font-size:10px;" colspan="12" height="25">共计耗材备品（{!consumApplySetDetailListSize}）件</th>
                        </tr>
                        <tr>
                            <td style="text-align: center;"><c:PDFWbr targetStr="序号"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="明细型号"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="中文名称"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="管理编码"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="备品管理码"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="消耗品有效期"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="展示/演示"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="试用数量"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="试用日期"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="病例/动物脏器"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="试用者盖章"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="跟台者盖章"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="备用"/></td>
                            <td style="text-align: center;"><c:PDFWbr targetStr="备注"/></td>
                        </tr>
                    </apex:outputPanel>
                    <apex:repeat value="{!eachPdfPage.equipSetDetailList}" var="eachEquipSetDetail">
                        <tr style="vertical-align:center;">
                            <!-- 序号 -->
                            <td style="text-align:center;height:30px;">
                                <apex:outputPanel rendered="{!lineCnt  <= consumApplySetDetailListSize}" layout="none">
                                    <c:PDFWbr targetStr="{!lineCnt}"/>
                                </apex:outputPanel>
                                <apex:outputPanel rendered="{!lineCnt > consumApplySetDetailListSize}" layout="none"><br /></apex:outputPanel>
                            </td>
                            <!-- 明细型号 -->
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.Fixture_Model_No_F__c}"/></td>
                            <!-- 中文名称 -->
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.ProductName__c}"/></td>
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.ManagementCode__c}"/></td>
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.EquipmentManagementCode__c}"/></td>
                            <!-- 消耗品有效期 -->
                            <td style="text-align: center;">
                                <apex:outputText value="{0,date,yyyy'/'MM'/'dd}">
                                    <apex:param value="{!eachEquipSetDetail.Consumable_Guaranteen_end_F__c}"/>
                                </apex:outputText>
                            </td>
                            <!-- 展示/演示 -->
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.Show_demonstration__c}"/></td>
                            <!-- 试用数量 -->
                            <td style="text-align: right;"><c:PDFWbr targetStr="{!eachEquipSetDetail.Trial_Num__c}"/></td>
                            <!-- 试用日期 -->
                            <!-- <td style="text-align:left;"><c:PDFWbr targetStr="{!eachEquipSetDetail.Consum_Start_Date__c}"/></td> -->
                            <td style="text-align: center;">
                                <apex:outputText value="{0,date,yyyy'/'MM'/'dd}">
                                    <apex:param value="{!eachEquipSetDetail.Consum_Start_Date__c}"/>
                                </apex:outputText>
                            </td>
                            <!-- 病例/动物脏器 -->
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.Case_OR_animal_organ__c}"/></td>
                            <!-- 试用者盖章 -->
                            <td aws-data-id="{!eachEquipSetDetail.AWS_Data_Id__c}"><c:PDFWbr targetStr="{!eachEquipSetDetail.Trial_User__c}"/></td>
                            <!-- 跟台者盖章 -->
                            <td><c:PDFWbr targetStr="{!eachEquipSetDetail.Follower_User__r.Name}"/></td>
                            <!-- 备用 -->
                            <td style="text-align: center;">
                                <!-- eachEquipSetDetail.Spare__c -->
                                <apex:outputPanel rendered="{!eachEquipSetDetail.Spare__c}">
                                    ✔️
                                </apex:outputPanel>
                            </td>
                            <!-- 备注 -->
                            <td style="box-sizing: border-box;text-align:left;padding: 0px;"><c:PDFWbr targetStr="{!eachEquipSetDetail.Comment__c}"/></td>
                        </tr>
                        <apex:variable value="{!lineCnt + 1}" var="lineCnt" />
                    </apex:repeat>

                </table>
                <table class="tailTable" style="width:100%;">
                    <tr>
                        <!-- 20210812 SFDC-C5CC5S 修改地址-->
                        <td colspan="2" height="40" >
                            奥林巴斯 上海备品中心地址：上海市浦东新区金吉路778号3号楼1F<br />
                            邮编：201206    TEL：021-60391318-8877    FAX：021-60391316
                            <!-- TODO 如果地址等内容需要修改的话，FixtureRentalPDF、LostReportEdit的地址等信息也需要确认是否需要一起修改 -->
                        </td>
                    </tr>
                    <!-- 20211210 ljh SFDC-C923SR add -->
                    <tr>
                        <td colspan="2" style=" border: none;">
                            <img align="left" src="{!BRSrc}" />
                        </td>
                    </tr>
                    <!-- 20211210 ljh SFDC-C923SR end -->
                </table>
                <apex:outputPanel rendered="{!pageCnt < pageTotalCnt}" layout="none">
                    <div style="page-break-after:always;"/>
                </apex:outputPanel>
                <apex:variable value="{!pageCnt + 1}" var="pageCnt" />
            </apex:repeat>
        </div>
        </body>
        <!-- 20220221 PI改造 by 徐亮 start  -->
<script>
    AWSService.sfSessionId = '{!GETSESSIONID()}';
    var staticResource = JSON.parse('{!staticResource}');
    function Fun(pdf){
        var iframe = document.createElement('iframe');
        iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:100%');
        document.body.appendChild(iframe);
        iframe.src = pdf.output('datauristring');
        for(let e of document.body.childNodes){
            if( e != iframe && e.style){
                e.style.display = 'none';
            }
        }
    }

    let id = "pdf-wrapper";
    var target = document.getElementById(id);
    function jsPdfDownload(){
        let pdfName = "测试";
        let id = "pdf-wrapper";
        var target = document.getElementById(id);
        target.style.background = "#FFFFFF";
        if(pdfName==''||pdfName==undefined) pdfName= getNowFormatDate();

        html2canvas(target, {
            scale: 2,
            onrendered:function(canvas) {
                var contentWidth = canvas.width;
                var contentHeight = canvas.height;

                //一页pdf显示html页面生成的canvas高度;
                var pageHeight = contentWidth / 592.28 * 841.89;
                //未生成pdf的html页面高度
                var leftHeight = contentHeight;
                //页面偏移
                var position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                var imgWidth = 515.28;//595.28//左右边距20
                var imgHeight = 515.28/contentWidth * contentHeight;//左右边距20

                var pageData = canvas.toDataURL('image/jpeg', 1.0);

                var pdf = new jsPDF('', 'pt', 'a4');

                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    pdf.addImage(pageData, 'JPEG', 40, 0, imgWidth, imgHeight );//左右边距20
                } else {
                    while(leftHeight > 0) {
                        pdf.addImage(pageData, 'JPEG', 40, position, imgWidth, imgHeight)//左右边距20
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if(leftHeight > 0) {
                            pdf.addPage();
                        }
                    }
                }
                Fun(pdf);
            }
        })
    }
    
    blockme();
    document.body.onload = function(){
        let aws_ids = [];
        j$("[aws-data-id]").each(function(i,e){
            let id = j$(e).attr('aws-data-id');
            if (id) {
                aws_ids.push(id); 
            }
            
        })


        AWSService.search(staticResource.searchUrl, JSON.stringify({
            dataIds:aws_ids
        }), function(data){
            unblockUI();
            if (data && data.object && data.object.length > 0) {
                for (const d of data.object) {
                    j$("[aws-data-id='"+d.dataId +"']").html(d.trialUser);
                }
            }
            //document.getElementById("Responsible_Person_HP__c").innerHTML = data.object.responsiblePersonHP;
            //document.getElementById("Caller_phone__c").innerHTML = data.object.callerPhone;
            
            setTimeout(() => {
                jsPdfDownload(); 
            }, 1500);
        }, staticResource.token);
        
    }
    document.body.onclick = function(){
        //jsPdfDownload();
    }
</script>
<!-- 20220221 PI改造 by 徐亮 end  -->
    </html>
</apex:page>