<script type="text/javascript">    
    $(document).ready(function(){   

        var glass = function(id,dia,mr,shape){
		    //参数初始化
		    dia=dia==undefined?100:dia;
		    mr=mr==undefined?2:mr,
		    shape=shape==undefined?50:shape
		    //找到当前对象,z-index底层对象1，放大镜2，复制对象3
		    var _this = this;
		    var dx1 = $("#"+id);
		    var dx1width=parseInt(dx1.css("width").replace("px",""));
		    var dx2 = dx1.clone();
		    var gls = "<div id='"+id+"gls'></div>"
		    var glsimg = "<img id='"+id+"glsimg' src='"+dx1.attr("src")+"'>"
		    dx2.attr("id",id+"clone")
		    dx1.after(dx2);
		    dx2.after(gls);
		    var gls1 = $("#"+id+"gls");
		    gls1.append(glsimg);
		    var glsimg1 = $("#"+id+"glsimg");
		    dx1.parent().css({
			    "position":"relative"
		    })
		    dx1.css({
			    "position":"absolute",
			    "z-index":"1"
		    })
		    dx2.css({
			    "width":dx1width,
			    "position":"absolute",
			    "z-index":"3",
			    "opacity":"0",
			    "cursor":"crosshair",
			    "margin":dx1.css("margin"),
			    "left":dx1.css("left"),
			    "top":dx1.css("top"),
			    "right":dx1.css("right"),
			    "bottom":dx1.css("bottom"),
		    })
		    gls1.css({
			    //"border":"1px solid lightgray",
			    "width":dia+"px",
			    "height":dia+"px",
			    "border-radius":""+shape+"%",
			    "position":"fixed",
			    "z-index":"2",
			    "overflow":"hidden",
			    "display":"none",
			    "background-color":"black"
		    })
		    glsimg1.css({
			    "margin-left": dia/2+"px",
			    "margin-top":dia/2+"px",
			    "width":(dx1width*mr)+"px"
		    })
		    dx2.mousemove(function(e){
			    var sy = $(document).scrollTop()
			    var sx = $(document).scrollLeft()
			    //定位放大镜的位置
			    gls1.css({
				    "top":e.pageY-(dia/2)-sy,
				    "left":e.pageX-(dia/2)-sx
			    })
			    //放大图片的位移
			    glsimg1.css({
				    "margin-top":(dia/2)-e.offsetY*mr,
				    "margin-left":(dia/2)-e.offsetX*mr
			    })
		    })
		    dx2.mouseenter(function(){
			    gls1.show();
		    })
		    dx2.mouseleave(function(){
			    gls1.hide();
		    })
	    };
    

        {% for img in images %}
            glass("img_{{id}}_{{forloop.counter}}",200,4,50);            
        {% endfor %}


        var dlgId='#custom-url-modal';
        $(dlgId+' .btn-approve,'+dlgId+' .btn-reject,'+dlgId+' .btn-scrap')
                .unbind('click').bind('click',function(){  
            var btn_ids=$(this).attr('class').split(' ');
            var action='';
            var msg='';
            if(btn_ids.indexOf("btn-scrap")>-1){
                action='scrap';
                msg='申请已作废';
            }else{
                if(btn_ids.indexOf("btn-reject")>-1){
                    action='reject';
                    msg="申请已驳回";
                }else{
                    action='approve';
                    msg="申请已通过申核";
                }
            };
            var app_id=$(dlgId+' .app_id').val();
            $(dlgId).modal('hide');
            $.ajax({
                type:'POST',
                url:'{{request.path}}',
                dataType:'json',
                data:{"id":app_id,"action":action},
                success: function(data) {  
                    if(data.e!=''){
                        toastr.error(data.e); 
                    }else{                        
                        toastr.success(msg);
                        $('#tb_application tbody a[app_id="'+app_id+'"]').closest('tr').find('td:nth-child(10)').text(data.status);                        
                    };
                },
                beforeSend: function (xhr, settings) {                    
                        xhr.setRequestHeader("X-CSRFToken", '{{csrf_token}}');                    
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert('连接服务器失败');
                    return;
                }  
            });
        });
    });
</script>


<div class="row">
    <input class='app_id' type='hidden' value='{{id}}' />
    <div style="display: flex;padding: 1rem;font-size: 1.4rem;border-bottom: 1px solid #d5d5d5;">
        {% ifequal payment_method 1 %}
            <div>
                收款人实名: <b>{{payee_name}}</b> 
            </div>
            <div style="margin-left:1.5rem;">
                申请提现金额: ￥ <b>{{amount}}</b> 
            </div>
            <div style="margin-left:2rem;">
                申请人微信: <img src="{{wx_headimgurl}}" style="width:25px;height:25px;" />
            </div>
            <div style="margin-left:0.5rem;">
                <b>{{wx_nickname}}</b>
            </div>
        {% else %}
            <div>
                收款行: <b>{{bank_name}}</b> 
            </div>
            <div style="margin-left:1.5rem;">
                帐号: <b>{{bank_account}}</b>
            </div>
            <div style="margin-left:2rem;">
                收款人: <b>{{payee}}</b>
            </div>
            <div style="margin-left:0.5rem;">            
                金额：￥ <b>{{amount}}</b> 
            </div>
        {% endifequal %}
        <div style="margin-left:1.5rem;">
            发票图片张数: {{images | length}}
        </div>
    </div>
    <div>
        {% for img in images %}
            <div class="col-xs-6">  
                <p class="lead" style='font-size: 1.4rem;margin-top:10px;margin-bottom:0px;'>
                    <span>上传账号: <b>{{img.user_name}}</b></span>
                    <span style='margin-left: 2rem;'>上传时间: <b>{{img.time}}</b></span>
                </p>
                <img id="img_{{id}}_{{forloop.counter}}" src="{{img.image}}"  style="width:100%;max-height:660px;">
            </div>
        {% endfor %}
    </div>

</div>
