<%@page import="com.sun.org.apache.xalan.internal.xsltc.compiler.sym"%>
<%@page import="com.sino.rrs.entity.RcRescueVehiclePO"%>
<%@ page contentType="text/html" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page isELIgnored="false" %>
<%@ page import="java.util.*"%>
<html>
<head>
<title>订单任务详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> 
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="x-rim-auto-match" content="none">   
<link rel="stylesheet" href="/SinoGYS/weixincss/weui.min.css">
<link rel="stylesheet" href="/SinoGYS/weixincss/jquery-weui.css">
<link rel="stylesheet" href="/SinoGYS/css/newCss/reset.css" />
<link rel="stylesheet" href="/SinoGYS/css/newCss/option.css" />
<link rel="stylesheet" href="/SinoGYS/css/newCss/orderDetail.css" />
<link rel="stylesheet" href="/SinoGYS/css/newCss/jquery.webui-popover.min.css">
<script src="/SinoGYS/js/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript" src="/SinoGYS/layer/layer.js"></script>
<script src="/SinoGYS/js/jquery-weui.js"></script>
<script src="/SinoGYS/js/ajaxHelper.js" type="text/javascript"></script>
<script type="text/javascript" src="/SinoGYS/js/jquery.webui-popover.min.js"></script>
<script src="/SinoGYS/js/json2.js" type="text/javascript"></script>
<script src="/SinoGYS/js/transtates.js?d=<%=new Date().getTime()%>"></script>
<script type="text/javascript" src="/SinoGYS/js/jweixin-1.0.0.js"></script>

<script type="text/javascript">
        var ohtml=document.documentElement;
        function getWidth(){
            var screenWidth=ohtml.clientWidth;
            if(screenWidth<320){
                ohtml.style.fontSize="13.3333px";
            }else if(screenWidth>1080){
                ohtml.style.fontSize="45px";
            }else{
                ohtml.style.fontSize=screenWidth/(1080/45)+"px";
            }
        }
        getWidth();
        window.onresize=function(){
            getWidth();
        };
    </script>
    <style>
    	.inputWrapper {
    		padding-top: 2rem;
    	}
    	
    	#infoCon{
			 flex: 1;
			 text-align: right;
			 font-size:1rem;
		}
    </style>
</head>

