<%@page import="javax.sound.midi.SysexMessage"%>
<%@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 import="java.util.*"%>
<%@ page isELIgnored="false" %>
<html>
<head>
<title>订单任务详情</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="format-detection" content="telephone=yes">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> 
<link rel="stylesheet" href="/SinoGYS/css/currentOrder.css" type="text/css"/>
<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 type="text/javascript" src="/SinoGYS/js/jquery.webui-popover.min.js"></script>
<script src="/SinoGYS/js/jquery-weui.js"></script>
<script src="/SinoGYS/js/transtates.js?d=<%=new Date().getTime() %>"></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/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 type="text/css">
		#infoCon{
			 flex: 1;
			 text-align: right;
			 font-size:1rem;
		}
	</style>
</head>

<body>
	<input type="hidden" id="distributeLevel" name="distributeLevel" value="">  <!--分派状态  -->
	<form method=POST action="/SinoGYS/CurrentOrderDetailAction.do" name="frm">
		<input TYPE="hidden" name="CMD" value="detail">
		<input type="hidden" id="orderCode" name="orderCode" value="${detailPO.orderCode}">
		<input type="hidden" id="serviceName" name="serviceName" value="${param.serviceName}">
		<input type="hidden" id="address" name="address" value="${detailPO.ADDRESS}">
		<input type="hidden" id="rescueCode" name="rescueCode" value="${detailPO.rescueCode }">
		<input type="hidden" id="orderId" name="orderId" value="${detailPO.order_id}">
		<input type="hidden" id="state" name="state" value="${detailPO.flag}">   <!-- 订单状态 -->
	</form>	
		
	<div class="orderInfoWrapper">
  		<ul class="orderInfoUl">
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					订单编号
  				</div>
  				<div class="infoCon">
  					${detailPO.orderCode }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					服务类型
  				</div>
  				<div class="infoCon">
  					${param.serviceName }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车牌号
  				</div>
  				<div class="infoCon">
  					${detailPO.license }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车主姓名
  				</div>
  				<div class="infoCon">
  					${detailPO.USER_NAME }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车主电话
  				</div>
  				<div class="infoCon">
  					<a href="tel://">${detailPO.USER_PHONE }</a>
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					车辆类型
  				</div>
  				<div class="infoCon">
  					${detailPO.STYLE==null?"无":detailPO.STYLE }
  				</div>
  			</li>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					救援地点
  				</div>
  				<input type="text" class="show-pop" id="infoCon" value="${detailPO.ADDRESS}" data-msg="${detailPO.ADDRESS}" readonly="readonly">
  				<div class="addrWrapper" onclick="mapDisplay('${detailPO.lon}','${detailPO.lat}')">
  					<img src="/SinoGYS/images/newImage/addrIcon.png"/>
  				</div>
  			</li>
  			<c:if test="${detailPO.dest_address!=null}">
	  			<li class="orderInfoItem">
	  				<div class="infoTitle">
	  					目的地点
	  				</div>
	  				<input type="text" class="show-pop" id="infoCon" value="${detailPO.dest_address}" data-msg="${detailPO.dest_address}" readonly="readonly">
	  				<%-- <div class="infoCon">${detailPO.dest_address}</div> --%>
	  			</li>
  			</c:if>
  			<li class="orderInfoItem">
  				<div class="infoTitle">
  					救援状态
  				</div>
  				<div class="infoCon">
  					<span id="start"></span>
  				</div>
  			</li>
  			
  			<script type="text/javascript">
  			//	alert(typeof($("#state").val()));
				$("#start").text($.transtate($("#state").val()));
			</script> 
  		</ul>
  		
  		<c:if test="${detailPO.staffName!=null }">
  			<div style="position:relative;">
  				<div class="orderInfoDriver distributeDriver clearfix">
					<div class="infoTitle fl">
						分派司机
					</div>
					<div class="infoCon" id="oldStaffName">
	  					${detailPO.staffName}
	  				</div>
				</div>
				<div class="border1px"></div>
  			</div>
	  		
			<c:if test="${detailPO.flag!=null && detailPO.flag!=15 && detailPO.flag!=16 && detailPO.flag!=19}">
				<div class="orderInfoDriver changeDistributeDriver clearfix">
					<div class="infoTitle fl">
						改派司机
					</div>
					<div class="driverArrow marTop1">
						<img src="/SinoGYS/images/newImage/arrowBlue.png"/>
					</div>
				</div>
			</c:if>
		</c:if>
		<c:if test="${detailPO.staffName==null }">
			<div class="orderInfoDriver distributeDriver clearfix distributeStaff">
					<div class="infoTitle fl">
						分派司机
					</div>
					<div class="driverArrow" style="margin-top:0.7rem;">
						<img src="/SinoGYS/images/newImage/arrowBlue.png"/>
					</div>
			</div>
		</c:if>
		
		<div class="orderInfoDriver clearfix choosedStaffName" style="display: none;">
			<div class="infoTitle fl">
				司机名称
			</div>
			<div class="infoCon" id="choosedStaffName">
 				
 			</div>
		</div>
  	</div>
  	
  	<div class="optionDialog" style="display: none;">
    	<div class="dialog_con dialog">
    		<p class="dialogTitle">请选择要分派的司机</p>
    		<ul class="dialogList"></ul>
    		<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).on("click",".carType_listOption",function(){
  		$('.carType_listOption').find("div.check-item").removeClass('check-item-bg2').addClass('check-item-bg')
		$(this).find("div.check-item").removeClass('check-item-bg').addClass('check-item-bg2');
	});
	
  	// 分配师傅  点击事件
  	$(".distributeDriver").click(function(){
  		$("#distributeLevel").val(1);
  		queryVehicles();
  		/* if(queryVehicles()){
  			setTimeout('$(".optionDialog").show()',300);
  		} */
  	});
  	
  	
  	//改派师傅
  	$(".changeDistributeDriver").click(function(){
  		$("#distributeLevel").val(2);
  		queryVehicles();
  		/* if(queryVehicles()){
  			setTimeout('$(".optionDialog").show()',300);
  		} */
  	});
  	
  	 //查询可派的司机	
    function queryVehicles(){
    	$(".dialogList").empty();
    	var str;
    	$.getJSON("/SinoGYS/UpdateOrderStateAction.do?CMD=getVehicles",{rescueCode:$("#rescueCode").val()},function(data){
			if(data.vehicleList!=null&&data.vehicleList.length>0){
				for(var i in data.vehicleList){
					if(data.vehicleList[i].dispatch_flag!=""&&data.vehicleList[i].dispatch_flag!=1&&data.vehicleList[i].dispatch_flag!=4){ 
						str='<label for="mobike"><li class="carType_list">'+data.vehicleList[i].staff_name+'<div class="check-busy">忙</div></li></label>';
					}else{
						str='<label for="mobike"><li class="carType_list carType_listOption">'+data.vehicleList[i].staff_name+'<div class="check-item carType check-item-bg">'+
						'<input id="mobike" type="radio" name="type" acceptFlag="'+data.vehicleList[i].acceptFlag+'" value="'+data.vehicleList[i].id+'"></div></li></label>';
					}
					$(".dialogList").append(str);
				}
				setTimeout('$(".optionDialog").show()',300);
			}else{
				alert("该服务商下没有救援师傅登陆");
				return false;
			}
		});
    }
  	
  	// 取消按钮 点击事件
  	$(".cancelBtn").click(function(){
  		$(".optionDialog").hide();
  	});
  	
  	//确认 点击事件
  	$(".confirmBtn").click(function(){
  		if($(".check-item-bg2").length==0){
  			alert("请先选择要指派的救援师傅");
  		}else{
  			var level = $("#distributeLevel").val();
  			if(level==1){
  				if($(".check-item-bg2").children().attr("acceptFlag")==1){
					layer.confirm("该司机处于拒接消息状态，您还要继续下发吗？", function(){
						 distributeDealing();
					 });
				}else{   //空闲
					distributeDealing(); 
				}
  			}
  			if(level==2){
  				$.confirm("该订单正在处理中，您确定要改派司机吗？", function() {
	  				if($(".check-item-bg2").children().attr("acceptFlag")==1){
						layer.confirm("该司机处于拒接消息状态，您还要继续下发吗？", function(){
							 changeDistributeDealing();
						 });
					}else{   //空闲
						changeDistributeDealing(); 
					}
				},function(){
					//取消操作
				});
  			}
		}
  	});
    
	function distributeDealing(){      //分配时候的处理
		$.ajax({
				async : true,
				url : "/SinoGYS/UpdateOrderStateAction.do?CMD=distributeOrder",
				dataType : "json",
				type : "POST",
				data : {
					"rescueCode" : $("#rescueCode").val(),
					"orderCode" : $("#orderCode").val(),
					"orderId":$("#orderId").val(),
					"serviceName":$("#serviceName").val(),
					"address":$("#address").val(),
					"id" : $(".check-item-bg2").children().val()  //显示司机id
				},
				success : function(jsonObject) {
					if (jsonObject.code == "1") {
						$(".optionDialog").hide();
						$(".distributeStaff").hide();
						$(".choosedStaffName").show();
						$("#choosedStaffName").text($(".check-item-bg2").parent().text());
						alert("成功分配订单");
						wx.closeWindow();
					} else if(jsonObject.code=="4"){
							alert("该订单已被撤回,无法继续分配");
					}else if(jsonObject.code=="5"){
							alert("该订单已被改派,无法继续分配");
					}else if(jsonObject.code=="19"){
							alert("该订单已被取消,无法继续分配");
					}
				}
			});
	}
	
		function changeDistributeDealing(){  //改派时候的处理
			$.ajax({
						async : true,
						url : "/SinoGYS/UpdateOrderStateAction.do?CMD=changeDistributeOrder",
						dataType : "json",
						type : "POST",
						data : {
							"rescueCode" : $("#rescueCode").val(),
							"orderCode" : $("#orderCode").val(),
							"orderId":$("#orderId").val(),
							"serviceName":$("#serviceName").val(),
							"address":$("#address").val(),
							"id" : $(".check-item-bg2").children().val(),  //显示当前司机id
							"olderVehicleName":$("#oldStaffName").text()   //显示改派前司机
						},
						success : function(jsonObject) {
						//	alert(jsonObject.code);
							if (jsonObject.code == "1") {
								alert("成功改派司机订单");
								wx.closeWindow();
							} else if(jsonObject.code=="4"){
									alert("该订单已被撤回,无法继续改派");
							}else if(jsonObject.code=="5"){
									alert("该订单已被改派,无法继续改派");
							}else if(jsonObject.code=="19"){
									alert("该订单已被取消,无法继续改派");
							}
							else if(jsonObject.code=="15"){
									alert("该订单已完成,无法继续改派");
							}
						}
					});
		}
				
		function mapDisplay(lon,lat){
			//获取救援车的经纬度
			layer.open({
						type : 2, //page层
						title :'救援地位置',
						shadeClose: true,
						shade : 0.6, //遮罩透明度
						area:['380px', '90%'],
						moveType : 1, //拖拽风格，0是默认，1是传统拖动
						content : '/SinoGYS/supplier/mapDisplay.jsp?lon='+lon+"&lat="+lat,
					});
		}
		
		(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>
