 <!DOCTYPE html>
<html lang=zh-cn>
<head>
    <meta charset=utf-8>
    <title>纵横计量支付系统</title>
    <meta name=description content=计量支付>
    <meta name=copyright content=smartcost.com.cn>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel=stylesheet href="{{rootUrl}}global/css/bootstrap.css">
    <link rel="stylesheet" href="{{rootUrl}}global/css/jquery-ui.min.css">
    <link rel=stylesheet href={{rootUrl}}global/css/style.css?201709061>
    <script src={{rootUrl}}global/js/jquery-1.9.1.min.js></script>
    <script src={{rootUrl}}global/js/bootstrap.js></script>
    <script src={{rootUrl}}global/js/jl.js></script>
    <script src="{{rootUrl}}global/js/jquery-ui.min.js"></script>
</head>
<body>
<!-- include "top" -->
<div class="wrapContent">
    <!-- include "left" -->
    <div class="mainContainer" style="overflow-y:hidden">
        <!--内容-->
        <div class="mainContent signContent">
            <div class="title clearfix sign-title-height">
                <div class="fR sign-topbar">
                    <a class="btn btn-primary" href="javascript:void(0);" onclick="addsgin()"><i class="icon-pencil icon-white"></i> 签名</a>
                    <a id="delallsign" class="btn btn-danger" style="display: none" href="javascript:void(0);" onclick="delconfirm();"><i class="icon-remove icon-white"></i> 清除签名</a>
                    <a class="btn btn-default" href="javascript:void(0);" onclick="printdiv('sign_msg')"><i class="icon-print "></i> 打印</a>
                </div>
                <div class="fR sign-page-num">
                    <span id="picnum">1</span> / {{signmsg.pagenum}} 页
                </div>
                <h1><a href="/sign/needlist" title="返回"><span class="closePanel" aria-hidden="true" data-icon="Z"></span></a>&nbsp;{{signmsg.name}}</h1>
            </div>
            <div class="sign-view clearfix">
                <div class="sign-side fR">
                    <div class="view-info">
                        <ul class="list-unstyled">
                            <li><div class="fL">所在项目</div>{{signmsg.project}}</li>
                            <li><div class="fL">标段</div>{{signmsg.tender}}</li>
                            <li><div class="fL">期数</div>第{{ToChinaseNum(signmsg.phaseno)}}期</li>
                        </ul>
                    </div>
                    <div class="signed-list">
                        <ul class="list-unstyled">
                            <!-- if !empty({{auditlist}}) -->
                            <!-- loop auditlist -->
                            <li><div class="no fL">{{auditlist' value.index}}</div><div class="avatars fL"><img src="{{auditlist' value.avatar}}">{{auditlist' value.aname}}</div><div class="corl fR"><!-- if {{auditlist' value.status}} == 'checked' --><span class="colGreen">完成</span><!-- elseif {{auditlist' value.status}} == 'checking' --><span class="colOrange">签署中</span><!-- else --><span class=""></span><!-- endif --></div></li>
                            <!-- endloop -->
                            <!-- endif -->
                        </ul>
                    </div>
                    <div class="btn-bar">
                        <a  href="javascript:void(0);" onclick="judagedonesign();" class="btn btn-success btn-large btn-block">完成签署</a>
                        <div class="clearfix" style="margin-top:15px">
                            <!-- if {{firstsign}} == 0 --><a href="#backsign" data-toggle="modal" class="btn btn-warning fL">退回签署</a><!-- endif -->
                            <a href="#stopsign" data-toggle="modal" class="btn btn-danger<!-- if {{firstsign}} == 1 --> btn-large btn-block<!-- else --> fR<!-- endif -->">终止签署</a>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="maxwidth" value="{{maxwidth}}">
                <input type="hidden" id="maxheight" value="{{maxheight}}">
                <div class="sign-content fL" id="sign_msg">
                    <div class="warp-printer">
                        <!-- if !empty({{attlist}}) -->
                        <!-- loop attlist -->
                        <div class="page" id="pageContainer{{attlist' value.curnum}}" style="background: url('{{rootUrl}}{{attlist' value.filepath}}') no-repeat 0 0;background-size:cover;padding:10px">
                            <img src="{{rootUrl}}{{attlist' value.filepath}}" style="display: none">
                            <!-- if !empty({{attlist' value.auditatt}}) -->
                            <!-- loop attlist' value.auditatt -->
                            <div class="user-sign" style="z-index:10;{{attlist' auditatt' value.position}}">
                                <div class="">
                                    <img src="{{attlist' auditatt' value.picpath}}">
                                </div>
                            </div>
                            <!-- endloop -->
                            <!-- endif -->
                            <div class="user-sign draggable" data-num="{{attlist' value.sid}}_{{attlist' value.said}}" style="position: absolute;top: 10%;left: 10%;z-index: 999;width: 300px;height: 150px;">
                                <div class="img-bar">
                                    <a href="javascript:void(0);" onclick="setallqm({{attlist' value.curnum}})" title="批量签名" class="allqm" style="display: none"><span data-icon="v" aria-hidden="true" ></span></a>
                                    <a href="javascript:void(0);" onclick="setqm({{attlist' value.curnum}});" title="确定签署" class="sign_confirm"><span data-icon="T" aria-hidden="true" class="colGreen"></span></a>
                                    <a href="javascript:void(0);" onclick="delqm({{attlist' value.curnum}});" title="删除签名" class="sign_del"><span data-icon="U" aria-hidden="true" class="colRed"></span></a>
                                </div>
                                <div class="focus">
                                    <img src="{{picpath}}">
                                </div>
                            </div>
                        </div>
                        <!-- endloop -->
                        <!-- endif -->
                    </div>
                </div>
            </div>
        </div>
        <!--内容-->
    </div>
</div>
<!-- 完成签署人弹出 -->
<div id="donesign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4 id="signtips"></h4>
                <!--<h4>完成后不可更改，确认完成签署？</h4>-->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-success" onclick="donesign();">确认</button>
            </div>
        </div>
    </div>
</div>
<!-- 退回签署人弹出 -->
<!-- if {{firstsign}} == 0 -->
<div id="backsign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4>退回上一签署人重新签署？</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="backsign();" class="btn btn-warning">确认退回</button>
            </div>
        </div>
    </div>
</div>
<!-- endif -->
<!-- 终止签署人弹出 -->
<div id="stopsign" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <h4>终止该报表签署？</h4>
                <h4>终止后，如需要重新发起签署，请在软件重新生成新一份签署报表。</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="stopsign();" class="btn btn-danger">确认终止</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">autoFlashHeight();</script>
<script>
    $( function() {
        $('.page').css('width',parseInt($('#maxwidth').val())-20+'px');
        $('.page').css('height',parseInt($('#maxheight').val())-20+'px');

        $('#sign_msg').scroll(function(){
            for(var i = 1; i <= $('.page').length; i++){
                var yheight=$('#sign_msg').scrollTop()+200;
                var obj = document.getElementById("pageContainer"+i);
                var tops = obj.offsetTop;//元素距离顶部高度
                var divheight = obj.offsetHeight;//元素高度
                var tops2 = tops+divheight;
                if(tops<=yheight && yheight<tops2) {
                    document.getElementById("picnum").innerHTML = i;
                    break;
                }
            }
        });
        $( ".draggable" ).draggable({ containment: "parent" },{stop: function( event, ui ) {
        }}).resizable({ maxWidth: 600 },{ maxHeight: 300 },{ aspectRatio: true },{
            stop: function( event, ui ) {
//                localStorage.setItem('sign_'+$(this).attr('data-num'),$(this).attr('style'));
            }
        });

        //把本地缓存的信息读出来
        $('.page .draggable').each(function(k,v){
            if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
                $(this).attr('style',localStorage.getItem('sign_'+$(this).attr('data-num')));
                $('#delallsign').show();
            }
            if(localStorage.getItem('status_'+$(this).attr('data-num'))){
                if(localStorage.getItem('status_'+$(this).attr('data-num')) == 'copyhide'){
                    $(this).find(".sign_confirm").hide();
                    $(this).find(".allqm").hide();
                }else if(localStorage.getItem('status_'+$(this).attr('data-num')) == 'copyshow'){
                    $(this).find(".sign_confirm").hide();
                    $(this).find(".allqm").show();
                }
                $(this).draggable( "option", "cancel", ".page" );
                $(this).resizable("option", "cancel", ".page");
                $(this).resizable( "option", "cancel", ".page" );
            }
        });
    } );
</script>
<script type="text/javascript">
    function addsgin() {
        if($('.focus img').attr('src') == '{{rootUrl}}'){
            alert('请先在个人信息中添加属于您的签名照');
            return false;
        }

        var curpage = $('#picnum').text();
        if(localStorage.getItem('sign_'+$( "#pageContainer"+curpage+" .draggable" ).attr('data-num'))){
            alert('第 '+curpage+' 张报表已存在您的签名，无法重复添加');
            return false;
        }
        $("#pageContainer"+curpage+" .draggable").show();
        $("#pageContainer"+curpage+" .draggable").css({'width':"300px","height":"150px","left":"10%","top":"10%","position":"absolute"});
        $( "#pageContainer"+curpage+" .draggable" ).draggable( "option", "cancel", "" );
        $( "#pageContainer"+curpage+" .draggable" ).resizable("option", "cancel", "");
        $( "#pageContainer"+curpage).find(".sign_confirm").show();
        $( "#pageContainer"+curpage).find(".allqm").hide();
//        localStorage.setItem('sign_'+$( "#pageContainer"+curpage+" .draggable" ).attr('data-num'),$( "#pageContainer"+curpage+" .draggable" ).attr('style'));
    }

    function delconfirm(){
        var delall = confirm('确定删除所有签名？');
        if(delall == true){
            $('.page .draggable').each(function(k,v){
                $(this).hide();
                localStorage.removeItem('sign_'+$(this).attr('data-num'));
                localStorage.removeItem('status_'+$(this).attr('data-num'));
            });
            $('#delallsign').hide();
        }else{
            return false;
        }
    }

    function setqm(id) {
        $( "#pageContainer"+id+" .draggable" ).resizable("option", "cancel", ".page").draggable( "option", "cancel", ".page" );
        $( "#pageContainer"+id).find(".sign_confirm").hide();
        $( "#pageContainer"+id).find(".allqm").show();
        $('#delallsign').show();
        localStorage.setItem('sign_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'),$( "#pageContainer"+id+" .draggable" ).attr('style'));
        localStorage.setItem('status_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'),'copyshow');
    }
    function delqm(id) {
        $( "#pageContainer"+id+" .draggable" ).hide();
        localStorage.removeItem('sign_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'));
        localStorage.removeItem('status_'+$( "#pageContainer"+id+" .draggable" ).attr('data-num'));
        var flag = false;
        $('.page .draggable').each(function(k,v){
            if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
                flag = true;
                return;
            }
        });
        if(!flag){
            $('#delallsign').hide();
        }
    }
    function setallqm(id) {
        var left = $( "#pageContainer"+id+" .draggable" ).css('left');
        var top = $( "#pageContainer"+id+" .draggable" ).css('top');
        var width = $( "#pageContainer"+id+" .draggable" ).css('width');
        var height = $( "#pageContainer"+id+" .draggable" ).css('height');
        for(var i = 1; i <= $('.page').length; i++){
            if(id != i){
                $( "#pageContainer"+i+" .draggable" ).css({'width':width,"height":height,"left":left,"top":top,"position":"absolute"});
                $( "#pageContainer"+i+" .draggable" ).show();
                $( "#pageContainer"+i+" .draggable" ).draggable( "option", "cancel", ".page" );
                $( "#pageContainer"+i+" .draggable" ).resizable("option", "cancel", ".page");
                $( "#pageContainer"+i+" .draggable" ).resizable( "option", "cancel", ".page" );
                $( "#pageContainer"+i).find(".sign_confirm").hide();
                $( "#pageContainer"+i).find(".allqm").hide();
                localStorage.setItem('sign_'+$( "#pageContainer"+i+" .draggable" ).attr('data-num'),$( "#pageContainer"+i+" .draggable" ).attr('style'));
            }else{
                $( "#pageContainer"+i).find(".allqm").hide();
            }
            localStorage.setItem('status_'+$( "#pageContainer"+i+" .draggable" ).attr('data-num'),'copyhide');
        }
    }
