<template>
	<view class="index">
		<!-- 余额显示 -->
		<view class="wrap">
			<text>账户余额(积分)</text>
			<view class="sec">
				<view class="pri">
					<text>{{moneys}}</text>
				</view>
			</view>
			<view class="thir">

				<view style="width: 33%;">
					<text>本月累计收益</text>
					<text>{{sumOrderMoney}}</text>
				</view>
				<view style="width: 33%;">
					<text>今日团队收益</text>
					<text>{{teamDayTotalMoney}}</text>
				</view>
				<view style="width: 33%;">
					<text>今日个人收益</text>
					<text>{{dayMyMoney}}</text>
				</view>
			</view>

			<view class="thir" style="margin-top: 32upx;">
				<view style="width: 33%;">
					<text>本月个人收益</text>
					<text>{{monthYuGu}}</text>
				</view>
				<view style="width: 33%;">
					<text>本月团队收益</text>
					<text>{{teamTotalMoney}}</text>
				</view>
				<view style="width: 33%;">
					<text>上月累计收益</text>
					<text>{{lastjiesuan}}</text>
				</view>
			</view>
		</view>
		<!-- 时间分割 -->
		<view class="nav">
			<view @click="chooseNav" data-num="1">
				<text :class="[current=='1'?'red':'' ]">今日</text>
				<view :class="[current=='1'?'active':'unactive' ]"></view>
			</view>
			<view @click="chooseNav" data-num="2">
				<text :class="[current=='2'?'red':'' ]">昨日</text>
				<view :class="[current=='2'?'active':'unactive']"></view>
			</view>
			<view @click="chooseNav" data-num="3">
				<text :class="[current=='3'?'red':'' ]">本月</text>
				<view :class="[current=='3'?'active':'unactive']"></view>
			</view>
			<view @click="chooseNav" data-num="4">
				<text :class="[current=='4'?'red':'' ]">上月</text>
				<view :class="[current=='4'?'active':'unactive']"></view>
			</view>
		</view>
		<view class="nav">
			<view @click="chooseNavTwo" data-num="1">
				<text :class="[currentTwo=='1'?'red':'' ]">我的收益</text>
				<view :class="[currentTwo=='1'?'active':'unactive' ]"></view>
			</view>
			<view @click="chooseNavTwo" data-num="2">
				<text :class="[currentTwo=='2'?'red':'' ]">团队收益</text>
				<view :class="[currentTwo=='2'?'active':'unactive']"></view>
			</view>
		</view>

		<view class="item" v-if="currentTwo=='1' && orderInfo.length > 0">
			<view class="note">
				<text style="width: 33%;text-align: center;">商品名称</text>
				<text style="width: 33%;text-align: center;">成员名称</text>
				<text style="width: 33%;text-align: center;">返利积分</text>
			</view>

			<view v-if="orderInfo.length > 0" class="note notes" v-for="(item,index) in orderInfo" :key="index">
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.goodsTitle}}</text>
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.nickName}}</text>
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.integral | formatPrice}}</text>
			</view>
		</view>
		<view class="item" v-if="currentTwo=='2' && orderInfo.length > 0">
			<view class="note">
				<text style="width: 33%;text-align: center;">商品名称</text>
				<text style="width: 33%;text-align: center;">成员名称</text>
				<text style="width: 33%;text-align: center;">返利积分</text>
			</view>
			<view v-if="orderInfo" class="note notes" v-for="(item,index) in orderInfo" :key="index">
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.goodsTitle}}</text>
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.nickName}}</text>
				<text style="width: 33%;text-align: center;font-size: 28rpx;">{{item.money | formatPrice}}</text>
			</view>
		</view>
		<!-- 加载更多提示 -->
		<view class="s-col is-col-24" v-if="orderInfo.length > 0">
			<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
		</view>
		<!-- 加载更多提示 -->
		<empty v-if="orderInfo.length === 0" des="暂无收益数据" show="false"></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr: [1, 2],
				current: '1',
				currentTwo: '1',
				dayMyMoney:0,
				moneys: 0,
				orderNum: 0,
				monthYuGu: 0,
				jiesuan: 0,
				moneyAll: 0,
				nowMonth: 0,
				teamTotalMoney: 0,
				teamDayTotalMoney: 0,
				personDayTotalMoney: 0,
				orderInfo: [],
				lastjiesuan: 0,
				sumOrderMoney: 0,
				lastMoneyAll: 0,
				totalMoney: 0,
				page: 1,
				limit: 20,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			}
		},
		filters: {
			formatPrice(data) {
				if (typeof(data) === "number") {
					return parseFloat(data).toFixed(2);
				}
				return 0.00;
			}
		},
		onLoad() {
			this.getMoney();
			this.getOrderDetails(1)
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getOrderDetails(this.current);
		},
		methods: {
			getOrderDetails(item) {
				this.$queue.showLoading('加载中...');
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/statistical/selectOrdersMoneyDetailsByUserIdAndTime?day=' + item + '&userId=' +
					userId + '&type=' + this.currentTwo + '&page=' + this.page + '&limit=' + this.limit).then(res => {
					if (res.code === 0 && res.data) {
						if (this.page === 1) {
							this.orderInfo = [];
						}

						res.data.list.forEach(d => {
							this.orderInfo.push(d);
						});

						if (res.data.list.length === this.limit) {
							this.loadingType = 0
						} else {
							this.loadingType = 3
						}
						uni.hideLoading()
					} else {
						this.loadingType = 2;
						uni.hideLoading();
					}
				});
			},
			//获取付款收入查询
			getMoney() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/statistical/selectOrdersMoneyByUserId?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.moneys = res.data.money.money;
						this.sumOrderMoney = res.data.monthSumMoney;
						this.teamDayTotalMoney = res.data.dayTeamMoney;
						this.monthYuGu = res.data.monthMyMoney;
						this.dayMyMoney = res.data.dayMyMoney;
						this.teamTotalMoney = res.data.monthTeamMoney;
						this.lastjiesuan = res.data.upMonthSumMoney;

					}
				});
			},
			chooseNavTwo(e) {
				this.page = 1;
				this.currentTwo = e.currentTarget.dataset.num;
				this.getOrderDetails(this.current)
			},
			chooseNav(e) {
				this.page = 1;
				this.current = e.currentTarget.dataset.num;
				this.getOrderDetails(e.currentTarget.dataset.num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.index {
		background: #FFFFFF;
	}

	.wrap {
		color: #ffffff;
		padding: 0 40upx 50upx;
		;
		// width: 750upx;
		// height: 320upx;
		padding-top: 40upx;
		background: #ffc705;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.pri {
		width: 92%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 22upx;

	}

	.pri>text {
		width: 50%;
		font-size: 48upx;
		font-family: DINPro;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 32upx;
	}

	.pri>view {
		width: 160upx;
		height: 58upx;
		background: #FFFFFF;
		border-radius: 29upx;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FF1E43;
		line-height: 58upx;
		text-align: center;

	}

	.sec {
		width: 100%;
		margin-top: 40upx;
		margin-bottom: 61upx;
	}

	.thir {
		display: flex;
		width: 100%;
		justify-content: flex-start;
		align-items: center;
	}

	.thir>view {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

	}

	.thir>view>text:nth-child(1) {
		margin-bottom: 17upx;
	}



	.nav {
		display: flex;
		padding-top: 28upx;
		background: #ffffff;

		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
		padding-bottom: 14upx;

		view {
			flex: 1;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

		}

		.active {
			background: #ffc705;
			width: 36upx;
			height: 6upx;
			margin: 0 auto;
			// margin-top: 10upx;
			border-bottom: 6upx solid #ffc705;
			position: relative;
			top: 12upx;
		}

		.unactive {
			width: 36upx;
			height: 6upx;
			border-radius: 4upx;
			margin: 0 auto;
			// margin-top: 10upx;
			// border-bottom: 4upx solid 
		}

		// }
	}

	.item {
		width: 100%;
		background: #ffffff;
		padding: 20upx 40upx 4upx;

		.tit {
			padding-bottom: 19upx;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 20upx;

			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		.note {
			display: flex;
			justify-content: space-around;
			width: 100%;
			margin: 20rpx 30rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-bottom: 42upx;

			text {
				text-align: left;
				position: relative;
				left: -48upx;

			}
		}

		.notes {
			font-size: 38upx;
			font-family: DINPro;
			font-weight: 500;
			color: #333333;

		}
	}

	.red {
		color: #ffc705;
	}
</style>
