<!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">
<link href="/css/common/common.css" rel="stylesheet" type="text/css">
<script src="/js/common/common.js"></script>
<style type="text/css">
.gathering-item {
	
}

.gathering-item label {
	text-align: end;
	width: 8rem;
	margin-right: 2rem;
	color: #495057;
	font-weight: bold;
}

.gathering-item span {
	color: #0062cc;
	font-weight: bold;
}

.bounty-ranking-table {
	
}

.bounty-ranking-table th, .bounty-ranking-table td {
	width: 33%;
}

.bounty-ranking-table tr, .bounty-ranking-table td {
	text-align: start;
}

.bounty-ranking-table td {
	padding-left: 0.5rem;
}
</style>
</head>

<body>
	<div th:replace="common/header::html"></div>
	<div id="index" v-cloak>
		<div class="page-body">
			<div class="card" v-show="isLoggedInFlag && showTodayReceiveOrderSituationFlag">
				<div class="card-header">
					<span>今日接单情况</span><span class="float-right" style="color: #dc3545; font-weight: bold;" v-on:click="showTotalReceiveOrderSituation">累计接单情况&gt;</span>
				</div>
				<div class="card-body">
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>收款金额</label> <span>{{todayReceiveOrderSituation != null ? todayReceiveOrderSituation.paidAmount : 0}}元</span>
						</div>
					</div>
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>已支付订单量</label> <span>{{todayReceiveOrderSituation != null ? todayReceiveOrderSituation.paidOrderNum : 0}}笔</span>
						</div>
					</div>
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>奖励金</label> <span>{{todayReceiveOrderSituation != null ? todayReceiveOrderSituation.bounty : 0}}元</span>
						</div>
					</div>
					<div class="row gathering-item" v-show="accountType == 'agent'">
						<div class="col-sm-8 offset-sm-4">
							<label>代理佣金</label> <span>{{todayReceiveOrderSituation != null ? todayReceiveOrderSituation.rebateAmount : 0}}元</span>
						</div>
					</div>
				</div>
			</div>
			<div class="card" v-show="isLoggedInFlag && !showTodayReceiveOrderSituationFlag">
				<div class="card-header">
					<span>累计接单情况</span><span class="float-right" style="color: #dc3545; font-weight: bold;" v-on:click="showTodayReceiveOrderSituation">今日接单情况&gt;</span>
				</div>
				<div class="card-body">
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>收款金额</label> <span>{{totalReceiveOrderSituation != null ? totalReceiveOrderSituation.paidAmount : 0}}元</span>
						</div>
					</div>
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>已支付订单量</label> <span>{{totalReceiveOrderSituation != null ? totalReceiveOrderSituation.paidOrderNum : 0}}笔</span>
						</div>
					</div>
					<div class="row gathering-item">
						<div class="col-sm-8 offset-sm-4">
							<label>奖励金</label> <span>{{totalReceiveOrderSituation != null ? totalReceiveOrderSituation.bounty : 0}}元</span>
						</div>
					</div>
					<div class="row gathering-item" v-show="accountType == 'agent'">
						<div class="col-sm-8 offset-sm-4">
							<label>代理佣金</label> <span>{{totalReceiveOrderSituation != null ? totalReceiveOrderSituation.rebateAmount : 0}}元</span>
						</div>
					</div>
				</div>
			</div>
			<div class="card" v-show="showTodayBountyRankFlag">
				<div class="card-header">
					<span>今日奖励金排行榜</span><span class="float-right" style="color: #dc3545; font-weight: bold;" v-on:click="showTotalTop10BountyRank">累计排行榜&gt;</span>
				</div>
				<div class="card-body">
					<table class="table table-sm bounty-ranking-table">
						<thead>
							<tr>
								<th>排行</th>
								<th>账号</th>
								<th>奖励金</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(bountyRank,index) in todayBountyRanks">
								<td><span class="badge" v-bind:class="[index > 2 ? 'badge-success' : 'badge-danger']">{{index + 1}}</span></td>
								<td>{{bountyRank.userName}}</td>
								<td>￥{{bountyRank.bounty}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="card" v-show="!showTodayBountyRankFlag">
				<div class="card-header">
					<span>累计奖励金排行榜</span><span class="float-right" style="color: #dc3545; font-weight: bold;" v-on:click="showTodayTop10BountyRank">今日排行榜&gt;</span>
				</div>
				<div class="card-body">
					<table class="table table-sm bounty-ranking-table">
						<thead>
							<tr>
								<th>排行</th>
								<th>账号</th>
								<th>奖励金</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(bountyRank,index) in totalBountyRanks">
								<td><span class="badge" v-bind:class="[index > 2 ? 'badge-success' : 'badge-danger']">{{index + 1}}</span></td>
								<td>{{bountyRank.userName}}</td>
								<td>￥{{bountyRank.bounty}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="common/footer::html"></div>
	<script type="text/javascript">
		var indexVM = new Vue({
			el : '#index',
			data : {
				isLoggedInFlag : false,
				accountType : '',
				showTodayReceiveOrderSituationFlag : false,
				todayReceiveOrderSituation : {},
				totalReceiveOrderSituation : {},
				showTodayBountyRankFlag : true,
				todayBountyRanks : [],
				totalBountyRanks : []
			},
			computed : {},
			created : function() {
			},
			mounted : function() {
				var inviteCode = getQueryString('inviteCode');
				if (inviteCode != null) {
					window.sessionStorage.setItem('inviteCode', inviteCode);
				}
				this.loadSystemSetting();
				this.getUserAccountInfo();
				this.loadTodayTop10BountyRank();
			},
			methods : {

				loadSystemSetting : function() {
					var that = this;
					that.$http.get('/masterControl/getSystemSetting').then(function(res) {
						document.title = res.body.data.websiteTitle;
						headerVM.title = res.body.data.websiteTitle;
					});
				},

				loadTodayTop10BountyRank : function() {
					var that = this;
					that.$http.get('/statisticalAnalysis/findTodayTop10BountyRank').then(function(res) {
						that.todayBountyRanks = res.body.data;
					});
				},

				loadTotalTop10BountyRank : function() {
					var that = this;
					that.$http.get('/statisticalAnalysis/findTotalTop10BountyRank').then(function(res) {
						that.totalBountyRanks = res.body.data;
					});
				},

				showTodayTop10BountyRank : function() {
					this.showTodayBountyRankFlag = true;
					this.loadTodayTop10BountyRank();
				},

				showTotalTop10BountyRank : function() {
					this.showTodayBountyRankFlag = false;
					this.loadTotalTop10BountyRank();
				},

				showTodayReceiveOrderSituation : function() {
					this.showTodayReceiveOrderSituationFlag = true;
					this.loadTodayReceiveOrderSituation();
				},

				showTotalReceiveOrderSituation : function() {
					this.showTodayReceiveOrderSituationFlag = false;
					this.loadTotalReceiveOrderSituation();
				},

				loadTodayReceiveOrderSituation : function() {
					var that = this;
					that.$http.get('/statisticalAnalysis/findMyTodayReceiveOrderSituation').then(function(res) {
						that.todayReceiveOrderSituation = res.body.data;
					});
				},

				loadTotalReceiveOrderSituation : function() {
					var that = this;
					that.$http.get('/statisticalAnalysis/findMyTotalReceiveOrderSituation').then(function(res) {
						that.totalReceiveOrderSituation = res.body.data;
					});
				},

				/**
				 * 获取账号登录情况
				 */
				getUserAccountInfo : function() {
					var that = this;
					that.$http.get('/userAccount/getUserAccountInfo').then(function(res) {
						if (res.body.data != null) {
							that.isLoggedInFlag = true;
							that.accountType = res.body.data.accountType;
							that.showTodayReceiveOrderSituation();
						}
					});
				}
			}
		});
	</script>
</body>
</html>