<!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>
<script src="https://cdn.bootcss.com/dayjs/1.7.8/dayjs.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">
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="LowerLevelAccountReceiveOrderRecord" v-cloak>
		<div class="page-body" style="background: #f2f2f2;">
			<div class="input-group"　style="padding-top: 0.3rem;">
				<input type="text" class="form-control" style="width: 8rem;" placeholder="用户名" v-model="userName"><select class="form-control" style="width: 2.2rem; height: 3rem;" v-model="orderState">
					<option value="">订单状态</option>
					<option v-for="dictItem in orderStateDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select>
			</div>
			<div class="input-group" style="padding-bottom: 0.3rem;">
				<select class="form-control" style="width: 2.2rem; height: 3rem;" v-model="gatheringChannelCode">
					<option value="">收款渠道</option>
					<option v-for="dictItem in gatheringChannelDictItems" :value="dictItem.dictItemCode">{{dictItem.dictItemName}}</option>
				</select><input type="date" class="form-control" style="width: 8rem;" v-model="receiveOrderTime">
				<div class="input-group-append">
					<button class="btn btn-outline-secondary" type="button" v-on:click="query">查询</button>
				</div>
			</div>
			<div class="form-details" v-for="receiveOrderRecord in receiveOrderRecords">
				<div class="form-details-body">
					<div class="form-details-item">
						<label>订单号:</label> <span>{{receiveOrderRecord.orderNo}}</span>
					</div>
					<div class="form-details-item">
						<label>接单时间:</label> <span>{{receiveOrderRecord.receivedTime}}</span><label class="form-details-item-highlight">{{receiveOrderRecord.receiverUserName}}</label>
					</div>
					<div class="form-details-item">
						<label>收款渠道:</label> <span>{{receiveOrderRecord.gatheringChannelName}}</span><label>收款金额:</label> <span>{{receiveOrderRecord.gatheringAmount}}元</span>
					</div>
					<div class="form-details-item">
						<label>状态:</label> <span class="form-details-item-highlight">{{receiveOrderRecord.orderStateName}}</span>
						<template v-if="receiveOrderRecord.orderState == '4'"> <label>奖励金:</label> <span class="form-details-item-highlight">{{receiveOrderRecord.bounty}}元</span></template>
					</div>
				</div>
			</div>
			<div style="padding-left: 13rem;">
				<ul class="pagination">
					<li class="page-item"><a class="page-link" v-show="totalPage > 0 && pageNum > 1" v-on:click="prePage">上一页</a></li>
					<li class="page-item"><a class="page-link" v-show="pageNum >= 1 && pageNum < totalPage" v-on:click="nextPage">下一页</a></li>
				</ul>
			</div>

		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript">
		var LowerLevelAccountReceiveOrderRecordVM = new Vue({
			el : '#LowerLevelAccountReceiveOrderRecord',
			data : {
				orderStateDictItems : [],
				orderState : '',
				gatheringChannelDictItems : [],
				gatheringChannelCode : '',
				receiveOrderTime : dayjs().format('YYYY-MM-DD'),
				userName : '',
				receiveOrderRecords : [],
				pageNum : 1,
				totalPage : 1
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				headerVM.title = '团队接单明细';
				headerVM.showBackFlag = true;
				this.loadPlatformOrderStateDictItem();
				this.loadGatheringChannelDictItem();
				this.loadByPage();
			},
			methods : {

				/**
				 * 加载平台订单状态字典项
				 */
				loadPlatformOrderStateDictItem : function() {
					var that = this;
					that.$http.get('/dictconfig/findDictItemInCache', {
						params : {
							dictTypeCode : 'platformOrderState'
						}
					}).then(function(res) {
						this.orderStateDictItems = res.body.data;
					});
				},

				/**
				 * 加载收款渠道字典项
				 */
				loadGatheringChannelDictItem : function() {
					var that = this;
					that.$http.get('/dictconfig/findDictItemInCache', {
						params : {
							dictTypeCode : 'gatheringChannel'
						}
					}).then(function(res) {
						this.gatheringChannelDictItems = res.body.data;
					});
				},

				query : function() {
					this.pageNum = 1;
					this.loadByPage();
				},

				prePage : function() {
					this.pageNum = this.pageNum - 1;
					this.loadByPage();
				},

				nextPage : function() {
					this.pageNum = this.pageNum + 1;
					this.loadByPage();
				},

				loadByPage : function() {
					var that = this;
					that.$http.get('/platformOrder/findLowerLevelAccountReceiveOrderRecordByPage', {
						params : {
							pageSize : 5,
							pageNum : that.pageNum,
							userName : that.userName,
							orderState : that.orderState,
							gatheringChannelCode : that.gatheringChannelCode,
							startTime : that.receiveOrderTime,
							endTime : that.receiveOrderTime
						}
					}).then(function(res) {
						that.receiveOrderRecords = res.body.data.content;
						that.pageNum = res.body.data.pageNum;
						that.totalPage = res.body.data.totalPage;
					});
				}
			}
		});
	</script>
</body>
</html>