<body>
	<input type="hidden" id="nextState" name="nextState" value="${param.nextState }">
	<form id="submit" method="post" action="/SinoGYS/UpdateOrderStateAction.do?CMD=vehicleChanged">
		<input type="hidden" id="state"  name="state" value="${list.STATE}">  <!-- 当前状态 -->
		<input type="hidden" id="flow_id"  name="flow_id" value="${list.FLOW_ID}">
		<input type="hidden" id="orderID"  name="orderID" value="${list.ORDER_ID}">
		<input type="hidden" id="rescueVehicleId"  name="rescueVehicleId" value="${param.rescueVehicleId}">
		<input type="hidden" id="lon"  name="lon" value="">
		<input type="hidden" id="lat"  name="lat" value="">
	</form>
	
	<div class="orderInfoWrapper">
  		<ul class="orderInfoUl">
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					订单编号
  				</div>
  				<div class="infoCon">
  					${list.ORDER_CODE }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					服务类型
  				</div>
  				<div class="infoCon">
  					${list.SERVICE_NAME }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车牌号
  				</div>
  				<div class="infoCon">
  					${list.LICENSE }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车主姓名
  				</div>
  				<div class="infoCon">
  					${list.USER_NAME }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车主电话
  				</div>
  				<div class="infoCon">
  					<a href="tel://${list.USER_PHONE }">${list.USER_PHONE }</a>
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车辆类型
  				</div>
  				<div class="infoCon">
  					${empty list.STYLE?"无":list.STYLE}
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					救援地点
  				</div>
  				<input type="text" class="show-pop" id="infoCon" value="${list.ADDRESS}" data-msg="${list.ADDRESS}" readonly="readonly">
  				<div class="addrWrapper" onclick="mapDisplay('${list.LON}','${list.LAT}')">
  					<img src="/SinoGYS/images/newImage/addrIcon.png"/>
  				</div>
  			</li>
  			<c:if test="${not empty list.DEST_ADDRESS}">
	  			<li class="orderInfoItem">
	  				<div class="infoTitle">
	  					目的地点
	  				</div>
	  				<input type="text" class="show-pop" id="infoCon" value="${list.DEST_ADDRESS }" data-msg="${list.DEST_ADDRESS}" readonly="readonly">
	  			</li>
	  		</c:if>
	  		
	  		<c:if test="${not empty list.ADDRESS_ADD}">
	  			<li class="orderInfoItem">
	  				<div class="infoTitle">
	  					地址补充
	  				</div>
	  				<input type="text" class="show-pop" id="infoCon" value="${list.ADDRESS_ADD }" data-msg="${list.ADDRESS_ADD}" readonly="readonly">
	  			</li>
	  		</c:if>
  		</ul>
  		
  		<c:if test="${list.MILEAGE1=='0' && list.MILEAGE2=='0' && list.STATE!=15}">
	  		<div class="inputWrapper">
	  			<input class="loginFormSubmit takePhoto" type="button" value="选择拍照" style="display: none;" onclick="takePhoto()">
	  			<!--mt7-->
	  			<input class="loginFormSubmit loginBtnActive mt35" type="button" value="下一步" onclick="confirm1(${list.STATE},${list.FLOW_ID})">
	  		</div>	
	  	</c:if>
  	</div>
	
	<div class="optionDialog" style="display: none;">
    	<div class="dialog_con dialog">
    		<p class="dialogTitle">请输入救援里程数</p>
    		<div class="dialogList mb2 mt1">
    			<div class="carType_listDiv">
    				<label class="clearfix" for="">AB距离</label>
    				<input class="carType_listDivInput" type="text" id="mileAge1" placeholder="开始出发到救援地距离" />
    			</div>
    			<div class="carType_listDiv">
    				<label class="clearfix" for="">BC距离</label>
    				<input class="carType_listDivInput" type="text" id="mileAge2" placeholder="救援地到目的地距离" />
    			</div>
    		</div>
    		<div class="buttonWrap clearfix">
    			<a href="#" class="cancelBtn hideBtn">取&nbsp;&nbsp;&nbsp;&nbsp;消</a>
    			<a href="#" class="confirmBtn hideBtn">确&nbsp;&nbsp;&nbsp;&nbsp;认</a>
    		</div>
    	</div>
    </div>	

</body>

<script type="text/javascript">
	 $(document).ready(function() {
	// alert(typeof($("#nextState").val()));
	 	$(".loginBtnActive").val($.transtate($("#nextState").val()));
	 	if(($("#flow_id").val()==2&&$("#state").val()==131)||$("#state").val()==9){
	 		$(".loginBtnActive").removeClass('mt35').addClass('mt7');
	 		$(".takePhoto").show();
	 	}
		checkWeixinAPI();
	});

