<!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/style.css?20170828>
    <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>
</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-default" href="javascript:void(0);" onclick="printdiv('sign_msg')"><i class="icon-print "></i> 打印</a>
                </div>
                <h1><a href="/sign/create" 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" id="signerlist">
                        <ul class="list-unstyled">
                        </ul>
                        <li class="add"><a href="#addsign" data-toggle="modal">+ 添加签署人</a></li>
                    </div>
                    <div class="btn-bar">
                        <input type="hidden" id="signid" value="{{signmsg.sid}}">
                        <a id="signbtn" onclick="upsigner();" href="javascript:void(0);" class="btn btn-default btn-large btn-block disabled">发起签署</a>
                    </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}}"><img src="{{rootUrl}}{{attlist' value.filepath}}"></div>
                        <!-- endloop -->
                        <!-- endif -->
                    </div>
                </div>
            </div>
        </div>
        <!--内容-->
    </div>
</div>
<!-- 添加签署人弹出 -->
<div id="addsign" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">添加签署人</h4>
            </div>
            <div class="modal-body">
                <div class="">
                    <h5>原报人:</h5>
                    <ul class="clearfix moadl-avatars" id="reportlist">
                        <!-- if !empty({{reportlist}}) -->
                        <li>
                            <a class="fR btn btn-sm btn-primary" data-userid="{{reportlist.userid}}" data-user="{{reportlist.userid}}&&{{reportlist.name}}&&{{reportlist.avatar}}">添加</a>
                            <p><span class=" icon-user"></span> <b>{{reportlist.name}}</b></p>
                            <p>{{reportlist.jobs}}</p>
                        </li>
                        <!-- endif -->
                    </ul>
                </div>
                <div class="">
                    <h5>标段审批人:</h5>
                    <ul class="clearfix moadl-avatars" id="userlist">
                        <!-- if !empty({{userlist}}) -->
                        <!-- loop userlist -->
                        <li>
                            <a class="fR btn btn-sm btn-primary" data-userid="{{userlist' value.userid}}" data-user="{{userlist' value.userid}}&&{{userlist' value.name}}&&{{userlist' value.avatar}}">添加</a>
                            <p><span class=" icon-user"></span> <b>{{userlist' value.name}}</b></p>
                            <p>{{userlist' value.jobs}}</p>
                        </li>
                        <!-- endloop -->
                        <!-- endif -->
                    </ul>
                </div>
                <div class="">
                    <h5>添加新签署人:</h5>
                    <div class="input-group col-xs-8">
                        <input class="span3 form-control" type="text" placeholder="输入邮箱地址检索" id="searchuser">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button" onclick="searchuser();">搜索</button>
                </span>
                    </div>
                    <ul class="clearfix moadl-avatars" id="resultsearch">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加签署人弹出 -->
<!-- 发起签署弹出 -->
<div id="starsign" 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" class="btn btn-success" onclick="uploadsign();">确认</button>
            </div>
        </div>
    </div>
</div>
<!-- 发起签署弹出 -->
<script type="text/javascript">autoFlashHeight();</script>
<script>
    function printdiv(printpage)
    {
        var maxwidth = $('#maxwidth').val();
        $('.warp-printer').css("max-width",maxwidth+"px");
        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;
        document.body.innerHTML = headstr+newstr+footstr;
        window.print();
        document.body.innerHTML = oldstr;
        window.location.reload();
        return false;
    }

    function searchuser(){
        var search = $('#searchuser').val();
        if(search.trim() == ''){
            alert('请输入邮箱地址');
            return false;
        }else{
            $.ajax({
                type: 'get',
                url: '/sign/search/user',
                data: {email:search},
                dataType: 'json',
                success: function(result){
                    var html = '';
                    if(result.code == 400){
                        alert(result.msg);
                    }else{
                        html += '<li><a class="fR btn btn-sm btn-primary" data-user="'+result.user.userid+'&&'+result.user.name+'&&'+result.user.avatar+'">添加</a> <p><span class=" icon-user"></span> <b>'+result.user.name+'</b></p> <p>'+result.user.jobs+'</p></li>'
                    }
                    $('#resultsearch').html(html);
                    $('#resultsearch li a').on('click',function(){
                        var userarr = $(this).attr('data-user').split('&&');
                        var flag = true;
                        $('#signerlist ul li').each(function(){
                            if($(this).attr('data-sid') == userarr[0]){
                                alert('不能重复添加签署人');
                                flag = false;
                                return;
                            }
                        });
                        if(flag){
                            var html = '<li data-sid="'+userarr[0]+'"> <div class="no fL">'+($('#signerlist ul li').length+1)+'</div> <div class="avatars fL"><img src="{{rootUrl}}'+userarr[2]+'">'+userarr[1]+'</div> <div class="corl fR"><a href="#" class="colRed">移除</a></div> </li>';
                            $('#signerlist ul').append(html);
                            $('#signbtn').addClass('btn-primary').removeClass('disabled');
                            $('#userlist li').each(function(){
                                if($(this).children('a').attr('data-userid') == userarr[0]){
                                    $(this).children('a').removeClass('btn-primary').addClass('btn-default').addClass('disabled');
                                    return;
                                }
                            });
                            if($('#reportlist li a').attr('data-userid') == userarr[0]){
                                $('#reportlist li a').removeClass('btn-primary').addClass('btn-default').addClass('disabled');
                            }
                            alert('添加成功');
                            $('#resultsearch').html('');
                        }

                        $('#signerlist ul li a').on('click',function(){
                            var sid = $(this).parents('li').attr('data-sid');
                            $('#userlist li').each(function(){
                               if($(this).children('a').attr('data-userid') == sid){
                                   $(this).children('a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                                   return;
                               }
                            });
                            if($('#reportlist li a').attr('data-userid') == sid){
                                $('#reportlist li a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                            }
                            $(this).parents('li').remove();
                            if($('#signerlist ul li').length == 0){
                                $('#signbtn').removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                            }else{
                                var i =1;
                                $('#signerlist ul li').each(function(){
                                    $(this).children('.no').text(i);
                                    i++;
                                });
                            }
                        })
                    })

                }
            })
        }
    }

    function upsigner(){
        if($('#signbtn').hasClass('disabled')){
            return false;
        }else{
            $('#starsign').modal('show');
        }
    }

    function uploadsign(){
        var idarr = [];
        var namearr = [];
        $('#signerlist ul li').each(function(){
            idarr.push($(this).attr('data-sid'));
            namearr.push($(this).children('.avatars').text());
        });
        $.ajax({
            type: 'post',
            url: '/sign/upsigner',
            data: {ids:idarr,names:namearr,sid:$('#signid').val()},
            dataType: 'json',
            success: function(result){
                if(result.code == 400){
                    alert(result.msg);
                }else{
                    window.location.href = '/sign/mylist';
                }
            }
        })
    }
</script>
<script>
    $(function(){
        $('.page').css('width',$('#maxwidth').val()+'px');

        $('#userlist li a').on('click',function(){
            if($(this).hasClass('disabled')){
                return false;
            }
            var userarr = $(this).attr('data-user').split('&&');
            var flag = true;
            $('#signerlist ul li').each(function(){
                if($(this).attr('data-sid') == userarr[0]){
                    alert('不能重复添加签署人');
                    flag = false;
                    return;
                }
            });
            if(flag){
                var html = '<li data-sid="'+userarr[0]+'"> <div class="no fL">'+($('#signerlist ul li').length+1)+'</div> <div class="avatars fL"><img src="{{rootUrl}}'+userarr[2]+'">'+userarr[1]+'</div> <div class="corl fR"><a href="#" class="colRed">移除</a></div> </li>';
                $('#signerlist ul').append(html);
                $('#signbtn').addClass('btn-primary').removeClass('disabled').removeClass('btn-default');
                $(this).removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                if($('#reportlist li a').attr('data-userid') == userarr[0]){
                    $('#reportlist li a').removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                }
                alert('添加成功');
            }

            $('#signerlist ul li a').on('click',function(e){
                var sid = $(this).parents('li').attr('data-sid');
                $('#userlist li').each(function(){
                    if($(this).children('a').attr('data-userid') == sid){
                        $(this).children('a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                        return;
                    }
                });
                if($('#reportlist li a').attr('data-userid') == sid){
                    $('#reportlist li a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                }
                $(this).parents('li').remove();
                if($('#signerlist ul li').length == 0){
                    $('#signbtn').removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                }else{
                    var i =1;
                    $('#signerlist ul li').each(function(){
                        $(this).children('.no').text(i);
                        i++;
                    });
                }
            })
        });

        $('#reportlist li a').on('click',function(){
            if($(this).hasClass('disabled')){
                return false;
            }
            var userarr = $(this).attr('data-user').split('&&');
            var flag = true;
            $('#signerlist ul li').each(function(){
                if($(this).attr('data-sid') == userarr[0]){
                    alert('不能重复添加签署人');
                    flag = false;
                    return;
                }
            });
            if(flag){
                var html = '<li data-sid="'+userarr[0]+'"> <div class="no fL">'+($('#signerlist ul li').length+1)+'</div> <div class="avatars fL"><img src="{{rootUrl}}'+userarr[2]+'">'+userarr[1]+'</div> <div class="corl fR"><a href="#" class="colRed">移除</a></div> </li>';
                $('#signerlist ul').append(html);
                $('#signbtn').addClass('btn-primary').removeClass('disabled').removeClass('btn-default');
                $(this).removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                $('#userlist li').each(function(){
                    if($(this).children('a').attr('data-userid') == userarr[0]){
                        $(this).children('a').removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                        return;
                    }
                });
                alert('添加成功');
            }
            $('#signerlist ul li a').on('click',function(e){
                var sid = $(this).parents('li').attr('data-sid');
                $('#userlist li').each(function(){
                    if($(this).children('a').attr('data-userid') == sid){
                        $(this).children('a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                        return;
                    }
                });
                if($('#reportlist li a').attr('data-userid') == sid){
                    $('#reportlist li a').removeClass('disabled').addClass('btn-primary').removeClass('btn-default');
                }
                $(this).parents('li').remove();
                if($('#signerlist ul li').length == 0){
                    $('#signbtn').removeClass('btn-primary').addClass('disabled').addClass('btn-default');
                }else{
                    var i =1;
                    $('#signerlist ul li').each(function(){
                        $(this).children('.no').text(i);
                        i++;
                    });
                }
            })
        })
    })
</script>
</body>