</script>
<script>
    function printdiv(printpage)
    {
        var maxwidth = $('#maxwidth').val();
        var maxheight = $('#maxheight').val();
        $('.warp-printer').css("max-width",maxwidth+"px");
        $('.page').css('width',parseInt(maxwidth)+'px');
        $('.page').css('height',parseInt(maxheight)+'px');
        $('.page img').show();
        $('.page').find('.img-bar').hide();
        $('.page').css('padding','0px');
        var headstr = '<html><head><title></title><link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"><style type="text/css" media="print">' +
                '@page {size: {{style}}; margin: 0mm; padding: 0mm; border:0mm; } @media print body {margin:0mm;padding:0mm;border: 0mm} .warp-printer .page{margin:0mm;padding:0mm;border: 0mm;widows:0 orphans:0} .sign-content .page{margin:0mm;padding:0mm;border: 0mm;widows:0 orphans:0}' +
                '</style></head><body>';
        var footstr = '</body>';
        var newstr = document.all.item(printpage).innerHTML;
        var oldstr = document.body.innerHTML;
        //把数据存到本地缓存中
//        $('.page .draggable').each(function(k,v){
//            if($(this).attr('style')){
//                localStorage.setItem('sign_'+$(this).attr('data-num'),$(this).attr('style'));
//            }
//        });
        document.body.innerHTML = headstr+newstr+footstr;
        window.print();
        document.body.innerHTML = oldstr;
        window.location.reload();
        return false;
    }

    function judagedonesign()
    {
        var flag = false;
        var num = 0;
        $('.page .draggable').each(function(k,v){
            if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
                flag = true;
//                return;
                num++;
            }
//            if($(this).attr('style') && $(this).css('display') == 'block'){
//                flag = true;
//                return;
//            }
        });
        if(flag){
            if(num < {{signmsg.pagenum}}){
                $('#signtips').html('<span class="text-danger">报表存在未签署或未点击确认的签名，确认提交吗？</span><img src="{{rootUrl}}global/images/signtipsimg.png">');
            }else{
                $('#signtips').text('完成后不可更改，确认完成签署？');
            }
            $('#donesign').modal('show');

        }else{
            alert('请至少签署一个报表');
        }
    }

    function donesign(){
        var saidarray = new Array();
        var positionarray = new Array();
        var i = 0;
        $('.page .draggable').each(function(k,v){
            if(localStorage.getItem('sign_'+$(this).attr('data-num'))){
                saidarray[i] = $(this).attr('data-num').split('_')[1];
                positionarray[i] = $(this).attr('style');
                i++;
            }
            localStorage.removeItem('sign_'+$(this).attr('data-num'));
            localStorage.removeItem('status_'+$(this).attr('data-num'));
        });

        $.ajax({
            type: 'post',
            url: '/sign/donesign',
            data:{sid:'{{signsid}}',path:'{{picpath}}',said:saidarray,position:positionarray},
            dataType: 'json',
            success: function(result){
                if(result.code == 400){
                    alert(result.msg);
                }else{
                    window.location.href = result.url;
                }

            }
        })
    }

    function stopsign() {
        $.ajax({
            type:'post',
            url:'/sign/needview/{{signsid}}',
            data:{status:'stop'},
            dataType: 'json',
            success: function(result){
                if(result.code == 200){
                    window.location.href = result.url;
                }else{
                    alert(result.msg);
                }
            }
        })
    }

    function backsign() {
        $.ajax({
            type:'post',
            url:'/sign/needview/{{signsid}}',
            data:{status:'back'},
            dataType: 'json',
            success: function(result){
                if(result.code == 200){
                    window.location.href = result.url;
                }else{
                    alert(result.msg);
                }
            }
        })
    }
</script>
</body>