<template>
	<view>
		<touch-popup ref="popup" background="#FFFDE8" :backShow="true">
			<view class="bck">
				<view style="width: 100%;height: 15px;"></view>
				<view class="star1">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star1.png" mode="widthFix"></image>
				</view>
				<view class="star2">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star2.png" mode="widthFix"></image>
				</view>
				<view class="star3">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star3.png" mode="widthFix"></image>
				</view>
				<view class="star4">
					<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/star4.png" mode="widthFix"></image>
				</view>
				<view class="center" style="padding: 15px;">
					排行榜
				</view>
				<!-- 金币、铜币、银币点击切换榜单 -->
				<view class="tabbar">
					<view class="tabbar-item" @click="switchTab(2)">
						<view class="coin-item" :class="{ check: curCoin === 2 }">
							<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/silver.png" mode="widthFix"></image>
						</view>
						<view class="coin-text">
							银币榜
						</view>
					</view>
					<view class="tabbar-item" @click="switchTab(1)">
						<view class="coin-item" :class="{ check: curCoin === 1 }">
							<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/gold.png" mode="widthFix"></image>
						</view>
						<view class="coin-text">
							金币榜
						</view>
					</view>
					<view class="tabbar-item" @click="switchTab(3)">
						<view class="coin-item" :class="{ check: curCoin === 3 }">
							<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/copper.png" mode="widthFix"></image>
						</view>
						<view class="coin-text">
							铜币榜
						</view>
					</view>
				</view>

				<!-- 排行榜列表 -->
				<scroll-view scroll-y>
					<view class="pd-25">
						<view class="rank-list">
							<view v-for="(item, index) in curList" key="rank" class="rank-item">
								<view class="leftnum" :class="{'rank-weight': index < 3}">
									{{index+1}}
								</view>
								<view class="centeravatar">
									<image v-if="index <= 2" class="zhuangshi" src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/皇冠.png" mode="widthFix">
									</image>
									<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="widthFix"></image>
								</view>
								<view class="centernickname">
									{{item.name}}
								</view>
								<view class="rightbalance">
									<view class="price-item">
										<view class="price-bck">
											<view class="logo-bck">
												<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix">
												</image>
											</view>
											<text>{{item.num}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="mypoint">
					<view class="my-bck">
						<view class="myavatar">
							<image src="https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/my/rank/avatar.png" mode="aspectFill"></image>
						</view>
						<view class="mynickname center">
							{{app.globalData.userinfo.name}}
						</view>
						<view class="mybanance">
							<view class="">
								<image :src="'https://6a69-jinxiangguo-7g6kqddnb0a8aa47-1326817332.tcb.qcloud.la/img/game/' + coinType" mode="widthFix"></image>
								<text>{{curMyCoinNum.num ? curMyCoinNum.num : 0}}</text>
							</view>
						</view>
						<view class="myrank">
							我的名次：<text>{{curMyCoinNum.hasOwnProperty('i') ? '上海市NO.'+(curMyCoinNum.i+1) : '暂无排名'}}</text>
						</view>
					</view>
				</view>
			</view>
		</touch-popup>
	</view>
</template>

<script setup>
	const app = getApp()
	import {
		ref,
		defineExpose,
		computed
	} from 'vue'
	import touchPopup from '@/components/touch-popup/touch-popup'
	const popup = ref() // ref组件

	const curCoin = ref(1) // 0银币 1金币 2铜币
	const rankList = ref({}) // 银币排行榜列表
	const mySilverRank = ref({}) // 我的银币排名信息
	const myGoldRank = ref({}) // 我的金币排名信息
	const myCopperRank = ref({}) // 我的铜币排名信息

	/* 计算属性 */
	// 获取当前列表的金币、铜币还是银币图标
	const coinType = computed(() => {
		if (curCoin.value === 2) {
			return 'silver.png'
		} else if (curCoin.value === 1) {
			return 'gold.png'
		} else if (curCoin.value === 3) {
			return 'copper.png'
		}
	})
	// 当前列表
	const curList = computed(() => {
		return rankList.value[curCoin.value]
	})
	// 我的硬币数量
	const curMyCoinNum = computed(() => {
		if (curCoin.value === 2) {
			if (JSON.stringify(mySilverRank.value) === '{}') return 0
			return mySilverRank.value
		} else if (curCoin.value === 1) {
			if (JSON.stringify(myGoldRank.value) === '{}') return 0
			return myGoldRank.value
		} else if (curCoin.value === 3) {
			if (JSON.stringify(myCopperRank.value) === '{}') return 0
			return myCopperRank.value
		}
	})

	/* 方法 */
	const switchTab = (e) => {
		if (curCoin.value === e) return
		curCoin.value = e
	}
	const open = () => {
		popup.value.open()
		if (JSON.stringify(rankList.value) !== '{}') return
		uni.showLoading()
		uni.request({
			url: app.globalData.requestUrl + '/api/coin/user/top',
			header: {
				'Authorization': 'Bearer ' + app.globalData.token
			},
			success: (res) => {
				if (res.data.code === 200) {
					rankList.value = res.data.data
					for (let i = 0; i < res.data.data[1].length; i++) {
						if (res.data.data[1][i].user_id == app.globalData.userinfo.id) {
							myGoldRank.value = res.data.data[1][i]
							myGoldRank.value.i = i
							break
						}
					} // 我的金币排名信息
					for (let i = 0; i < res.data.data[2].length; i++) {
						if (res.data.data[2][i].user_id == app.globalData.userinfo.id) {
							mySilverRank.value = res.data.data[2][i]
							mySilverRank.value.i = i
							break
						}
					} // 我的银币排名信息
					for (let i = 0; i < res.data.data[3].length; i++) {
						if (res.data.data[3][i].user_id == app.globalData.userinfo.id) {
							myCopperRank.value = res.data.data[3][i]
							myCopperRank.value.i = i
							break
						}
					} // 我的铜币排名信息

				} else {
					uni.showToast({
						title: '获取排行榜列表失败，请重试',
						icon: 'none'
					})
				}
			},
			complete: () => {
				uni.hideLoading()
			}
		})
	}
	defineExpose({
		open
	}) // 暴露方法
</script>

<style scoped>
	.rank-weight {
		color: #FFD600;
	}
	.my-bck {
		background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
		border-radius: 25px;
		height: 50px;
		display: flex;
	}

	.myavatar image {
		border: 3px solid #000;
		border-radius: 20px;
		width: 35px;
		height: 35px;
	}

	.myavatar {
		display: flex;
		align-items: center;
		padding: 0 10px;
	}

	.mynickname {
		font-size: 14px;
	}

	.mybanance view {
		padding: 0 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 2px solid rgba(0, 0, 0, 0.1);
		border-right: 2px solid rgba(0, 0, 0, 0.1);
	}

	.mybanance image {
		width: 15px;
		height: auto;
	}

	.mybanance text {
		padding-left: 10px;
	}

	.mybanance {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		font-weight: bold;
	}

	.myrank {
		padding-right: 15px;
		display: flex;
		align-items: center;
		font-size: 13px;
	}

	.mypoint {
		padding: 0 15px 15px 15px;
	}

	.price-bck text {
		padding: 0 8px 0 5px;
	}

	.price-bck image {
		width: 23px;
		height: auto;
	}

	.price-bck .logo-bck {
		display: flex;
	}

	.price-bck {
		height: 18px;
		background: linear-gradient(137.8deg, #C2FF8F 0%, #0DFFB9 99.99%);
		border-radius: 13px;
		display: flex;
		align-items: center;
		font-size: 12px;
		font-weight: 700;
	}

	.price-item {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.leftnum {
		font-family: Baloo;
		font-size: 25px;
		font-weight: 400;
		line-height: 39.35px;
		width: 50px;
		font-weight: bolder;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhuangshi {
		width: 11px !important;
		position: absolute;
		top: -3px;
	}

	.centeravatar image {
		width: 29px;
		height: auto;
	}

	.centeravatar {
		display: flex;
		width: 50px;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.centernickname {
		flex: 2;
		font-size: 15px;
		display: flex;
		padding: 0 20px;
		align-items: center;
	}

	.rightbalance {
		display: flex;
		align-items: center;
	}

	.rank-item {
		display: flex;
		padding: 5px;
	}

	.rank-list {
		display: flex;
		flex-direction: column;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.pd-25 {
		padding: 5px 25px;
	}

	scroll-view {
		height: calc(100% - 300px);
	}

	.coin-text {
		font-size: 14px;
		padding: 3px 10px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.tabbar-item image {
		width: 60px;
		height: auto;
	}

	.check image {
		width: 75px !important;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 105px;
	}

	.tabbar {
		padding: 15px 50px 15px 50px;
		display: flex;
	}

	.star1 image {
		width: 80px;
		height: auto;
	}

	.star1 {
		position: absolute;
		top: 40px;
		left: 0;
	}

	.star2 image {
		width: 40px;
		height: auto;
	}

	.star2 {
		position: absolute;
		top: 45px;
		right: 60px;
	}

	.star3 image {
		width: 25px;
		height: auto;
	}

	.star3 {
		position: absolute;
		top: 70px;
		left: 145px;
	}

	.star4 image {
		width: 75px;
		height: auto;
	}

	.star4 {
		position: absolute;
		top: 90px;
		right: 0px;
	}

	.bck {
		height: 100%;
		background: linear-gradient(180deg, #FEF0A7 0%, #FFFFFF 68.42%);
	}
</style>