<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>充值订单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://cdn.bootcss.com/dayjs/1.7.8/dayjs.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<script id="recharge-order-detail" type="text/html">
	<div class="table-detail">
		{{if rechargeOrderInfo.depositTime == null}}
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">订单有效时间:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.usefulTime }}</div>
		</div>	
		{{/if}}
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">系统处理时间:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.dealTime }}</div>
		</div>	
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">备注:</div> 
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.note }}</div>
		</div>	
		{{if rechargeOrderInfo.depositTime == null}}
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">支付地址:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.payUrl }}</div>
		</div>
		{{/if}}
		{{if rechargeOrderInfo.depositTime != null}}
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">收款银行:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.bankName }}</div>
		</div>
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">收款人:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.accountHolder }}</div>
		</div>
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">卡号:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.bankCardAccount }}</div>
		</div>
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">存款人:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.depositor }}</div>
		</div>
		<div class="row">
				<div class="col-sm-5 table-detail-item-label">存款时间:</div>
				<div class="col-sm-7 table-detail-item-value">{{rechargeOrderInfo.depositTime }}</div>
		</div>
		{{/if}}
	</div>
</script>
<style type="text/css">
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="recharge-order" v-cloak>
		<form class="form-inline common-query-cond-form" action="#">
			<div class="form-group common-query-cond">
				<label>订单号:</label><input type="text" class="form-control-sm" v-model="orderNo">
			</div>
			<div class="form-group common-query-cond">
				<label>支付通道:</label> <select class="form-control-sm" v-model="payChannelId">
					<option value="">请选择</option>
					<option v-for="payChannel in payChannels" :value="payChannel.id">{{payChannel.channelName}}</option>
				</select>
			</div>
			<div class="form-group common-query-cond">
				<label>订单状态:</label> <select class="form-control-sm" v-model="orderState">
					<option value="">全部</option>
					<option v-for="dictItem in rechargeOrderStateDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select>
			</div>
			<div class="form-group common-query-cond">
				<label>提交时间:</label><input type="date" class="form-control-sm" v-model="submitStartTime"><span>到</span><input type="date" class="form-control-sm" v-model="submitEndTime">
			</div>
			<button type="button" class="btn btn-danger btn-sm" v-on:click="refreshTable">搜索</button>
		</form>
		<table class="common-table recharge-order-table"></table>

		<div v-show="approvalFlag">
			<div class="modal-mask">
				<div class="modal-wrapper">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<h5 class="modal-title">审核充值订单</h5>
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" v-on:click="approvalFlag = false">
									<span aria-hidden="true">&times;</span>
								</button>
							</div>
							<div class="modal-body" style="height: 460px; overflow: auto;">
								<table class="table common-table">
									<thead>
										<tr>
											<th>收款银行</th>
											<th>收款人</th>
											<th>卡号</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>{{selectedOrder.bankName}}</td>
											<td>{{selectedOrder.accountHolder}}</td>
											<td>{{selectedOrder.bankCardAccount}}</td>
										</tr>
									</tbody>
								</table>
								<table class="table common-table">
									<thead>
										<tr>
											<th>存款人</th>
											<th>存款时间</th>
											<th>存款金额</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>{{selectedOrder.depositor}}</td>
											<td>{{selectedOrder.depositTime}}</td>
											<td>{{selectedOrder.rechargeAmount}}</td>
										</tr>
									</tbody>
								</table>
								<form>
									<div class="form-group row">
										<div class="col-sm-12">
											<label>实际存款金额:</label> <input type="number" class="form-control" placeholder="请输入实际存款的金额" v-model="actualPayAmount">
										</div>
									</div>
									<div class="form-group row">
										<div class="col-sm-12">
											<label>审核结果:</label> <select class="form-control" v-model="approvalResult">
												<option value="2">确认已支付</option>
												<option value="5">人工取消</option>
											</select>
										</div>
									</div>
								</form>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-success btn-sm" v-on:click="approval">确定</button>
								<button type="button" class="btn btn-sm" v-on:click="approvalFlag = false">取消</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/js/recharge-order.js"></script>
</body>
</html>