<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="wap-font-scale" content="no">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>多问</title>
<script type="text/javascript"
	src="${contextPath}/static/js/flexible.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${contextPath}/static/weixin/ssdb/css/common.css">
<link rel="stylesheet" type="text/css"
	href="${contextPath}/static/weixin/ssdb/css/ssdb.css">
	<link rel="stylesheet" type="text/css"
	href="${contextPath}/static/weixin/ssdb/css/sprite.css">
<style>
.btn-heder {
	width: 1.2rem;
	height: 0.6rem;
	border: 2px solid #ff9900;
	background: #ccc;
	border-radius: 5px 5px 5px 5px/10px 10px 10px 10px;
	background-color: white;
}
</style>
</head>
<body>
	<header class="pad-lr-20 bc53a2 fc-white ub ">
		<span class="icon icon-placeholder"></span>
		<p class="ub-f1 fs-16 text-center">诉讼保全担保服务</p><span id="cancleOrderID" class="btn-pay-red" data-to="invoice-page">取消</span>
	</header>
	
	<div class="pad-lr-30 ub bc53a2 fs-12 service-progress">
		<div class="ub-f1 service-progress-item ">
			<div class="service-progress-bar"></div>
			<div class="service-progress-dotted "></div>
			<p>申请</p>
		</div>
		<div class="ub-f1 service-progress-item active">
			<div class="service-progress-bar"></div>
			<div class="service-progress-dotted"></div>
			<p>审核</p>
		</div>
		<div class="ub-f1 service-progress-item">
			<div class="service-progress-bar"></div>
			<div class="service-progress-dotted"></div>
			<p>付款</p>
		</div>
		<div class="ub-f1 service-progress-item">
			<div class="service-progress-bar"></div>
			<div class="service-progress-dotted"></div>
			<p>出函</p>
		</div>
	</div>
	<section>
		<div class="fs-12" style="padding:0.2rem  0  0.2rem 0.2rem ;">
			<button class="btn-heder" style="color: #ff9900;">
				<span id="stateName">待审核</span>
			</button>
			<span style="padding-left: 0.1rem;" id="stateDesc">11-10 16:00
				之前出结果</span>
		</div>
		<p class="retinabt"></p>
	</section>
	<!--审核问题反馈-->
	<section id="faedbackID" class="hide">
		<div class="fs-14  bg-grey pad-tb-15"><span class="mar-l-20 color555">审核问题反馈</span><span class="fs-14 color53a2" id="changeDetailID" style="margin: 0 0 0 3.3rem;">修改申请资料</span></div>
		<p class="retinabt"></p>
		<ul id="feedBackListID">
			<!-- <li class="pad-tb-5">
				<p class="pad-lr-20 fc-333 pad-tb-5">诉讼资料4</p>
				<p class="fc-555 pad-tb-5" style="padding-left: 3.8rem;">2016-10-28 19:07:57</p>
			</li>
			<p class="retinabt mar-l-20"></p>
			<li class="pad-tb-5">
				<p class="pad-lr-20 fc-333 pad-tb-5">诉讼资料4</p>
				<p class="fc-555 pad-tb-5" style="padding-left: 3.8rem;">2016-10-28 19:07:57</p>
			</li>
			<p class="retinabt mar-l-20"></p> -->
		</ul>
	</section>
	<div class="mask-page invoice-page hide">
			<div class="br-radius10 mask-box mask-box-center">
				<p class="pad-l-35 pad-tb-10 bg-white fc-xlgrey">请选择取消订单的原因</p>
				<ul class="bg-white br-radius5">
					<li class="pad-lr-35 pad-tb-35 pos-relate br-top1 ub ub-ac ub-pj">
						<div>
							<!-- <span class="icon icon-zfb"></span> -->
							<span class="mar-l-20 fc-xlgrey">已有其他出函方式</span>
						</div>
						<span class="radio-signle icon icon-radio-blue on pay-invoice" data-radio="pay" data-value="已有其他出函方式" data-to="invoice-page"></span>
					</li>
					<li class="pad-lr-35 pad-tb-35 pos-relate br-top1 ub ub-ac ub-pj">
						<div>
							<!-- <span class="icon icon-wechat"></span>  -->
							<span class="mar-l-20 fc-xlgrey">付款流程太复杂</span>
						</div>
						<span class="radio-signle icon icon-radio-blue pay-invoice" data-radio="pay" data-value="付款流程太复杂" data-to="invoice-page"></span>
					</li>
					<li class="pad-lr-35 pad-tb-35 pos-relate br-top1 ub ub-ac ub-pj">
						<div>
							<!-- <span class="icon icon-wechat"></span>  -->
							<span class="mar-l-20 fc-xlgrey">资料提交错误,需要重新下单</span>
						</div>
						<span class="radio-signle icon icon-radio-blue pay-invoice" data-radio="pay" data-value="资料提交错误,需要重新下单" data-to="invoice-page"></span>
					</li>
					<li class="pad-lr-35 pad-tb-35 pos-relate br-top1 ub ub-ac ub-pj">
						<div>
							<!-- <span class="icon icon-wechat"></span>  -->
							<span class="mar-l-20 fc-xlgrey">其他原因</span>
						</div>
						<span class="radio-signle icon icon-radio-blue pay-invoice" data-radio="pay" data-value="其他原因" data-to="invoice-page"></span>
					</li>
					<p class="ub ub-ac"></p>
					<a href="#" id="cancelOkID" class="btn btn-blue-height btn-wid fs-16 mar-l-35 online-letter-filter-btn" style="display:inline-block;margin-right:0.01rem;margin-bottom: 0.2rem " >确定</a>
					<a href="#"  id="cancleID" class="btn btn-blue-height btn-wid fs-16 " style="display:inline-block;" >返回</a>
					<input type="hidden" name="pay" data-type="pay">
				</ul>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="${contextPath}/static/js/jquery-1.12.0.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/layer/layer.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/jstorage.js"></script>
	<script type="text/javascript" src="${contextPath}/static/js/requestutil.js"></script>
	<script type="text/javascript">
 	$(document).ready(function() {
  			var orderId="${orderId}";//订单ID
  			var baseURL='<%=com.fadu.app.util.AppConfig.url_duowenapp_b%>';
  			var token=$.jStorage.get("token");
			var jsonReq = {};
			jsonReq.orderId = orderId;
			jsonReq.step="2";
			jsonReq.token=token;
			jsonReq.actionCode = "B511";
			var url = baseURL + "/B/android/";
			console.log(jsonReq);
			requestData(url, jsonReq,success, fail);
			function success(json) {
				console.log(json);
				if (json) {
					if (json.success == true) {
						var stateName=json.stateName;
						var stateDesc=json.stateDesc;
						var orderState=json.orderState;
						$("#stateName").html(stateName);
						$("#stateDesc").html(stateDesc);
						//审核通过
						if(orderState==22){
							var url="${contextPath}/web/ssdb/ssdbpay/"+orderId+"/"+token+"/";
							location.href=url;//付款页面
						}else{
							//审核反馈内容
							var logReplys=json.logReplys;
							if(logReplys.length>0){
								$("#faedbackID").removeClass('hide');
							}							
							var html='';
							$.each(logReplys,function(inx,val){
								var content=val.content;
								var createDate=val.createDate;
								html=html+'<li class="pad-tb-5">';
								html=html+'<p class="pad-lr-20 fc-333 pad-tb-5">'+content+'</p>';
								html=html+'<p class="fc-555 pad-tb-5" style="padding-left: 3.8rem;">'+createDate+'</p>';
								html=html+'</li>';
							});
							$("#feedBackListID").html(html);
						}
						if(orderState==10){//取消订单的处理
							$("#changeDetailID").text("查看申请资料");
							$("#cancleOrderID").addClass("hide");//已经取消的订单
						}
					} else {
						layer.msg(json.message);
					}
				} else {
					layer.msg("获取信息失败!!");
				}
			}
			//修改申请资料
			$("#changeDetailID").click(function(){
					var url="${contextPath}/web/ssdb/toApply?orderId="+orderId;
					location.href=url;//付款页面
			});
			//取消订单
			$("#cancleID").click(function(){
				$(".invoice-page").fadeOut(200).addClass('hide');			
			});
			$("#cancelOkID").click(function(){
				var cancelWhy= $('input[data-type=pay]').val();
				var jsonReq = {};
				jsonReq.orderId = orderId;
				jsonReq.reason=cancelWhy;
				jsonReq.token=token;
				jsonReq.actionCode = "B517";
				var url = baseURL + "/B/android/";
				console.log(jsonReq);
				requestData(url, jsonReq,function(json){
					if(json){
						if(json.success==true){
								layer.msg("取消成功");
								location.reload();					
						}else{
							layer.msg(json.message);
						}
					}else{
						layer.msg("取消失败,请稍后重试!!");
					}
				}, function(error){
					console.log(error);
					layer.msg(error);
				});
			});
			
			$('.btn-pay-red').click(function(){
				var _this = $(this);
				var box = _this.attr('data-to');
				fadeInBox(box);
			});
			$('.pay-invoice').click(function(){
				var _this = $(this);
				var _thispar = _this.parent();
				var radio = _this.attr('data-radio');
				var value = _this.attr('data-value');
				if (!_this.hasClass('on')) {
					_this.addClass('on');
					_thispar.siblings().find('.radio-signle').removeClass('on');
					$('input[data-type='+radio+']').val(value);
					radio_if = false;
				}
			});
			function fadeInBox(box){
					$('.'+box).fadeIn(200).removeClass('hide');
			}
			function fail(resp) {
				console.log(resp);
			}
			//请求页面需要判断
			setTimeout(function(){ location.reload() }, 1000*60);
		});
	</script>
</body>
</html>