<!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>
<link href="https://cdn.bootcss.com/viewerjs/1.3.3/viewer.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/viewerjs/1.3.3/viewer.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">
.appeal-details-container {
	padding-right: 44px;
	padding-left: 44px;
	padding-top: 15px;
}

.back-action {
	float: right;
}

.appeal-details-row {
	padding-bottom: 20px;
}

.appeal-details-title {
	text-align: center;
	font-weight: bold;
	font-size: 22px;
}

.appeal-details-item {
	font-size: 18px;
}

.appeal-details-item-highlight {
	color: #ef061e;
}

.appeal-details-item label {
	padding-right: 20px;
	color: #757b82;
}

.appeal-details-item span {
	
}

.appeal-details-action {
	text-align: center;
	padding-top: 10px;
}

.appeal-details-action button {
	margin-right: 30px;
}

.no-supplied-sreenshot {
	text-align: center;
	height: 200px;
	line-height: 200px;
	font-weight: bold;
	color: red;
}

.sreenshot {
	background-color: #fff;
	width: 50%;
	height: 200px;
	padding-right: 5px;
	float: left !important;
	cursor: pointer;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="appeal-details" v-cloak>
		<div class="appeal-details-container">
			<div class="back-action">
				<button type="button" class="btn light btn-lg" v-on:click="window.history.back(-1);">返回</button>
			</div>
			<div class="appeal-details-title">申诉详情</div>
			<div class="row appeal-details-row">
				<div class="col-sm-4 appeal-details-item">
					<label>订单号:</label><span>{{selectAppeal.orderNo}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item">
					<label>商户/发起方:</label><span>{{selectAppeal.merchantName + '/' + selectAppeal.initiatorObjName}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item">
					<label>收款渠道/收款金额:</label><span>{{selectAppeal.gatheringChannelName + '/' + selectAppeal.gatheringAmount}}元</span>
				</div>
			</div>
			<div class="row appeal-details-row">
				<div class="col-sm-4 appeal-details-item">
					<label>接单人/接单时间:</label><span>{{selectAppeal.receiverUserName + '/' + selectAppeal.receivedTime}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item">
					<label>申诉类型:</label><span class="appeal-details-item-highlight">{{selectAppeal.appealTypeName}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item">
					<label>状态:</label><span class="appeal-details-item-highlight">{{selectAppeal.stateName}}</span>
				</div>
			</div>
			<div class="row appeal-details-row">
				<div class="col-sm-4 appeal-details-item">
					<label>发起时间:</label><span>{{selectAppeal.initiationTime}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item" v-show="selectAppeal.state == '2'">
					<label>处理方式:</label><span class="appeal-details-item-highlight">{{selectAppeal.processWayName}}</span>
				</div>
				<div class="col-sm-4 appeal-details-item" v-show="selectAppeal.appealType == '2' && selectAppeal.state == '1'">
					<label>{{selectAppeal.initiatorObj == 'user' ? '用户反映实际支付金额:' : '商户反映实际支付的金额:'}}</label><span class="appeal-details-item-highlight">{{selectAppeal.actualPayAmount}}元</span>
				</div>
			</div>
			<div class="row" v-show="selectAppeal.appealType == '1'">
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<span>商户的截图</span>
						</div>
						<div class="card-body">
							<div class="no-supplied-sreenshot" v-show="selectAppeal.merchantSreenshotIds == null || selectAppeal.merchantSreenshotIds.length == 0">未提供截图</div>
							<div v-show="selectAppeal.merchantSreenshotIds != null && selectAppeal.merchantSreenshotIds.length > 0">
								<img class="sreenshot" v-for="sreenshotId in selectAppeal.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-show="selectAppeal.appealType == '2'">
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<span>用户的截图</span>
						</div>
						<div class="card-body">
							<div class="no-supplied-sreenshot" v-show="selectAppeal.userSreenshotIds == null || selectAppeal.userSreenshotIds.length == 0">未提供截图</div>
							<div v-show="selectAppeal.userSreenshotIds != null && selectAppeal.userSreenshotIds.length > 0">
								<img class="sreenshot" v-for="sreenshotId in selectAppeal.userSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<span>商户的截图</span>
						</div>
						<div class="card-body">
							<div class="no-supplied-sreenshot" v-show="selectAppeal.merchantSreenshotIds == null || selectAppeal.merchantSreenshotIds.length == 0">未提供截图</div>
							<div v-show="selectAppeal.merchantSreenshotIds != null && selectAppeal.merchantSreenshotIds.length > 0">
								<img class="sreenshot" v-for="sreenshotId in selectAppeal.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row" v-show="selectAppeal.appealType == '3'">
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<span>商户的截图</span>
						</div>
						<div class="card-body">
							<div class="no-supplied-sreenshot" v-show="selectAppeal.merchantSreenshotIds == null || selectAppeal.merchantSreenshotIds.length == 0">未提供截图</div>
							<div v-show="selectAppeal.merchantSreenshotIds != null && selectAppeal.merchantSreenshotIds.length > 0">
								<img class="sreenshot" v-for="sreenshotId in selectAppeal.merchantSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
							</div>
						</div>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="card">
						<div class="card-header">
							<span>用户的截图</span>
						</div>
						<div class="card-body">
							<div class="no-supplied-sreenshot" v-show="selectAppeal.userSreenshotIds == null || selectAppeal.userSreenshotIds.length == 0">未提供截图</div>
							<div v-show="selectAppeal.userSreenshotIds != null && selectAppeal.userSreenshotIds.length > 0">
								<img class="sreenshot" v-for="sreenshotId in selectAppeal.userSreenshotIds" :src="'/storage/fetch/' + sreenshotId" v-on:click="viewImage('/storage/fetch/' + sreenshotId)">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="appeal-details-action">
				<button type="button" class="btn btn-info btn-lg" v-show="selectAppeal.state == '1' && selectAppeal.appealType == '3'" v-on:click="confirmToPaid(selectAppeal.id)">确认已支付</button>
				<button type="button" class="btn btn-info btn-lg" v-show="selectAppeal.state == '1' && selectAppeal.appealType == '2'" v-on:click="alterToActualPayAmount(selectAppeal.id)">改为实际支付金额</button>
				<button type="button" class="btn btn-warning btn-lg" v-show="selectAppeal.state == '1' && (selectAppeal.appealType == '1' || selectAppeal.appealType == '2' || selectAppeal.appealType == '3')" v-on:click="cancelOrder(selectAppeal.id)">取消订单</button>
				<button type="button" class="btn btn-danger btn-lg" v-show="selectAppeal.state == '1'" v-on:click="dontProcess(selectAppeal.id)">不做处理</button>
			</div>
		</div>
	</div>
	<script src="/js/appeal-details.js"></script>
</body>
</html>