<template>
	<view class="index">
		<!-- 余额显示 -->
		<view class="wrap">
			<view style="display: flex;width: 100%;">
				<view class="wrap_item">
					<text>渠道总收益(积分)</text>
					<view class="sec">
						<view class="pri">
							<text>{{moneys}}</text>
						</view>
					</view>
				</view>
				<view class="wrap_item">
					<text>今日收益(积分)</text>
					<view class="sec">
						<view class="pri">
							<text>{{dayMoney}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="thir">
				<view class="thir_item">
					<view>昨日收益</view>
					<view>{{upDayMoney}}</view>
				</view>
				<view class="thir_item">
					<view>本月收益</view>
					<view>{{monthMoney}}</view>
				</view>
				<view class="thir_item">
					<view>上月收益</view>
					<view>{{upMonthMoney}}</view>
				</view>
			</view>

			<!-- <view class="thir" style="margin-top: 32upx;">
				<view style="width: 40%;text-align: left;">
					<view>本月收益</view>
					<view>{{monthMoney}}</view>
				</view>
				<view style="width: 40%;text-align: center;margin-left: 15%;">
					<view>上月收益</view>
					<view>{{upMonthMoney}}</view>
				</view>
			</view> -->
		</view>
		<view class="search-wrap">
			商家名称：
			<input class="search-input" type="text" v-model="search" placeholder="输入商家名称进行搜索" @input="textChange"/>
		</view>
		<view class="search-wrap">
			创建时间：
			<picker mode="date" @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
		</view>
		<!-- 时间分割 -->
		<view class="nav">
			<view @click="chooseNav" data-num="0">
				<text :class="[current=='0'?'red':'' ]">全部</text>
				<view :class="[current=='0'?'active':'unactive' ]"></view>
			</view>
			<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="item" v-if="orderInfo.length > 0">
			<scroll-view scroll-x="true" scroll-with-animation class="scroll_item">
				<view class="note">
					<!-- <view class="item_title_view">商家名称</view>
					<view class="item_title_view">成员名称</view>
					<view class="item_title_view">返利积分</view>
					<view class="item_title_view">联系电话</view>
					<view class="item_title_view">购买时间</view> -->

					<view class="item_title_view2">商家名称</view>
					<view class="item_title_view1">用户尾号</view>
					<view class="item_title_view1">实付金额</view>
					<view class="item_title_view1">返现金额</view>
					<view class="item_title_view">佣金积分</view>
					<view class="item_title_view">抢单时间</view>

				</view>

				<view class="note" v-for="(item,index) in orderInfo" :key="index">
					<!-- <view class="item_detail_view">{{item.goodsTitle}}</view>
					<view class="item_detail_view">{{item.nickName}}</view>
					<view class="item_detail_view">{{item.channelMoney | formatPrice}}</view>
					<view class="item_detail_view">{{item.phone}}</view>
					<view class="item_detail_view">{{item.createTime}}</view> -->

					<view class="item_detail_view2">{{item.goodsTitle}}</view>
					<view class="item_detail_view1">{{item.phone}}</view>
					<view class="item_detail_view1">{{item.money}}</view>
					<view class="item_detail_view1">{{item.returnMoney | formatPrice}}</view>
					<view class="item_detail_view">{{item.channelMoney | formatPrice}}</view>
					<view class="item_detail_view">{{item.createTime}}</view>
				</view>
			</scroll-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: '0',
				moneys: 0,
				dayMoney: 0,
				upDayMoney: 0,
				search: '',
				monthMoney: 0,
				upMonthMoney: 0,
				orderInfo: [],
				date: '选择时间进行检索',
				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(0)
		},
		onReachBottom() {
			this.page = this.page + 1
			this.getOrderDetails(this.current);
		},
		methods: {
			textChange(e){
				this.search = e.target.value;
				this.page = 1;
				this.getOrderDetails(this.current);
			},
			bindDateChange(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.date = e.target.value;
				this.page = 1;
				this.getOrderDetails(this.current);
			},
			getOrderDetails(item) {
				this.$queue.showLoading('加载中...');
				let userId = this.$queue.getData('userId');
				let date = this.date === '选择时间进行检索' ? '' : this.date;
				this.$Request.getT('/statistical/selectChannelMoneyByUserIdAndTime?day=' + item + '&userId=' +
					userId + '&page=' + this.page + '&limit=' + this.limit + '&goodsTitle=' + this.search + '&createTime=' + date).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/selectChannelOrderMoneyByUserId?userId=' + userId).then(res => {
					if (res.code === 0) {
						this.moneys = res.data.sumMoney;
						this.dayMoney = res.data.dayMoney;
						this.upDayMoney = res.data.upDayMoney;
						this.monthMoney = res.data.monthMoney;
						this.upMonthMoney = res.data.upMonthMoney;
						// 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">

	.search-wrap {
		display: flex;
		width: 100%;
		align-items: center;
		background: #FFFFFF;
		padding: 20rpx;

		.search-input {
			font-size: 28rpx;
			font-weight: 500;
			color: #000000;
			margin-left: 5rpx;
		}
	}
	
	input::-webkit-input-placeholder {
	       /* placeholder颜色  */
		    color: #000000;
		/* placeholder字体大小  */
		    font-size: 28rpx;
		/* placeholder位置  */
		 }

	.wrap_item {
		width: 49%;
		text-align: center;
	}

	.wrap {
		color: #ffffff;
		padding: 0 40upx 50upx;
		;
		// width: 750upx;
		// height: 320upx;
		padding-top: 40upx;
		background: #FF3530;
		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: 100%;
		text-align: center;
		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_item {
		width: 33%;
		text-align: center;
	}

	.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: #FF3530;
			width: 36upx;
			height: 6upx;
			margin: 0 auto;
			// margin-top: 10upx;
			border-bottom: 6upx solid #FF3530;
			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 20upx 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;
		}

		.scroll_item {
			white-space: nowrap;
			overflow: hidden;
			height: 100%;
		}

		.item_title_view {
			width: 300rpx;
			text-align: center;
			color: #333333;
		}

		.item_title_view2 {
			width: 250rpx;
			text-align: center;
			color: #333333;
		}

		.item_title_view1 {
			width: 150rpx;
			text-align: center;
			color: #333333;
		}

		.item_detail_view {
			width: 300rpx;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-line;
		}

		.item_detail_view2 {
			width: 250rpx;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-line;
		}

		.item_detail_view1 {
			width: 150rpx;
			text-align: center;
			color: #333333;
			font-size: 28rpx;
			word-wrap: break-word;
			word-break: break-all;
			white-space: pre-line;
		}

		.note {
			display: flex;
			width: fit-content;
			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: #FF3530;
	}
</style>
