<template>
	<view v-if="modelValue">
		<NormalPopupView
			@close="handleCloseClick"
		>
			<view>
				<view class="title">
					History
				</view>
				<view class="list-container mt20">
					<view class="list-item">
						<view class="list-value">
							{{ $t('promo.invitationRanks.rank') }}
						</view>
						<view class="list-value">
							{{ $t('promo.invitationRanks.phoneNo') }}
						</view>
						<view class="list-value">
							{{ $t('promo.invitationRanks.invite') }}
						</view>
						<view class="list-value" :style="{ 'color': themeStore.theme.text.highlight }">
							{{ $t('promo.invitationRanks.awards') }}
						</view>
					</view>
					<NoDataSearch
						v-if="!pageData.list.length"
					/>
					<view class="list-scroll">
						<view
							class="list-item"
							v-for="(item, index) in pageData.list"
							:key="index"
							:style="{ 'background': themeStore.theme.list.listBgColor }"
						>
							<view class="list-value">
								{{ index + 1 }}th
							</view>
							<view class="list-value">
								{{ encipherAccountPhone(item.mobile) }}
							</view>
							<view class="list-value">
								{{ item.inviteCount }}
							</view>
							<view class="list-value" :style="{ 'color': themeStore.theme.text.highlight }">
								{{ item.award }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</NormalPopupView>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	import NormalPopupView from '@/components/popup/NormalPopupView.vue'
	import { useThemeStore } from '@/store/useThemeStore'
	import { encipherAccountPhone } from '@/module/utils/encipherPhone.js'
	import { getInviteRechageRankHistroyData } from '@/api/promo.js'
import { onMounted } from 'vue';
import NoDataSearch from '@/components/nodata/NoDataSearch.vue'
	
	const themeStore = useThemeStore()
	const emit = defineEmits(['update:modelValue'])
	const props = defineProps({
		modelValue: {
			type: Boolean,
			default: false
		}
	})
	
	const pageData = reactive({
		list: []
	})
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
		const { code, data } = await getInviteRechageRankHistroyData({
			page: 1,
			pageSize: 50
		})
		if (code == 200 && data) {
			pageData.list = data.ranks || []
		}
	}
	
	const handleCloseClick = () => {
		emit('update:modelValue', false)
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 40rpx;
		text-align: center;
		padding-top: 20rpx;
	}
	
	.list-container {
	  width: 100%;
	  box-sizing: border-box;
		
		.list-scroll {
			height: 800rpx;
			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: 24%;
	    }
	  }
	}
</style>