<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/layer/2.3/layer.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.1/js/fileinput.min.js"></script>
<script src="/js/common/common.js"></script>
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<style type="text/css">
.platform-order-list-area {
	
}

.platform-order {
	background: rgb(242, 242, 242);
	margin-bottom: 1rem;
	display: flex;
	padding-left: 1.2rem;
	padding-right: 0.2rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.platform-order-body {
	flex: 4;
	display: flex;
	flex-direction: column;
	margin-top: 0.5rem;
}

.platform-order-body-item label {
	text-align: end;
	width: 5rem;
	margin-right: 0.5rem;
}

.platform-order-body-item span {
	min-width: 5rem;
	display: inline-block;
}

.platform-order-body-item button {
	width: 48%;
}

.platform-order-body-item-highlight {
	color: #c3606a;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="auditOrder" v-cloak>
		<div class="page-body">
			<div class="platform-order-list-area" v-show="showWaitConfirmOrderFlag">
				<div class="platform-order" v-for="order in waitConfirmOrders">
					<div class="platform-order-body">
						<div class="platform-order-body-item">
							<label>订单号:</label> <span>{{order.orderNo}}</span>
						</div>
						<div class="platform-order-body-item">
							<label>接单时间:</label> <span>{{order.receivedTime}}</span>
						</div>
						<div class="platform-order-body-item">
							<label>收款渠道:</label> <span>{{order.gatheringChannelName}}</span><label>收款金额:</label> <span class="platform-order-body-item-highlight">{{order.gatheringAmount}}元</span>
						</div>
						<div class="platform-order-body-item">
							<button class="btn btn-outline-info btn-lg" type="button" v-on:click="confirmToPaid(order.id)">确认已支付</button>
							<button class="btn btn-outline-danger btn-lg" type="button" v-on:click="showAppealPage(order)">申诉</button>
						</div>
					</div>
				</div>
			</div>
			<div class="order-appeal-area" v-show="!showWaitConfirmOrderFlag">
				<div class="platform-order">
					<div class="platform-order-body">
						<div class="platform-order-body-item">
							<label>订单号:</label> <span>{{selectedOrder.orderNo}}</span>
						</div>
						<div class="platform-order-body-item">
							<label>接单时间:</label> <span>{{selectedOrder.receivedTime}}</span>
						</div>
						<div class="platform-order-body-item">
							<label>收款渠道:</label> <span>{{selectedOrder.gatheringChannelName}}</span><label>收款金额:</label> <span class="platform-order-body-item-highlight">{{selectedOrder.gatheringAmount}}元</span>
						</div>
					</div>
				</div>
				<div class="container" style="margin-top: 1.3rem;">
					<form>
						<div class="form-group">
							<label>申诉类型:</label> <select class="form-control" v-model="appealType">
								<option value="">请选择</option>
								<option v-for="dictItem in appealTypeDictItems" :value="dictItem.dictItemCode" v-if="dictItem.dictItemCode == '1' || dictItem.dictItemCode == '2'">{{dictItem.dictItemName}}</option>
							</select>
						</div>
						<div class="form-group" v-show="appealType == '2'">
							<label>实际支付金额:</label> <input type="number" class="form-control" v-model="actualPayAmount">
						</div>
						<div class="form-group" v-show="appealType == '2'">
							<label>截图:</label> <input type="file" class="form-control sreenshot" multiple>
						</div>
						<button type="button" class="btn btn-danger btn-lg btn-block" v-on:click="userStartAppeal">发起申诉</button>
						<button type="button" class="btn btn-light btn-lg btn-block" v-on:click="showWaitConfirmOrderPage">返回</button>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript" src="/js/audit-order.js"></script>
</body>
</html>