<template>
	<view class="rank-view-container ptb30 plr30">
		<view class="rank-history" @click.stop="() => { pageData.historyPopupVisible = true }">
			<theme-image src="@/static/rank-history-fixed-icon.png" style="width: 96rpx; height: 55rpx;" />
		</view>
		<view class="flex-sbetween top3-view plr30">
			<view class="top3-item second" :style="{ 'background-image': themeStore.imageCssUrl.invitationRanksRank2 }">
				<view class="phone">
					{{ encipherAccountPhone(pageData.second.mobile) }}
				</view>
				<view class="value">
					{{ pageData.second.inviteCount }}
				</view>
			</view>
			<view class="top3-item first" :style="{ 'background-image': themeStore.imageCssUrl.invitationRanksRank1 }">
				<view class="phone">
					{{ encipherAccountPhone(pageData.first.mobile) }}
				</view>
				<view class="value">
					{{ pageData.first.inviteCount }}
				</view>
			</view>
			<view class="top3-item third" :style="{ 'background-image': themeStore.imageCssUrl.invitationRanksRank3 }">
				<view class="phone">
					{{ encipherAccountPhone(pageData.third.mobile) }}
				</view>
				<view class="value">
					{{ pageData.third.inviteCount }}
				</view>
			</view>
		</view>
		<view class="list-container mt40 plr30" :style="{color: themeStore.theme.text.normal}">
			<view class="list-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				<view class="list-value" :style="{ 'color': themeStore.theme.text.highlight }">
					{{ $t('promo.invitationRanks.rank') }}
				</view>
				<view class="list-value">
					{{ $t('promo.invitationRanks.phoneNumber') }}
				</view>
				<view class="list-value">
					{{ $t('promo.invitationRanks.invite') }}
				</view>
			</view>
			<NoDataSearch
				v-if="!pageData.list.length"
			/>
			<view v-if="pageData.list.length > 0" class="list-scroll" :style="{ height: `calc(100vh - 665rpx - ${appStore.headerStyle.height}px)` }">
				<view
					class="list-item"
					v-for="(item, index) in pageData.list"
					:style="{ 'background': themeStore.theme.list.listBgColor }"
				>
					<view class="list-value" :style="{ 'color': themeStore.theme.text.highlight }">
						{{ item.rank }}th
					</view>
					<view class="list-value">
						{{ encipherAccountPhone(item.mobile) }}
					</view>
					<view class="list-value">
						{{ item.inviteCount }}
					</view>
				</view>
			</view>
			<view class="list-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				
				<view class="list-value flex-acenter" :style="{ 'color': themeStore.theme.text.highlight }">
					<view class="my-rank-tag" :style="{ 'background-image': themeStore.imageCssUrl.invitationRanksMe }">
						Me
					</view>
					<view>
						{{ pageData.myRank < 1 ? '>10000th' : pageData.myRank + 'th' }}
					</view>
				</view>
				<view class="list-value">
					{{ encipherAccountPhone(userStore.userInfo.mobile) }}
				</view>
				<view class="list-value">
					{{ pageData.myInviteCount }}
				</view>
			</view>
		</view>
		<InvitationRankHistoryPopup
			v-model="pageData.historyPopupVisible"
		/>
	</view>
</template>

<script setup>
	import { usePromoStore } from '@/store/usePromoStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useUserStore } from '@/store/useUserStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { reactive } from 'vue'
	import { requestInviteRechageRankData } from '@/api/promo.js'
	import { onMounted } from 'vue'
	import { encipherAccountPhone } from "@/module/utils/encipherPhone.js";
	import InvitationRankHistoryPopup from './InvitationRankHistoryPopup.vue'
	import NoDataSearch from '@/components/nodata/NoDataSearch.vue'
	
	const promoStore = usePromoStore()
	const appStore = useAppStore()
	const userStore = useUserStore()
	const themeStore = useThemeStore()
	
	const pageData = reactive({
		historyPopupVisible: false,
		list: [],
		first: {},
		second: {},
		third: {},
		myRank: 0,
		myInviteCount: 0
	})
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
		const { code, data } = await requestInviteRechageRankData({
			page: 1,
			pageSize: 20
		})
		if (code !== 200) { return }
		const list = data.ranks || []
		pageData.myInviteCount = data.inviteCount || 0
		pageData.myRank = data.rank || 0
		pageData.list = list.filter((el, index) => {
			return index > 2
		})
		if (list.length > 0) {
			pageData.first = list[0]
		}
		if (list.length > 1) {
			pageData.second = list[1]
		}
		if (list.length > 2) {
			pageData.third = list[2]
		}
	}
</script>

<style lang="scss" scoped>
	.rank-view-container {
		position: relative;
		
		.rank-history {
			position: absolute;
			top: 40rpx;
			left: -1rpx;
			z-index: 5;
		}
	}
	
	.top3-view {
		height: 320rpx;
		
		.top3-item {
			width: 185rpx;
			height: 275rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			
			.phone {
				padding-top: 135rpx;
				font-size: 22rpx;
				text-align: center;
			}
			
			.value {
				padding-top: 14rpx;
				font-size: 20rpx;
				text-align: center;
			}
		}
		
		.first {
			color: #845A11;
		}
		
		.second {
			color: #516BD8;
			align-self: flex-end;
		}
		
		.third {
			color: #A65A38;
			align-self: flex-end;
		}
	}
	
	.list-container {
	  width: 100%;
	  box-sizing: border-box;
		
		.list-scroll {
			overflow-y: scroll;
		}
		
	  .list-item {
	    width: 100%;
	    margin-bottom: 10rpx;
	    background: #8d120e;
	    border-radius: 20rpx;
	    display: flex;
	    height: 62rpx;
	    justify-content: space-around;
	    text-align: center;
	    line-height: 62rpx;
			
	    .list-value {
	      font-size: 24rpx;
				min-width: 25%;
	    }
			
			.my-rank-tag {
				width: 40rpx;
				height: 40rpx;
				align-self: flex-start;
				margin-right: 10rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				font-size: 24rpx;
				line-height: 40rpx;
				color: #A65A38;
			}
	  }
	}
</style>