<template>
	<view class="container">
		<scroll-view class="scroll-list-view" scroll-y="true" scroll-with-animation>
			<view class="header">
				<image src="@/static/rank/back.png" mode="" class="back-icon" @click="goBack"></image>
				<!-- <view class="rank-darw" @click="darwCk">上期奖励</view> -->
			</view>
			<view v-if="rankingList.length === 0" style="padding-top: 200rpx;">
				<empty></empty>
			</view>
			
			<view class="list">
				<view class="list-item" v-for="(item, index) in rankingList" :key="index">
					<view class="rank-num">
						<image src="@/static/rank/l-dym.png" mode="" v-if="item.num == 1" class="num-icon"></image>
						<image src="@/static/rank/l-dem.png" mode="" v-else-if="item.num == 2" class="num-icon"></image>
						<image src="@/static/rank/l-dsm.png" mode="" v-else-if="item.num == 3" class="num-icon"></image>
						<rankNumCom :rank="item.num" v-else></rankNumCom>
					</view>
					
					<view class="rank-avatar">
						<image :src="item.avatarResource.url" mode="" class="rank-avatar-icon"></image>
					</view>
					<view class="rank-detail">
						<view class="detail">
							<view class="name">{{ item.nickname | maskString }}</view>
							<view class="point">{{ item.points }}积分</view>
						</view>
						<view class="prize" v-if="item.rewardEntityList.length > 0">
								<template v-for="(childItem,childIndex) in item.rewardEntityList">
									<!-- {{Number(childItem.info.salePrice)}}元 -->
									{{childItem.info.abbreviation}}
									<text v-if="childIndex+1 < item.rewardEntityList.length">、</text>
								</template>
							
						</view>
						<!-- <view class="prize">{{ item.nickname }}</view> -->
					</view>
				</view>
				<template v-if="Object.keys(selfData).length > 0">
					<view style="height: 180rpx;"></view>
					<view class="self">
						<view class="self-info">
							<view class="self-avatar">
								<image :src="selfData.avatarResource.url" mode="" class="self-avatar-icon"></image>
							</view>
							<view class="self-num">
								我的排名：
								<span v-if="selfData.num == -1" class="self-num-txt">999+</span>
								<template v-else>
									<rankNumCom :rank="selfData.num"></rankNumCom>
								</template>
							</view>
						</view>
						<view class="self-point">{{ selfData.points }}积分</view>
					</view>
				</template>
			</view>
		</scroll-view>
		<!-- 榜单奖励 -->
		<popup-view v-model="show" mode="center" border-radius="18" z-index="1000">
			<listBonusCom @close="show = false"></listBonusCom>
		</popup-view>
	</view>
</template>

<script>
	import rankNumCom from './components/rankNum.vue';
	import listBonusCom from './components/listBonus.vue'
	import {
		topUserListLastApi,
		topUserSelfLastApi,
	} from '@/API/ranking.js'
	export default{
		data(){
			return{
				rankingList:[],
				selfData:{},
				show:false
			}
		},
		components:{
			rankNumCom,listBonusCom
		},
		onLoad(option) {
			this.getTopUserListLast(option.type)
			this.getTopUserSelfLast(option.type)
		},
		
		filters: {
		    maskString(value) {
		      if (!value) return ''; // 如果值为空，直接返回空字符串
		      if (value.length > 2) {
		        // 字符串长度超过两个字符时
		        return value.charAt(0) + '**' + value.charAt(value.length - 1);
		      } else if (value.length === 2) {
		        // 字符串长度为两个字符时
		        return value.charAt(0) + '**';
		      } else {
		        // 字符串长度小于或等于一个字符时，直接返回原字符串
		        return value;
		      }
		    }
		  },
		methods:{
			darwCk(){
				this.show = true
			},
			goBack(){
				uni.redirectTo({
					url:`/pages/index/ranking`
				})
			},
			// 获取上期所有排行榜
			getTopUserListLast(type) {
				topUserListLastApi({
					type
				}).then(res => {
					this.rankingList = []
					if (res.code === 200) {
						this.rankingList = res.data
					} else {
						this.$api.msg(res.message)
					}
				})
			},
			
			// 当前上期自己的排名
			getTopUserSelfLast(type) {
				topUserSelfLastApi({
					type
				}).then(res => {
					this.selfData = {}
					if (res.code === 200 && res.data) {
						this.selfData = res.data
					} else if (res.code !== 200) {
						this.$api.msg(res.message)
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #fff;
	}
	.container{
		.scroll-list-view{
			padding-top: 114rpx;
			.header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 0 22rpx;
				width: 100%;
				height: 114rpx;
				background-color: #fff;
				z-index: 3;
				position: fixed;
				top: 0;
				left: 0;
				.back-icon{
					width: 49rpx;
					height: 49rpx;
				}
				.rank-darw{
					width: 158rpx;
					height: 63rpx;
					font-size: 23rpx;
					color: #000000;
					background-image: url('@/static/rank/sqjc.png');
					background-repeat: no-repeat;
					background-size: 100%;
					display: flex;
					padding-top: 18rpx;
					padding-right: 10rpx;
					justify-content: flex-end;
				}
			}
			.list {
				padding: 0 25rpx 0 30rpx;
			
				.list-item {
					display: flex;
					align-items: center;
					height: 142rpx;
					border-bottom: 1px solid #eee;
			
					.rank-num {
						width: 69rpx;
						height: 87rpx;
						display: flex;
						align-items: center;
			
						.num-icon {
							width: 40rpx;
							height: 64rpx;
						}
					}
			
					.rank-avatar {
						width: 87rpx;
						height: 87rpx;
			
						.rank-avatar-icon {
							width: 87rpx;
							height: 87rpx;
							border-radius: 50%;
						}
					}
			
					.rank-detail {
						margin-left: 15rpx;
						height: 87rpx;
						width: 528rpx;
						padding-top: 15rpx;
			
						.detail {
							width: 528rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
			
							.name {
								font-size: 23rpx;
								color: #000000;
							}
			
							.point {
								font-size: 23rpx;
								color: #7CCEF0;
							}
						}
			
						.prize {
							height: 32rpx;
							width: 528rpx;
							line-height: 32rpx;
							padding-left: 6rpx;
							margin-top: 11rpx;
							font-size: 23rpx;
							color: #FF1253;
							background-color: #e9e9e9;
						}
					}
				}
				.self{
					position: fixed;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 25rpx 0 23rpx;
					background-color: #fff;
					.self-info{
						display: flex;
						align-items: center;
						.self-avatar{
							width: 52rpx;
							height: 52rpx;
							.self-avatar-icon{
								width: 52rpx;
								height: 52rpx;
								border-radius: 50%;
							}
						}
						.self-num{
							display: flex;
							align-items: center;
							font-size: 23rpx;
							color: #000000;
							margin-left: 20rpx;
							.self-num-txt{
								font-weight: 600;
								font-size: 31rpx;
								color: #5CD1F4;
							}
						}
					}
					.self-point{
						font-size: 23rpx;
						color: #5CD1F4;
					}
				}
			}
		}
	}
</style>