<%@page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">  
<link rel="stylesheet" type="text/css" href="/SinoGYS/css/weui.css">
<link rel="stylesheet" type="text/css" href="/SinoGYS/weixincss/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="/SinoGYS/css/base.css">
<script src="/SinoGYS/js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="/SinoGYS/layer/skin/layer.css"></script>
<script type="text/javascript" src="/SinoGYS/layer/layer.js"></script> 
<script src="/SinoGYS/js/static/jquery.min.js"></script>  
<script src="/SinoGYS/js/static/jquery-weui.js"></script>  
<script src="/SinoGYS/js/static/lrz/lrz.bundle.js"></script> 
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
<title>中道救援服务商管理中心</title>
<style type="text/css">
	.upload_btn {
		position: relative;
		margin-left: 8px;
	    margin-right: auto;
	    padding-left: 14px;
	    padding-right: 14px;
	    width:45%;
	    font-size: 18px;
	    text-align: center;
		text-decoration: none;
		cursor: pointer;
		color: white;
		box-sizing: border-box;
	    line-height: 2.33333333;
		border: 1px solid rgba(0, 0, 0, 0.2);
		border-radius: 4px;
		overflow: hidden;
		display: inline-block;
		*display: inline;
		*zoom: 1
	}
	
	.upload_btn  input {
		position: absolute;
		font-size: 100px;
		right: 0;
		top: 0;
		opacity: 0;
		filter: alpha(opacity = 0);
		cursor: pointer
	}
	
	.img_div{
		/* border: 1px solid red; */
		max-height: 60%;
		width: 100%;
		position: relative;
		text-align: center;
	}
	
	.img_div img{
		min-height:200px;
		max-height: 300px;
		max-width: 100%;
	}
</style>
</head>

<%
	int state=Integer.parseInt(request.getParameter("state"));
	int flow_id=Integer.parseInt(request.getParameter("flow_id"));
	String rescueCode=request.getParameter("rescueCode");
	int orderID=Integer.parseInt(request.getParameter("orderId"));
	double lon=Double.parseDouble(request.getParameter("lon"));
	double lat=Double.parseDouble(request.getParameter("lat"));
	int rescueVehicleId=Integer.parseInt(request.getParameter("rescueVehicleId")); 
	System.out.print(lon+"经纬度"+lat);

 %>

<body>
		<header class="hd" style="padding: 25px 0;font-size: 16px;">
  				<h1 class="page_title">上传照片</h1>
		</header>
		<div >
			<div class="weui-row">
		      <div class="weui-col-50 img_div img_div_1" ></div>
		      <div class="weui-col-50 img_div img_div_2" ></div>
		    </div>
			<div class="weui-row">
		      <div class="weui-col-50 img_div img_div_3" ></div>
		    </div>
		
		</div>
	
	
		
	<div class="weui_btn_area" style="position: fixed;bottom: 0px;width: 90%;margin: 0 5% 18px 5%;">
        <a class="upload_btn weui_btn_sino" href="javascript:" >上传 <input accept="image/*" type="file" id="file"/></a>
		<a class="upload_btn weui_btn_primary" href="javascript:" id="upload" >确定</a>
    </div>
    
    <form action="/SinoGYS/UpdateOrderStateAction.do" method=POST name = "frm">
		<input type = "hidden" name = "CMD" value="queryCurrentFlow"/>
		<input type="hidden" id="state" name="state" value="<%=state%>">
		<input type="hidden" id="flow_id" name="flow_id" value="<%=flow_id%>">
		<input type="hidden" id="rescueCode" name="rescueCode" value="<%=rescueCode%>">
		<input type="hidden" id="orderID" name="orderID" value="<%=orderID%>">
		<input type="hidden" id="lon" name="lon" value="<%=lon%>">
		<input type="hidden" id="lat" name="lat" value="<%=lat%>">
		<input type="hidden" id="rescueVehicleId" name="rescueVehicleId" value="<%=rescueVehicleId%>">
		<input type="hidden" id="image_01" name="image_01" value="">
		<input type="hidden" id="image_02" name="image_02" value="">
		<input type="hidden" id="image_03" name="image_03" value="">
	</form>
    
</body>
 
<script type="text/javascript">
	
	var data = new Array();
	var count=0;
	/* $("#file").blur(function(){
	 	$.hideLoading();
	}); 
	$("#file").click(function(){
	 	$.showLoading();
	}); */
	$("#file").change(function(){
		if(count>=3){
			$.alert( "对不起！您上传的照片已达到上限,无法继续上传！");
			
		}else{
			$.showLoading();
		 lrz(this.files[0], {
		        width: 800
		    }).then(function (rst) {
		    data.push(rst.base64.split(",")[1]);
		    console.log(data);
		    console.log(".img_div_"+data.length);
		    var img = new Image();
		   
            img.onload = function () {
                $(".img_div_"+data.length ).html(img);
            }; 
            img.src = rst.base64;  
            $.hideLoading();  
            count=count+1;
        });
	  }
	});
	
	$("#upload").click(function(){
		if(data.length){
			$("#image_01").val(data[0]);
			$("#image_02").val(data[1]);
			$("#image_03").val(data[2]);
		//	var index = window.parent.getlay(); //调用父页面的getlay方法得到layer的index
		//	alert("此时窗口索引"+index);
			$("form").submit();
		}else{
			$.toast("没有图片", "forbidden");
		}
	});
</script>

</html>