<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<!--[if lt IE 9]>
<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/html5.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/lib/respond.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/lib/PIE_IE678.js"></script>
<![endif]-->
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/css/style.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/common/admin/lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<script type="text/javascript" src="http://lib.h-ui.net/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>后台管理-订单管理</title>

</head>
<body>
	<!-- 发货 -->
	<div class="layui-layer layui-anim layui-layer-iframe" id="layui-layer4" times="4" showtime="0" contype="string" style="display:none;z-index: 19891018; width: 400px; height: 260px; position: absolute; top: 100px; left: 379px;">
		<form action="" method="post" class="form form-horizontal" id="form-admin-add">
		<div class="layui-layer-title" id="sendOrderDivTitle" style="cursor: move;" move="ok">确认发货</div>
		<br>
		<div class="row cl">
			<label class="form-label col-3"><span class="c-red"></span>&nbsp;&nbsp;物流编号：</label>
			<div class="formControls col-5">
				<input type="text" id="order-post-num-id" class="input-text" value="" placeholder="请输入物流编号" name="postNum" datatype="*2-16" nullmsg="用户名不能为空">
			</div>
			<div class="col-4"> </div>
		</div>
		<br>
		<div class="row cl">
			<label class="form-label col-3"><span class="c-red"></span>&nbsp;&nbsp;物流公司：</label>
			<div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" name="postFirm" size="1">
					<option value="">请选择物流公司</option>
					<option value="0">申通快递</option>
					<option value="1">圆通快递</option>
					<option value="2">顺丰快递</option>
				</select>
				</span> </div>
		</div>
		<br>
		<div class="col-9 col-offset-3">
	        <input class="btn btn-primary radius" onclick="return submitSendOrder()" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
	      </div>
	    </form>
		<span class="layui-layer-setwin">
			<a class="layui-layer-ico layui-layer-close layui-layer-close1" onclick="exitWindowsDiv(this)" href="javascript:;"></a>
		</span>
	</div>
	
	<!-- 后台备注 -->
	<div class="layui-layer layui-anim layui-layer-iframe" id="layui-remark" times="4" showtime="0" contype="string" style="display:none;z-index: 19891018; width: 400px; height: 260px; position: absolute; top: 100px; left: 379px;">
		<form action="" method="post" class="form form-horizontal" id="form-admin-remark">
		<div class="layui-layer-title" id="sendOrderDivTitle" style="cursor: move;" move="ok">订单备注</div>
		<br>
		<div class="row cl">
			<label class="form-label col-3"><span class="c-red">*</span>&nbsp;&nbsp;备注信息：</label>
			<div class="formControls col-5">
				<input type="text" class="input-text" value="" placeholder="请输入备注信息" id="remarkInfoInput" name="postNum" datatype="*2-16" nullmsg="用户名不能为空">(不超过100字)
			</div>
			<div class="col-4"> </div>
		</div>
		<br>
		<div class="row cl">
			<label class="form-label col-3"><span class="c-red">*</span>&nbsp;&nbsp;备注颜色：</label>
			<div class="formControls col-5"> <span class="select-box" style="width:150px;">
				<select class="select" id="adminRemarkColor" size="1">
					<option value="1" class="optionclass" id="optionclass1">红色</option>
					<option value="2" class="optionclass" id="optionclass2">黄色</option>
					<option value="3" class="optionclass" id="optionclass3">绿色</option>
				</select>
				</span> </div>
		</div>
		<br>
		<div class="col-9 col-offset-3">
	        <input class="btn btn-primary radius" type="button" onclick="remrakSumbit()" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
	      </div>
	    </form>
		<span class="layui-layer-setwin">
			<a class="layui-layer-ico layui-layer-close layui-layer-close1" onclick="exitWindowsDiv(this)" href="javascript:;"></a>
		</span>
	</div>
	
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> 
		首页 <span class="c-gray en">&gt;</span>
		订单管理 <span class="c-gray en">&gt;</span> 
		订单列表 
		<a class="btn btn-success radius r mr-20" style="line-height: 1.6em; margin-top: 3px" href="javascript:location.replace(location.href);" title="刷新">
		<i class="Hui-iconfont">&#xe68f;</i></a>
	</nav>
	<div class="pd-20">
		<div class="text-c">
		<form action="${pageContext.request.contextPath }/admin/order/selectShopOrderByOrderId" method="post" id="myForm">
			<input type="hidden" name="orderStatus" value="${orderStatusStr }" />
			<input type="text" name="text" id="textInputUser" value="${selectInput }" placeholder="订单编号/物流公司/物流编号/收货人/手机号" style="width: 300px" class="input-text">
			日期范围： 
			<input type="text" readonly="readonly" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'endDate\')||\'2020-10-01\'}'})" id="beginDate" value="${beginDate }" name="beginDate" class="input-text Wdate" style="width: 120px;">
			- <input type="text" readonly="readonly" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'beginDate\')}',maxDate:'2020-10-01'})" id="endDate" value="${endDate }" name="endDate" class="input-text Wdate" style="width: 120px;">
			<button name="" id="submitBtn" class="btn btn-success" type="submit">
				<i class="Hui-iconfont">&#xe665;</i> 搜索
			</button>
		</form>
		</div>
		<div class="cl pd-5 bg-1 bk-gray mt-20">
			<div id="tab_demo" class="HuiTab">
			  <div class="tabBar cl">
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=allOrder'" class="allOrder">所有订单</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=quitOrder'" class="quitOrder">取消订单</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=etcOrder'" class="etcOrder">待支付</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=paySuccess'" class="paySuccess">已支付、待发货</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=returnOrder'" class="returnOrder">退款申请中</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=returnOrderSuccess'" class="returnOrderSuccess">已退款</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=sendOrder'" class="sendOrder">已发货</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=returnOrderEtc'" class="returnOrderEtc">申请退货中</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=returnOrderEtcAdmin'" class="returnOrderEtcAdmin">退货中</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=returnOrderThe'" class="returnOrderThe">订单退货，订单关闭</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=theOrderSuccess'" class="theOrderSuccess">换货中</span>
			  	<span onclick="location.href='${pageContext.request.contextPath }${statusUrl }&orderStatus=inOrder'" class="inOrder">申请换货中</span>
			  </div>
			</div>
		</div>
		<div class="mt-20">
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
					<tr class="text-c">
						<th width="10">订单编号</th>
						<th width="140">收货人</th>
						<th width="150">昵称</th>
						<th width="100">手机号码</th>
						<th width="80">商品总额</th>
						<th width="150">订单金额</th>
						<th width="150">积分抵扣(￥)</th>
						<th width="70">积分数量</th>
						<th width="150">优惠码抵扣(￥)</th>
						<th width="150">支付金额</th>
						<th width="150">订单状态</th>
						<th width="150">时间</th>
						<th width="150">我们的备注</th>
						<th width="50">备注图标</th>
						<th width="150">用户备注</th>
						<th width="150">操作</th>
					</tr>
				</thead>
				<tbody>
				<c:if test="${!(empty orders)}">
					<c:forEach items="${orders }" var="order">
						<tr class="text-c">
							<td><a style="color: blue;" href="#">${order.orderId }</a></td>
							<td>${order.orderAddressName }</td>
							<td>${order.userNickName }</td>
							<td>${order.orderAddressMoblie }</td>
							<td>${order.orderTotal }</td>
							<td>${order.orderTotal + order.orderPostNum }</td>
							<td>-${order.orderRateMoney }</td>
							<td>${order.orderIntegralNum }</td>
							<td>-${order.preferentialNum }</td>
							<td>${order.orderRMBTotal }</td>
							<!-- 判断订单状态是否需要循环 -->
							<c:choose>
								<c:when test="${orderListIsStatus == true }">
									<%-- 订单来自状态查询 --%><td>${orderLinkStatus}</td>
								</c:when>
								<c:otherwise>
									<td>${order.orderLinkStatus}</td>
								</c:otherwise>
							</c:choose>
							
							<td><fmt:formatDate value="${order.orderCreateDate }" pattern="MM-dd HH:mm" /></td>
							
							<!-- start 后台备注 -->
							<c:if test="${fn:length(order.orderAdminRemark)>'3'}">  
                   			<td title="${order.orderAdminRemark }" id="${order.orderId }AdminRemark">${fn:substring(order.orderAdminRemark,0,3)}...</td>  
			            	</c:if>  
			          		<c:if test="${fn:length(order.orderAdminRemark)<='3'}">  
			             		<td title="${order.orderAdminRemark }" id="${order.orderId }AdminRemark">${order.orderAdminRemark}</td>  
			          		</c:if>
							<td class="td-status">
								<c:if test="${order.orderColorFlag==2 }">
									
								</c:if>
								<c:if test="${order.orderColorFlag==3 }">
									
								</c:if>
								<c:choose>
									<c:when test="${order.orderColorFlag==1 }">
										<div style="width:100%;height:20px;background-color: red;" id="${order.orderId }AdminRemarkColor" lang="1"></div>
									</c:when>
									<c:when test="${order.orderColorFlag==2 }">
										<div style="width:100%;height:20px;background-color: yellow;" id="${order.orderId }AdminRemarkColor" lang="2"></div>
									</c:when>
									<c:when test="${order.orderColorFlag==3 }">
										<div style="width:100%;height:20px;background-color: green;" id="${order.orderId }AdminRemarkColor" lang="3"></div>
									</c:when>
									<c:otherwise>
										<div style="width:100%;height:20px;background-color: white;" id="${order.orderId }AdminRemarkColor" lang="3"></div>
									</c:otherwise>
								</c:choose>
							</td>
							<!-- end 后台备注 -->
							
							<!-- start 用户备注 -->
							<c:if test="${fn:length(order.orderUserRemark)>'3'}">  
                   			<td title="${order.orderUserRemark }">${fn:substring(order.orderUserRemark,0,3)}...</td>  
			            	</c:if>  
			          		<c:if test="${fn:length(order.orderUserRemark)<='3'}">  
			             		<td title="${order.orderUserRemark }">${order.orderUserRemark}</td>  
			          		</c:if>
							<!-- end 用户备注 -->
							
							<!-- 遍历操作 -->
							<td class="td-manage">
								<div class="dropDown dropDown_hover">
								  <a class="dropDown_A" href="#">操作</a>
								  <div class="dropDown-menu box-shadow" style="left:-22px;">
								    <ul>
								    <c:if test="${!empty order.operations }">
								      	<c:forEach items="${order.operations }" var="oper">
								      		<li><a href="${pageContext.request.contextPath }${oper.url}" lang="${order.orderId }" title="${oper.name}" alt="${oper.name}" onclick="return orderAction(this)"><i class="Hui-iconfont">${oper.img}</i><font>${oper.name}</font></a></li>
								      	</c:forEach>
								      </c:if>
								    </ul>
								  </div>
								</div>
								
							</td>
						</tr>
					</c:forEach>
				</c:if>
				<c:if test="${empty orders}">
					<tr align="center"><td colspan="16" style="text-align: center;">未查询到该类数据!</td></tr>
				</c:if>
				</tbody>
			</table>
			<br/>
		<div align="right">
			<%@include file="/common/other/paper/pager.jsp"%>
		</div>
		</div>
	</div>
	<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/layer/1.9.3/layer.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/lib/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath }/common/admin/js/H-ui.admin.js"></script>
	<script type="text/javascript">
		// 选中对应的订单头信息
		$(".${orderStatusStr}").attr("class", "current");
		// orderid
		var orderid = "";
		// 发货
		function submitSendOrder() {
			var post = $("#order-post-num-id").val();
			if (!(post.length >= 5 && post.length <= 15)) {
				layer.msg("物流编号必须在5-15位之间!",{icon:5,time:1000});
				return false;
			}
			return true;
		}
		// 订单操作
		function orderAction(_this) {
			var $a = $(_this);
			var orderStatusStr = $a.children("font").text();
			if (orderStatusStr == "发货" || orderStatusStr == "录入物流信息并发货") {
				$("#layui-layer4").show();
				$("#sendOrderDivTitle").html("为'" + $a.attr("lang") + "'发货:");
				$("#form-admin-add").attr("action", $a.attr("href"));
				return false;
			} else if (orderStatusStr == "备注") {
				orderid = $a.attr("lang");
				$("#layui-remark").show();
				$("#form-admin-remark").attr("action", $a.attr("href"));
				// 回显现有的备注
				$("#remarkInfoInput").val($("#" + $a.attr("lang") + "AdminRemark").attr("title"));
				$(".optionclass").attr("selected", "");
				$("#optionclass" + $("#" + $a.attr("lang") + "AdminRemarkColor").attr("lang")).attr("selected", true);
				return false;
			}
			return true;
		}
		
		// 提交备注
		function remrakSumbit() {
			var remarkInfoInput = $("#remarkInfoInput").val();
			if (remarkInfoInput.length >= 0 && remarkInfoInput.length <= 100) {
				var adminRemarkColor = $("#adminRemarkColor").val();
				var url = $("#form-admin-remark").attr("action");
				var args = {"datetime" : new Date().getTime(), "remark" : remarkInfoInput, "remarkColor" : adminRemarkColor};
				$.ajax({
					   type: "POST",
					   url: url,
					   data: args,
					   dataType: "json",
					   success: function(data){
							if (data.status) {
								$("#layui-remark").hide();
								layer.msg(data.info,{icon:1,time:2000});
								$("#" + orderid + "AdminRemark").attr("title", remarkInfoInput);
								if (remarkInfoInput.length >= 3) {
									remarkInfoInput = remarkInfoInput.substr(0, 3) + "...";
								}
								$("#" + orderid + "AdminRemark").text(remarkInfoInput);
								var color = "";
								if (adminRemarkColor == "1") {
									color = "red";
								} else if (adminRemarkColor == "2") {
									color = "yellow";
								} else if (adminRemarkColor == "3") {
									color = "green";
								}
								
								$("#" + orderid + "AdminRemarkColor").css("background-color", color);
							} else {
								layer.msg(data.info,{icon:5,time:2000});
							}
					   }
				});
			}
			
		}
		
		// 关闭窗口
		function exitWindowsDiv(_this) {
			$(_this).parent().parent().hide();
		}
		
		// 搜索事件
		$(function() {
			$("#submitBtn").click(function() {
				var textInputUser = $("#textInputUser").val();
				if (textInputUser != null && textInputUser != "") {
					return true;
				}
				layer.msg("输入信息不能为空哦!",{icon:5,time:2000});
				return false;
			});
		});
	</script>
</body>
</html>