<apex:page doctype="html-5.0"  showquickactionvfheader="false"  controller="eSignFormAttachmentController" showHeader="false" sidebar="false" action="{!init}" lightningStylesheets="true">
    <!-- 隐藏原图 展示画布 旋转图片（4个90°）鼠标滚轮伸缩放大放小 （会失帧） -->
    <head>
        <apex:includescript value="{!URLFOR($Resource.jquery183minjs)}">
        </apex:includescript>
        <apex:includeScript value="{!URLFOR($Resource.connection20)}"/>
        <apex:includeScript value="{!URLFOR($Resource.apex20)}"/>
        
        <title>
            查看附件
        </title>
         <script>
             var widthJs = "500px";
         </script>
        <style>
            * {
               margin: 0px;
               padding: 0px;
              }

              #pandiv {
               width: 30%;
               height: 88%;
              }
                
              #control {
               /*background: #ccc;*/
               opacity: 0.7;
                width: 200px;
                /*liying start*/
               width: 80px;
                /*liying  end*/
               height: 30px; display: none;
               padding-top: 5px;
               position: absolute;
                /*liying start*/
               align-content: center;
                /*liying end*/
               /*left: 550px;*/
               top: 90%;
               left: 23%;
              }
                
              #canvas {
               border: 1px solid black;
              }
                
              #left {
               float: left;
               display: block;
              }
                
              #right {
               float: right;
               display: block;
              }
               body{
                /* background-color: cyan; */
               }
               #popDiv{
                display: none;
                background-color: #0f218b;
                z-index: 11;
                width: 100%;
                height: 100%;
                position:fixed;
                top:0;
                right:0;
                left:0;
                bottom:0;
                margin:auto;
               }
               /* 关闭按钮样式 */
               #popDiv .close a {
                text-decoration: none;
                color: #2D2C3B;
               }
               /* 弹出界面的关闭按钮 */
               #popDiv .close{
                  margin:0 auto;background:#0f218b;text-align:right;padding:10px 0 0 0;width: 97%;
               }
               #popDiv p{
                text-align: center;
                font-size: 25px;
                font-weight: bold;
               } 

              /**关闭区**/
              .close_div{margin:0 auto;background:#fff;text-align:right;padding:10px 0 0 0;}
              /**图片区**/
              .content{background:#fff;margin:0 auto;position:relative;width: 95%;height: 95%;}
              .content .img{position:absolute;top:0;left:0;z-index:105}
              .content span{position:absolute;left:45%;top:40%;}
              /**左右箭头**/
              .content .left,.content .right{position:absolute;top:0;z-index:110;}
              .content .left{left:0;cursor:url(/resource/curleft), auto; }
              .content .right{right:0;cursor:url(/resource/curright), auto;}
              /**底部区**/
              .bottom{height:0px;background:#fff;margin:0 auto;overflow:hidden;line-height:30px;
              }

               .solution-list {
                    width: 20%;
                    float: left;
                }
                .blankCss{
                    text-align:center;
                    padding-top: 2%;
                    border: 5px solid rgb(161, 220, 243);
                    float: left;
                    width: 78%;
                    height: calc(100vh - 118px);
                    margin-left: 10px;
                    background:#fff;
                }
                .PdfCss{
                    text-align:center;
                    padding-top: 2%;
                    float: left;
                    width: 78%;
                    height: calc(90vh - 118px);
                    margin-left: 10px;
                    background:#fff;
                }

               .solution-item {
                    display: none;
                    padding-top: 2%;
                    float: left;
                    width: 73%;
                    height: 70%;
                    margin-left: 10px;
                    border: 40px solid #0f218b;
                    background:#fff;
                }
        </style>
    </head>
    <body>
        <!-- 标题 -->
        <div style="height: 40px;background-color:#0f218b;width: 100%;text-align: center;">
            <h1 style="color: white;font-size: 24px;">
                查看附件
            </h1>
        </div>
        <div style="height: 30px; margin-top: 10px;">
            <!-- 切换原图（用于用户另存为）初始化时判断显示1个 -->
            <!--  1、#popDiv 弹窗窗口
            2、#content 左+画布+右 三部分
            3、#pandiv 画布
            4、#control 旋转图标
            5、#OriginalDiv 切换原图和画布 -->
            <div id="popLayer">
                <!--左侧表格  展示所有的附件-->
                <div class="solution-list">
                    <apex:pageBlock id="oppBlock" tabStyle="Report">
                        <apex:outputPanel >
                            <input type="hidden" value="{!identifier}" id="identifier"/>
                            <apex:variable value="identif" var="identif" rendered="{!IF(identifier == '经销商', true, false)}" >
                                <table class="list" style="border-bottom-width: 0px;   width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_L">
                                    <tr class="headerRow" height="30px"  align="center">
                                        <td><a href="#" onclick="return false;" >附件名称</a></td>
                                        <td width="55px"><a href="#" onclick="return false;">附件类型</a></td>
                                    </tr>
                                    <apex:repeat value="{!acccData}" var="or" id="oppTable">
                                        <apex:variable value="{!1}" var="cnt"/>
                                        <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '经销商', true, false)}">
                                        <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
                                            <td align="center" id="" style="border-right-width:thin">
                                                <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a>
                                            </td>
                                            <td width="55px" align="center">
                                                <apex:outputText value="{!or.accessory.ContentType}" />
                                            </td>
                                            <td style="display:none">
                                                <apex:outputText value="{!or.accessory.Id}"/>
                                            </td>
                                        </tr>
                                        </apex:variable>
                                        <apex:variable value="{!cnt + 1}" var="cnt" />
                                    </apex:repeat> 
                                </table>
                            </apex:variable>
                            <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start-->
                            <input type="hidden" value="{!identifier2}" id="identifier2"/>
                            <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院', true, false)}" id="identifier2">
                                <table class="list" style="border-bottom-width: 0px;   width:100%; font-size:11px; border-spacing:0;" border="" id="tableHeader_M">
                                    <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier != '经销商'  , true, false)}">
                                        <tr class="headerRow" height="30px"  align="center">
                                            <td><a href="#" onclick="return false;" >附件名称</a></td>
                                            <td width="55px"><a href="#" onclick="return false;">附件类型</a></td>
                                        </tr>
                                    </apex:variable>
                                    <apex:variable value="identif" var="identif" rendered="{!IF(identifier2 == '医院' && identifier == '经销商'  , true, false)}">
                                        <tr class="headerRow" height="30px"  align="center">
                                            <td colspan="2"></td>
                                        </tr>
                                    </apex:variable>
                                    <apex:repeat value="{!acccData}" var="or" id="oppTable2">
                                        <apex:variable value="{!1}" var="cnt"/>
                                        <apex:variable value="trcnt" var="trcnt" rendered="{!IF(or.accessory.ContentType == '医院', true, false)}">
                                        <tr style="cursor:pointer;" onclick="changeColor('{!or.accessory.Id}');onShowImge('{!or.accessory.Id}',this);" class="dataRow {!IF(MOD(cnt, 2)==0, 'odd', 'even')} {!IF(cnt==1, 'first', '')}" onmouseover="if (window.hiOn){hiOn(this);} " onmouseout="if (window.hiOff){hiOff(this);} " onblur="if (window.hiOff){hiOff(this);}" onfocus="if (window.hiOn){hiOn(this);}">
                                            <td align="center" id="" style="border-right-width:thin">
                                                <a href="#"><apex:outputText value="{!or.accessory.Name}" /></a>
                                            </td>
                                            <td width="55px" align="center">
                                                <apex:outputText value="{!or.accessory.ContentType}" />
                                            </td>
                                            <td style="display:none">
                                                <apex:outputText value="{!or.accessory.Id}"/>
                                            </td>
                                        </tr>
                                        </apex:variable>
                                        <apex:variable value="{!cnt + 1}" var="cnt" />
                                    </apex:repeat> 
                                </table>
                            </apex:variable>
                            <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end-->
                        </apex:outputPanel>
                    </apex:pageBlock>
                    
                </div>
                <!--左侧canvas画布和图片  展示当前点击的图片和画布-->
                <div class="blankCss" id="blankId">
                    <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;">
                        <font face="verdana" style="font-size: 40px;">图片预览展示区！</font>
                    </h1>
                </div>
                <div class="solution-item" id="imgeDiv">
                    <div id="onCloseId" style="position: absolute;top:55px;padding-left:73%;cursor:pointer;display:none;"><a href="javascript:void(0)" onclick="closePop()" style="padding-rigth:13px;color:#fff;font-weight:bolder;font-size:15px;text-decoration: none;">关闭</a></div>
                    <!-- 增加pdf关闭按钮  精琢技术 thh 2021-09-27 start -->
                    <div class="PdfCss" id="fontpdf" style="display: none;">
                        <h1 style="position:absolute;top:50%;margin:-4% 0 0 -10%;">
                            <font face="verdana" style="font-size: 40px;">此页暂时只支持图片文件的预览</font>
                        </h1>
                    </div>
                    <!-- 增加pdf关闭按钮  精琢技术 thh 2021-09-27 end -->
                    <div class="content" id="contentId" style="">
                        <div class="left" id="onIeftId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:left;">
                        </div>
                        <div class="right" id="onRigthId" style="text-align: center;padding-top: 2%;width: 20%;height:98%;float:right;">
                        </div>
                        <div id="pandiv" style="margin-left: 17%; text-align: center;padding-top: 1%;height:98%">
                            <!-- 原图 -->
                            <apex:image alt="此处的图像描述" id="testImg" style="display: none;" value="">
                            </apex:image>
                            <!-- 画布 -->
                            <canvas height="485" id="canvas" style="cursor: default;" width="620">
                            </canvas>
                            <!-- 旋转图片 -->
                            <!-- background-color: #fffdfd; -->
                            <div id="control" style="display: none;margin-top: -1%; margin-left: 24%; ">
                                <img id="left" onclick="rateImage(270)" src="/resource/esignimg06" style="heigh: 30px; width: 30px;cursor:pointer;" title="逆时针"/>
                                <img id="right" onclick="rateImage(90)" src="/resource/esignimg05" style="heigh: 30px; width: 30px;cursor:pointer;" title="顺时针"/>
                                <!-- <input id="left" onclick="rateImage(270)" type="button" value="←" />
                            <input id="right" onclick="rateImage(90)" type="button" value="→"/> -->
                            </div>
                        </div>
                        <a href="" id="ViewOriginal" onclick="ViewOriginalImage();" style="margin-left:75%; color: #0f218b ;cursor:pointer;">
                            查看原图
                        </a>
                        <!-- 用于切换 原图和画布 这里额外copy一个img标签（用于用户另存为） 不使用原图标签 因为会造成鼠标移入移出有问题 -->
                        <div align="center" id="OriginalDiv">
                            <apex:image alt="此处的图像描述" id="testImgOriginal" style="display: none;height: 490px;width:700;padding-top: 2%;" value="">
                            </apex:image>
                            <p id="Original" style="display: none;color: #0f218b;margin-left:57%;">
                                <a href="" id="ViewPreview" onclick="ViewPreview();" style="color: #0f218b;cursor:pointer;font-size: 13px;">
                                    查看预览
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--隐藏id,用于存放当前显示的图片id-->
        <input type="hidden" value="" id="newId"/>
        <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start-->
        <!--隐藏id,用于存放当前显示的图片类型-->
        <input type="hidden" value="" id="newContentType"/>
        <!--asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end-->
        <script>
            //分割线 旋转伸缩图片核心代码-------------------------------------------------------------------
            //整个canvas 窗口的 伸缩 旋转 精琢技术

            //定义全局变量 
            //图片后缀名
            var picType = 'jpg,png,jpeg,PNG,JPG,JPEG,bmp,BMP';
            //原始宽度
            var OriginalWidth = document.body.clientWidth;
            //原始高度
            var OriginalHeight = document.body.clientHeight;
            
            //画布对象
            var canvas = document.getElementById("canvas");
            var pandiv = document.getElementById("pandiv");
            var cxt = canvas.getContext("2d");
            var control = document.getElementById("control");
            var imgScale = 1;
            var img;
            var imgX = 0;
            var imgY = 0;
            var currentRate = 0;
            /**当前的旋转角度*/
            var mouseDownLocation;
            var isMouseDown = false;
            //右边的图片隐藏
            hiddenImge();

            //下一张图片和上一张图片加点击事件
            $(".right").click(function (){
                 rights();
            });
            $(".left").click(function (){
                lefts();
            });

            //点击tr  右边视图展示图片
            function onShowImge(accId,obj){
                document.getElementById("blankId").style.display='none';
                document.getElementById("imgeDiv").style.display='block';

                fadeIn("imgeDiv",1000);
                //获取点击的附件名称
                var accName = obj.cells[0].innerText;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                //获取点击的附件类型
                var accContentType = obj.cells[1].innerText;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                //截取后缀名
                var accType = accName.substring(accName.lastIndexOf('.')+1);
                if(picType.indexOf(accType) > -1){//判断是否是图片
                    //右边的画布显示
                    showImge();
                    //需要关闭原图
                    ViewPreview();
                    //图片加载和canvas 画图
                    imgShow(accId,accContentType);
                    //关闭按钮展示 onClose
                    document.getElementById("onCloseId").style.display='block';
                }else{
                    //如果不是图片，那么下载文件
                    //window.open('https://ocsm--stagefull--c.documentforce.com/servlet/servlet.FileDownload?file='+accId);
                    window.open('https://ocsm--c.ap0.content.force.com/servlet/servlet.FileDownload?file='+accId);
                    debugger
                    //右边的画布显示
                    showPdf();
                    //需要关闭原图
                    ViewPreview();
                    //hiddenImge();
                    //关闭按钮展示 onClose
                    document.getElementById("onCloseId").style.display='block';
                }
                
            }
            //下一张
            function rights(){
                var accId = document.getElementById("newId").value;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                var accContentType = document.getElementById("newContentType").value;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                //获取下一张图片的id
                var newId = "";
                var flag = false;//判断循环的数据是否已经到当前显示的图片位置
                var fristId = "";//记录第一个图片id，防止当前图片是最后一张
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                var fristContentTyp = "";//记录第一个图片id，防止当前图片是最后一张
                var trs=[];
                if(accContentType=='经销商'){
                    trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');//获取所有经销商的tr
                }else if(accContentType=='医院'){
                    trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr
                }
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                for(var i = 1;i<trs.length;i++){
                    var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id
                    var onName = trs[i].cells[0].innerText.trim();//当前图片名称
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                    var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                    onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名
                    if(picType.indexOf(onName) > -1){
                        if(fristId == ""){
                            fristId = onId;
                            //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                            fristContentType = onContentType;
                            //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                        }
                        if(flag || onId == accId){
                            if(!flag){
                                flag = true;
                                continue;
                            }else{
                                newId = onId;
                                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                                newContentType = onContentType;
                                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                                break;
                            }
                        }
                    }
                }
                if(newId == ""){
                    newId = fristId;
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                    newContentType = fristContentType;
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                }
                //点击的tr变色
                changeColor(newId);

                //初始化时，隐藏查看预览链接 与旋转图片无关
                $("#ViewPreview").hide();
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                //图片加载和canvas 画图
                imgShow(newId,newContentType);
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
            };

            //上一张
            function lefts(){      
                var accId = document.getElementById("newId").value;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                var accContentType = document.getElementById("newContentType").value;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                //获取下一张图片的id
                var newId = "";
                var flag = false;//
                var endId = "";//记录最后一个图片id，防止当前图片是第一张
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                var endContentTyp = "";//记录第一个图片id，防止当前图片是最后一张
                var trs=[];
                if(accContentType=='经销商'){
                    trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');//获取所有经销商的tr
                }else if(accContentType=='医院'){
                    trs = document.getElementById('tableHeader_M').getElementsByTagName('tr');//获取所有'医院'的tr
                }//asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                for(var i = (trs.length-1);i >= 1;i--){
                    var onId = trs[i].cells[2].innerText.trim();//获取当前图片的id
                    var onName = trs[i].cells[0].innerText.trim();//当前图片名称
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                    var onContentType = trs[i].cells[1].innerText.trim();//获取当前图片的类型
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                    onName = onName.substring(onName.lastIndexOf('.')+1);//获取当前图片的后缀名
                    if(picType.indexOf(onName) > -1){
                        if(endId == ""){
                            endId = onId;
                            //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                            endContentType = onContentType;
                            //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                        }
                        if(flag || onId == accId){
                            if(!flag){
                                flag = true;
                                continue;
                            }else{
                                newId = onId;
                                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                                newContentType = onContentType;
                                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                                break;
                            }
                        }
                    }
                }
                if(newId == ""){
                    newId = endId;
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                    newContentType = endContentType;
                    //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                }
                changeColor(newId);
                //初始化时，隐藏查看预览链接 与旋转图片无关
                $("#ViewPreview").hide();
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                 //图片加载和canvas 画图
                 imgShow(newId,newContentType);
                 //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
            }
            //图片加载和canvas 画图
            function imgShow(accId,accContentType){
                var imageUrl = "/servlet/servlet.FileDownload?file="+accId;
                //js动态赋值
                document.getElementById("j_id0:testImg").src = imageUrl;
                //js动态赋值
                document.getElementById("j_id0:testImgOriginal").src = imageUrl;
                canvas = document.getElementById("canvas");
                canvas.height=canvas.height; //清空canvas画布
                pandiv = document.getElementById("pandiv");
                cxt = canvas.getContext("2d");
                control = document.getElementById("control");
                //等待图片加载，然后canvas  画布
                awaitImge(imageUrl);
                //用一个隐藏的input标签存放当前页面展示的图片id
                document.getElementById("newId").value=accId;
               //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 start
                //用一个隐藏的input标签存放当前页面展示的图片类型
                document.getElementById("newContentType").value=accContentType;
                //asdf-kjklljk 电子签收-担当环节优化开发 精琢技术 wql 2021/08/09 end
                //等待图片加载，然后canvas画图
                awaitImge(imageUrl);
            }


            //首先加载图片，再使用canvas画图
            function awaitImge(imageUrl){
                img = new Image();
                img.src = imageUrl;
                img.id = "pic";
                //定义一个计数函数，用于停止setTimeout循环，防止程序变成死循环
                var counter = 0;
                //使用链式setTimeout()，如果没达到条件就会自动重新调用一个setTimeout
                var boolImg = setTimeout(function fn(){
                    if(document.getElementById("j_id0:testImg").complete){//判断图片是否加载完成
                        loadImage();
                        cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
                    }else{
                        counter ++;
                        //如果5分钟之内图片还没有加载出来，就停止setTimeout
                        if(counter <= 30000){
                            setTimeout(fn,16);
                        }else{
                            clearTimeout(boolImg);//停止定时任务
                        }
                    }
                },10);
            }
            //点击或下一行时，表格行变色
            function changeColor(accId){
                var trs=[];
                var trs1=[];
                var identifier=document.getElementById("identifier").value;
                var identifier2=document.getElementById("identifier2").value;
                
                if(identifier =='经销商'){
                    trs = document.getElementById('tableHeader_L').getElementsByTagName('tr');
                    for(var i = 1;i<trs.length;i++){
                        var onId = trs[i].cells[2].innerText.trim();
                        if(onId == accId){
                            trs[i].style.backgroundColor = "#e3f3ff";
                        }else{
                            trs[i].style.backgroundColor = "#fff";
                        }
                    }
                }
                if(identifier2 =='医院'){
                    trs1 = document.getElementById('tableHeader_M').getElementsByTagName('tr');
                    for(var j = 1;j<trs1.length;j++){
                    var onId = trs1[j].cells[2].innerText.trim();
                    if(onId == accId){
                        trs1[j].style.backgroundColor = "#e3f3ff";
                    }else{
                        trs1[j].style.backgroundColor = "#fff";
                    }
                }
                }
            }
            //关闭按钮
            function closePop(){
                debugger
                var eSignFormAutoSign = "{!eSignForm.agencyAutoSignUpStatus__c}";
                var eSignFormHPSign = "{!eSignForm.HPSignUpStatus__c}";
                if(eSignFormAutoSign!="申请中"&&eSignFormHPSign!="申请中"){
                    closePreview();
                }else{
                    if(eSignFormAutoSign=="申请中"&&eSignFormHPSign=="申请中"){
                        // var accContentType = document.getElementById("newContentType").value;
                        // if(accContentType=="经销商"){
                            JinXiaoShang();
                        // }else if(accContentType=="医院"){
                        //  YiYuan();
                        // }
                    }else if(eSignFormAutoSign=="申请中"&&eSignFormHPSign!="申请中"){
                        JinXiaoShang();
                    }else if(eSignFormAutoSign!="申请中"&&eSignFormHPSign=="申请中"){
                        YiYuan();
                    }
                }
            }
            //经销商审核
            function JinXiaoShang(){
                //当前用户登录id
                var userId = "{!CASESAFEID($User.Id)}";
                        //当前用户简档id
                        var ProfileId = "{!$Profile.Id}";
                        //先判断是否为集采课
                        var Group_purchase_PCL ;
                        var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}";
                        if(Group_purchase_PCLFlag=='true'){
                            Group_purchase_PCL = '集采课';
                        }else{
                            Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}";
                        }
                        //检索OCSM管理省 上的营业管理部担当
                        var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'";
                        sforce.connection.sessionId = '{!$Api.Session_ID}';
                        var ocsmResult = sforce.connection.query(sql);
                        var ocsm = ocsmResult.getArray("records");
                        //营业管理部担当id
                        var salesManage;
                        if (ocsm) {
                        salesManage = ocsm[0].SalesManage__c;
                        }
                        //电子签收单id
                        var id = "{!eSignForm.Id}";
                        //new 一个对象
                        var eSignForm;
                        //经销商状态
                        var status = "{!eSignForm.agencyAutoSignUpStatus__c}";
                        if(ProfileId!=undefined){
                            ProfileId=ProfileId.substring(0,15);
                        }
                        if (salesManage || ProfileId == '00e10000000Y3o5') {
                            if (salesManage != userId && ProfileId != '00e10000000Y3o5') {
                                // alert('您只能审批营业管理部担当是自己的签收单！');
                                closePreview();
                                return;
                            } else if (status != '申请中') {
                                // alert('您只能审批申请中的签收单！')
                                closePreview();
                                return;
                            } else if (!'{!eSignForm.agencySignUpDate__c}') {
                                // alert('经销商签收日为空时，不可以确认！');
                                closePreview();
                                return;
                            }else{
                                if(confirm("是否审核?")){
                                    window.open ('/apex/AgencyConfirmPage?id='+"{!eSignForm.Id}", '经销商确认',
                                    'height=440, width=750, top=150, left=300, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
                                }else{
                                    hiddenImge();
                                    //关闭按钮展示 onClose
                                    document.getElementById("onCloseId").style.display='none';
                                }
                            }
                        }
            }
            //医院审核
            function YiYuan(){
                //当前用户登录id
                var userId = "{!CASESAFEID($User.Id)}";
                //当前用户简档id
                var ProfileId = "{!$Profile.Id}";
                //先判断是否为集采课
                var Group_purchase_PCL ;
                var Group_purchase_PCLFlag = "{!eSignForm.Group_purchase_PCL__c}";
                if(Group_purchase_PCLFlag=='true'){
                    Group_purchase_PCL = '集采课';
                }else{
                    Group_purchase_PCL = "{!eSignForm.OCM_man_province_cus__c}";
                }
                //检索OCSM管理省 上的营业管理部担当
                var sql = "select id, Name, SalesManage__c from OCM_Management_Province__c where Name = "+"\'"+Group_purchase_PCL+"\'";
                sforce.connection.sessionId = '{!$Api.Session_ID}';
                var ocsmResult = sforce.connection.query(sql);
                var ocsm = ocsmResult.getArray("records");
                //营业管理部担当id
                var salesManage;
                if (ocsm) {
                    salesManage = ocsm[0].SalesManage__c;
                }

                //电子签收单id
                var id = "{!eSignForm.Id}";
                //new 一个对象
                var eSignForm;
                //医院状态
                var status = "{!eSignForm.HPSignUpStatus__c}";
                //销售渠道
                var sales_Root_Formula = "{!eSignForm.Sales_Root_Formula__c}";
                if(ProfileId!=undefined){
                    ProfileId=ProfileId.substring(0,15);
                }
                if (salesManage || ProfileId == '00e10000000Y3o5') {
                    if (salesManage != userId && ProfileId != '00e10000000Y3o5') {
                        // alert('您只能审批营业管理部担当是自己的签收单！');
                        closePreview();
                        return;
                    } else if (status != '申请中') {
                        // alert('您只能审批申请中的签收单！')
                        closePreview();
                        return;
                    } else if (!'{!eSignForm.HPSignUpDate__c}') {
                        // alert('医院签收日为空时，不可以确认！');
                        closePreview();
                        return;
                    }else{
                        if(sales_Root_Formula == 'OCM直接販売'){
                            if(confirm("是否审核?")){
                                window.open ('/apex/HPDirectSalesConfirmPage?id='+"{!eSignForm.Id}", '医院确认',
                                'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
                            }else{
                                hiddenImge();
                                //关闭按钮展示 onClose
                                document.getElementById("onCloseId").style.display='none';
                            }
                        }else{
                            if(confirm("是否审核?")){
                                window.open ('/apex/HPConfirmPage?id='+"{!eSignForm.Id}", '医院确认',
                                'height=340, width=600, top=200, left=400, toolbar=no, menubar=no, scrollbars=no, location=no, status=no');
                            }else{
                                hiddenImge();
                                //关闭按钮展示 onClose
                                document.getElementById("onCloseId").style.display='none';
                            }
                        }
                    }
                }
            }
            //关闭预览提示框
            function closePreview(){
                if(confirm("真的要关闭吗?")){
                    hiddenImge();
                    //关闭按钮展示 onClose
                    document.getElementById("onCloseId").style.display='none';
                    debugger
                }
            }
            //点击关闭按钮，需要把右边的试图隐藏
            function hiddenImge(){
                canvas = document.getElementById("canvas");
                canvas.height=canvas.height; //清空canvas画布

                // 隐藏右边的图片展示
                let popDiv = document.getElementById("pandiv");
                popDiv.style.display = "none";
                
                //上一张和下一张隐藏
                $(".left").hide();
                $(".right").hide();

                document.getElementById("blankId").style.display='block';
                document.getElementById("imgeDiv").style.display='none';
            }

            function showImge(){
                document.getElementById("contentId").style.display = "block";
                document.getElementById("canvas").style.display = "block";
                canvas = document.getElementById("canvas");
                // canvas.height=canvas.height; //清空canvas画布
                canvas.height=screen.availHeight*0.65;
                let popDiv = document.getElementById("pandiv");
                popDiv.style.display = "block";
                //上一张和下一张显示
                $(".left").show();
                $(".right").show();
                //查看原图链接取消隐藏
                $("#ViewOriginal").show();
                //关闭“暂时只支持图片文件的预览”文字提示
                document.getElementById("fontpdf").style.display = "none";
            }

            //增加pdf关闭按钮  精琢技术 thh 2021-09-27 start
            function showPdf(){
                document.getElementById("canvas").style.display = "none";
                //显示“暂时只支持图片文件的预览”
                let fontpdf = document.getElementById("fontpdf");
                fontpdf.style.display = "block";
                // 隐藏右边的图片展示
                let popDiv = document.getElementById("pandiv");
                popDiv.style.display = "none";
                document.getElementById("contentId").style.display = "none";
                //上一张和下一张隐藏
                $(".left").hide();
                $(".right").hide();
                $("#ViewOriginal").hide();
            }
            //增加pdf关闭按钮  精琢技术 thh 2021-09-27 end

            // windowToCanvas此方法用于鼠标所在点的坐标切换到画布上的坐标
            function windowToCanvas(canvas, x, y) {
             var bbox = canvas.getBoundingClientRect();
             return {
              x : x - bbox.left - (bbox.width - canvas.width) / 2,
              y : y - bbox.top - (bbox.height - canvas.height) / 2
             };
            }
              
            function isPointInImageArea(point) {
             return true;
            }
            function isPointInCanvasArea(point) {
             return true;
            }
            function isDivArea(point) {
             return true;
            }
              
            canvas.onmousewheel = canvas.onwheel = function(event) {
             var pos = windowToCanvas(canvas, event.clientX, event.clientY);
             event.wheelDelta = event.wheelDelta ? event.wheelDelta
               : (event.deltaY * (-40));
              
             if (event.wheelDelta > 0) {
              
              if (isPointInImageArea(pos)) {
               imgScale *= 2;
               
               imgX = (canvas.width - img.width * imgScale) / 2
               imgY = (canvas.height - img.height * imgScale) / 2
              } else {
               imgScale *= 2;
               
               imgX = (canvas.width - img.width * imgScale) / 2
               imgY = (canvas.height - img.height * imgScale) / 2
              }
             } else {
              
              if (isPointInImageArea(pos)) {
               imgScale /= 2;
               
               imgX = (canvas.width - img.width * imgScale) / 2
               imgY = (canvas.height - img.height * imgScale) / 2
              } else {
               imgScale /= 2;
               
               imgX = (canvas.width - img.width * imgScale) / 2
               imgY = (canvas.height - img.height * imgScale) / 2
              }
             }
             drawImage();
             return false;
            }
              
            /**旋转angle度*/
            function rateImage(angle) {
                debugger
             currentRate = (currentRate + angle) % 360;
              
             cxt.clearRect(0, 0, canvas.width, canvas.height);
 
             cxt.translate(canvas.width / 2, canvas.height / 2);
             cxt.save();
             cxt.rotate(angle * Math.PI / 180);
             cxt.translate(-canvas.width / 2, -canvas.height / 2);
             imgScale = 1;
             reLoadImage();
             drawImage();
            }

            function reLoadImage() {
             loadImage();
            }
              
            /**鼠标按下*/
            pandiv.onmousedown = function(event) {
             mouseDownLocation = windowToCanvas(canvas, event.clientX, event.clientY);
             if (isPointInImageArea(mouseDownLocation)) {
              isMouseDown = true;
              document.title = '查看附件';
             }
            }
            /**鼠标弹起*/
            document.body.onmouseup = function() {
             isMouseDown = false;
             canvas.style.cursor = "default";
             document.title = '查看附件';
            }
            /**鼠标移动*/
            pandiv.onmousemove = function(event) {
             if (isMouseDown) {
              canvas.style.cursor = "move";
              var newMouseLocation = windowToCanvas(canvas, event.clientX,
                event.clientY);
              if (isDivArea({
               x : event.clientX,
               y : event.clientY
              })) {
               var x = newMouseLocation.x - mouseDownLocation.x;
               var y = newMouseLocation.y - mouseDownLocation.y;
               mouseDownLocation = newMouseLocation;
               /**根据角度，计算图片偏移*/
               if (0 == currentRate) {
                imgX += x;
                imgY += y;
               } else if (90 == currentRate) {
                imgX += y;
                imgY -= x;
               } else if (180 == currentRate) {
                imgX -= x;
                imgY -= y;
               } else if (270 == currentRate) {
                imgX -= y;
                imgY += x;
               }
              } else {
               /** 鼠标移动至画布范围外，置鼠标弹起 */
               isMouseDown = false;
               canvas.style.cursor = "default";
               document.title = 'mouse up';
              }
              drawImage();
             }
            }
            pandiv.onmouseover = function() {
             control.style.display = "block";
            }
            canvas.onmouseout = function() {
             control.style.display = "none";
            }

            //加载图片
            function loadImage() {
             if (img.width <= canvas.width && img.height <= canvas.height) {
              imgX = (canvas.width - img.width * imgScale) / 2
              imgY = (canvas.height - img.height * imgScale) / 2;
             } else {
              var ratio = img.width / img.height;
              widthTime = img.width / canvas.width;
              heightTime = img.height / canvas.height;
              
              if (widthTime > heightTime) {
               img.width = canvas.width;
              
               img.height = canvas.width / ratio;
              } else {
               img.height = canvas.height;
               img.width = canvas.height * ratio;
              
              }
              
              imgX = (canvas.width - img.width * imgScale) / 2
              imgY = (canvas.height - img.height * imgScale) / 2
             }
            }

            pandiv.onmouseover = function() {
                control.style.display = "block";
            }
            canvas.onmouseout = function() {
                control.style.display = "none";
            }

            //由于图片不能直接下载(只能预览) 用户需要保存原图 这里做简单切换 用户另存为保存图片
            function ViewOriginalImage(){
                //查看原图时，隐藏下一张和上一张的样式
                $(".left").hide();
                $(".right").hide();
               
              //查看原图取消隐藏
              document.getElementById("j_id0:testImgOriginal").style.display='block';
              //查看预览框隐藏
              document.getElementById("pandiv").style.display='none';
              //查看原图链接隐藏
              $("#ViewOriginal").hide();
             $("#Original").show();
             //查看预览链接取消隐藏
              $("#ViewPreview").show();
              //原始宽度
              var nowWidth = document.body.clientWidth;
              //原始高度
              var nowHeight = document.body.clientHeight;
              //如果现在图片的高度 大于屏幕高度 就给div赋值高度 
              //如果现在图片的宽度 大于屏幕宽度 就给div赋值宽度
              if(nowHeight>OriginalHeight){
                document.getElementById("j_id0:testImgOriginal").style.height = OriginalHeight*0.86+'px';
              }else if(nowWidth>OriginalWidth){
                document.getElementById("j_id0:testImgOriginal").style.width = OriginalWidth*0.86+'px'; //
              }
            }

            function ViewPreview(){
                //查看预览时，显示下一张和上一张的样式
                $(".left").show();
                $(".right").show();
               //查看原图隐藏
               document.getElementById("j_id0:testImgOriginal").style.display='none';
              //查看预览框取消隐藏
              document.getElementById("pandiv").style.display='block';
              //查看原图链接取消隐藏
              $("#ViewOriginal").show();
              //查看预览链接隐藏
              $("#ViewPreview").hide();
              $("#Original").hide();
            }

            //画图
            function drawImage() {
              var bbox = canvas.getBoundingClientRect();
              cxt.clearRect(-200, -200, canvas.width * 2, canvas.height * 2);
              cxt.drawImage(img, imgX, imgY, img.width * imgScale, img.height * imgScale);
             }

            //js取url参数
            //20201221 liying start
            function GetQueryValue(queryName) {
                  var query = decodeURI(window.location.search.substring(1));
                  var vars = query.split("&");
                 for (var i = 0; i < vars.length; i++) {
                     var pair = vars[i].split("=");
                     if (pair[0] == queryName) { return pair[1]; }
                 }
                 return null;
             }
             //20201221 liying end

             function fadeIn(ele,speed){
                var ele=document.getElementById(ele);
                var opacitynum=ele.style.opacity||0;
                var speed=(speed/100)||10;
                function opacityAdd(){
                    if(opacitynum<1){
                        ele.style.opacity=opacitynum=(parseFloat(opacitynum)+0.01).toFixed(2);
                    }else{
                        clearInterval(opacityt);
                    }
                }
                var opacityt=setInterval(opacityAdd,speed);
            }
   
        </script>
    </body>
</apex:page>