function checkWeixinAPI(){
	var targetUrl = window.location.href;
	var action = "/SinoGYS/ApiSignatureAction.do?CMD=signature&url="+targetUrl+"&d="+((new Date()).getTime());
	ajaxRequest(action,function(_response){
		var data = _response.responseTEXT;
		if (data!=null){
		     var obj = new Function("return" + data)();
		      wx.config({
			      debug: false,
			      appId: obj.appId,
			      timestamp: obj.timestamp,
			      nonceStr: obj.nonce,
			      signature: obj.signature,
			      jsApiList:[
                    'getLocation',
					 'chooseImage',
			      ],
		 	 });	  
		} else {
			alert("失败");
		}
	},false);
}
	//选择上传照片
	function takePhoto(){
		$.alert("请先拍照，待完成订单后上传",function(){
			wx.chooseImage({
					sizeType: ['compressed'],
					sourceType: ['camera'],
		      success: function (res) {
		         var localIds = res.localIds;
			
		       }
		    });
		});
	}
	
	var state;
	var flow_id;
	function confirm1(state_1,flow_id_1){
		//alert(state_1+"--===="+flow_id_1);
		state=state_1;
		flow_id=flow_id_1;
		$.showLoading();
		
		//判断该订单是否在该师傅名下（对应服务商）
		$.getJSON("/SinoGYS/UpdateOrderStateAction.do?CMD=vehicleChanged1",$("form").serialize(),function(data) {
								if (data.code == false) {
										$.alert("该订单已被取消或改派，无法继续处理",function(){
											wx.closeWindow();
										});
									}else{
										setTimeout('geteLocation()',2000);
									}
						});
	}
	
	//获取定位结果
    function geteLocation() {	
		//获取司机地理位置
		wx.getLocation({
			success: function (res) {
				 latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
				 longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
				var speed = res.speed; // 速度，以米/每秒计
				var accuracy = res.accuracy; // 位置精度
				
				process(state,flow_id,longitude,latitude);
			
			},
			fail: function(error) {
            	
            		$.toast("定位失败","text");
            	
            	process(state,flow_id,"0","0");
        	}
		});
    }

	//流程
	function process(state,flow_id,longitude,latitude){
		$.hideLoading();
		$("#lon").val(longitude);
		$("#lat").val(latitude);
	//	alert(state+"===="+flow_id);
		if(state==14){
			if(flow_id==1){
				$.prompt("请输入您救援过程的里程数","输入相关里程数",function(text) {
					var tet=/^[1-9]\d*(\.\d+)?$/;
					if (text == null|| text == "") {
						alert("请输入里程数");
					}else if(!tet.test(text)){
						alert("格式不对!请重新输入！");
					} else{
						//提交里程数
						$.getJSON("/SinoGYS/UpdateOrderStateAction.do?CMD=uploadOrderMileage",{orderID : $("#orderID").val(),taskOrderId:$("#taskOrderId").val(),milesage1:text,milesage2:0,rescueVehicleId:$("#rescueVehicleId").val(),state:state,flow_id:flow_id,lon:longitude,lat:latitude},function(data) {
								if (data.code == true) {
									$.alert("提交成功",function(){
										wx.closeWindow();
									});
								}
							});
						 }

						}, function() {
							$.hideloading();	//取消操作
						});
			}else if(flow_id==2){
				$(".optionDialog").show();
			}
		
		}else{
			$.confirm("您确定要进行此次操作吗?", function() {
					$("#submit").submit();				
       			}, function() {
         				//取消操作
       			});
		}
	}
	
    function mapDisplay(lon,lat){
		//获取救援车的经纬度
		layer.open({
				type : 2, //page层
				title : '救援地位置',
			//	shade : 0.6, //遮罩透明度
				area:['360px','90%'],
				moveType : 1, //拖拽风格，0是默认，1是传统拖动
				content : '/SinoGYS/supplier/mapDisplay.jsp?lon='+lon+"&lat="+lat,
				});
		}
		
	// 取消按钮 点击事件
  	$(".cancelBtn").click(function(){
  		$(".optionDialog").hide();
  	});
  	
  	//确认 点击事件
  	$(".confirmBtn").click(function(){
  		var tet=/^[1-9]\d*(\.\d+)?$/;
		if ($("#mileAge1").val() == null|| $("#mileAge1").val() == ""|| $("#mileAge2").val() == null|| $("#mileAge2").val() == "") {
			alert("请输入里程数");
		}else if(!tet.test($("#mileAge1").val())&&!tet.test($("#mileAge2").val())){
			alert("格式不对!请重新输入！");
		} else {
			//提交里程数
			$.getJSON("/SinoGYS/UpdateOrderStateAction.do?CMD=uploadOrderMileage",
							{	orderID : $("#orderID").val(),
								taskOrderId:$("#taskOrderId").val(),
								rescueVehicleId:$("#rescueVehicleId").val(),
								milesage1 : $("#mileAge1").val(),
								milesage2 : $("#mileAge2").val(),
								state:state,  
								flow_id:flow_id,
								lon:longitude,
								lat:latitude,
							},
							function(data) {
								if (data.code == true) {
								$.alert("提交成功",function(){
										wx.closeWindow();
									});
								}
							});
			}
  	});
  	
  	(function() {
		$('input.show-pop').each(function(index, domEle) {
			var settings = {
				trigger : 'hover',
				title : '说明',
				content : $(domEle).attr("data-msg"),
				width : 300,
				multi : true,
				closeable : true,
				style : '',
				padding : true
			};
			
			$(domEle).webuiPopover('destroy').webuiPopover(settings);
			
		});
	})();	
	
</script>
</html>
