<template>
	<view class="content">
		<view class="flex text-center  text-lg bg">
			<view class="title_btn flex-sub bg" @click="cut(1)" :class="tabFromIndex==1?'bgCol2': 'bgCol2H'">
				<span>团队用户</span>
				<span class="border-bottom border-bottom-y" v-if="tabFromIndex==1"></span>
			</view>
			<view class="title_btn flex-sub bg" @click="cut(2)" :class="tabFromIndex==2?'bgCol2': 'bgCol2H'">
				<span>团队技师</span>
				<span class="border-bottom border-bottom-l" v-if="tabFromIndex==2"></span>
			</view>
		</view>
		<view class="view1">
			<view class="flex">
				<view class="view1_item">
					<view class="view1_itemmoney">{{ teamCount }} <text>人</text> </view>
					<view class="view1_itemname">已邀请</view>
				</view>
				<view class="view1_item" @tap="goDetail">
					<view class="view1_itemmoney" style="color: #FF6000;"><text>￥</text>{{ teamMoney }}</view>
					<view class="view1_itemname">我的收益</view>
				</view>
			</view>
			<view @tap="goYao" class="yao-btn">
				邀请好友
			</view>
		</view>
		<view class="view2" style="border-radius: 20upx;">
			<view class="view2-top">
				<view style="width: 20%;">排名</view>
				<view style="width: 50%;">用户</view>
				<view style="width: 30%;text-align: center;">收益</view>
			</view>
			<view style="display: flex;flex-direction: row;padding: 20upx;" v-for="(item, index) in rankingList"
				:key="index">
				<view style="width: 20%;">
					<image v-if="index == 0"
						src="https://admin.sjajk.com/file/uploadPath/2023/01/16/f5305e9ce03a6d0269f58ce55e6c3d0d.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 1"
						src="https://admin.sjajk.com/file/uploadPath/2023/01/16/20b80ec8d3f4db15754426697d0054b8.png"
						style="width: 50upx; height: 50upx;"></image>
					<image v-if="index == 2"
						src="https://admin.sjajk.com/file/uploadPath/2023/01/16/6f61f5e7ec61a1d815bee3c9f0af3c58.png"
						style="width: 50upx; height: 50upx;"></image>
					<view v-if="item.rankNum > 2" style="font-size: 19px; color: #999999; margin-left: 15upx;">
						{{ index + 1 }}
					</view>
				</view>
				<view style="width: 50%;display: flex;flex-direction: row;align-items: center;">
					<image :src="item.avatar ? item.avatar : '/static/logo.png'"
						style="border-radius: 100upx;width: 50upx; height: 50upx;"></image>
					<view style="font-size: 14px; color: #333333;margin-left: 20upx; width: 65%;">{{ item.userName }}
					</view>
				</view>
				<view class="view2-right">
					<view class="view2-right-text">¥{{ item.money }}</view>
				</view>
			</view>
			<!-- 加载更多提示 -->
			<view class="s-col is-col-24" v-if="rankingList.length > 0">
				<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabFromIndex: 1,
				teamCount: 0,
				teamMoney: 0,
				rankingList: [],
				imageUrl: '/static/logo2.jpg',
				money: 0,
				nickName: '游客',
				rankNum: 0,
				page: 1,
				size: 20,
				loadingType: 0,
				scrollTop: false,
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				}
			};
		},
		onLoad() {
			let userId = this.$queue.getData('userId');
			if (userId) {
				this.getRankingList(userId);
				this.getUserInfo();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		methods: {
			goDetail(){
				if(this.tabFromIndex == 1){
					uni.navigateTo({
						url: '/my/wallet/usermoneydetail?classIndex=5'
					});
				}else{
					uni.navigateTo({
						url: '/my/wallet/usermoneydetail?classIndex=6'
					});
				}
			},
			cut(index) {
				this.tabFromIndex = index;
				this.page = 1;
				let userId = this.$queue.getData('userId');
				this.getRankingList(userId);
				this.getUserInfo();
			},
			goYao() {
				uni.navigateTo({
					url: '/pages/my/invitationUser'
				});
			},
			getUserInfo() {
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/artificer/selectTeamStatistics?userId=' + userId + '&type=' + this.tabFromIndex)
					.then(res => {
						if (res.code == 0) {
							this.teamCount = res.data.teamCount ? res.data.teamCount : 0;
							this.teamMoney = res.data.teamMoney ? res.data.teamMoney : 0;
						}
					});
			},
			getRankingList() {
				this.loadingType = 1;
				uni.showLoading({
					title: '加载中...'
				});
				let userId = this.$queue.getData('userId');
				this.$Request.getT('/app/artificer/selectTeamUserList?type=' + this.tabFromIndex + '&page=' + this.page +
					'&limit=' + this
					.size +
					'&userId=' + userId).then(res => {
					if (res.code === 0) {
						if (this.page === 1) {
							this.rankingList = [];
						}
						res.data.list.forEach(d => {
							this.rankingList.push(d);
						});
						if (res.data.list.length === this.size) {
							this.loadingType = 0;
						} else {
							this.loadingType = 3;
						}
					} else {
						this.loadingType = 2;
					}
					uni.hideLoading();
				});
			}
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.getRankingList();
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.getRankingList();
		}
	};
</script>

<style lang="scss">
	.view2-right-text{
		font-size: 16px;
		color: #FF6000;
		font-weight: bold;
	}
	.view2-right{
		width: 30%;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.view2-top{
		display: flex;
		width: 100%;
		height: 80rpx;
		background-image: linear-gradient(to bottom, rgba(0, 162, 138, 0.2), #f7f7f7);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		border-top-left-radius: 9px;
		border-top-right-radius: 9px;
		align-items: center;
		justify-content: center;
		padding: 0px 10px;
	}
	.yao-btn{
		width: 586rpx;
		margin: 80rpx 50rpx 0rpx;
		height: 92rpx;
		line-height: 92rpx;
		text-align: center;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
		border-radius: 46rpx;
	}
	.content {
		background: #f7f7f7;
		width: 100%;
		height: 100vh;
		padding-bottom: 20px;
	}

	.bg {
		background: #FFFFFF;
	}

	.view1 {
		background-color: #ffffff;
		width: 93%;
		height: 360upx;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-top: 20upx;
		border-radius: 20upx;

		

		.view1_item {
			margin: 60upx 0 0 0;
			height: 100upx;
			flex: 1;
			text-align: center;

			.view1_itemmoney {
				font-size: 56rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #333333;

				text {
					font-size: 26rpx;
				}
			}

			.view1_itemname {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				margin-top: 10rpx;
			}
		}
	}

	.title_btn {
		height: 78upx;
		line-height: 78upx;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.bgCol2H{
		color: #666;
		font-weight: bold;
	}
	.border-bottom-y{
		width: 58px;
	}
	.border-bottom-l{
		width: 75px;
	}
	.border-bottom{
		display: block;
		
		height: 6px;
		background: linear-gradient(-48deg, rgba(1, 156, 136, 0.6), rgba(1, 156, 136, 0.1));
		border-radius: 3px;
		position: absolute;
		bottom: 0px;
		margin-bottom: 9px;
	}
	.bgCol2 {
		color: #019c88;
		font-weight: bold;
	}

	.view2 {
		background-color: #ffffff;
		width: 93%;
		height: auto;
		margin-left: 26upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		margin-top: 20rpx;
	}
</style>
