<template>
	<view class="container plr30 ptb30">
		<view class="item-card flex-wrap" :style="{ background: themeStore.theme.promo.invitationRanks.teamCardBg }">
			<view class="item-view flex-acenter flex-column">
				<view class="ft14" :style="{ color: themeStore.theme.text.light }">
					{{ $t('promo.invitationRanks.teamText1') }}
				</view>
				<view class="ft20" :style="{ color: themeStore.theme.text.highlight }">
					{{ pageData.headerData.inviteCountTotal || 0 }}
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="ft14" :style="{ color: themeStore.theme.text.light }">
					{{ $t('promo.invitationRanks.teamText2') }}
				</view>
				<view class="ft20 flex-acenter" style="padding-left: 40rpx;"
					:style="{ color: themeStore.theme.text.highlight }">
					<view>
						{{ pageData.headerData.inviteCount || 0 }}
					</view>
					<theme-image @click="handleQuestionClick" class="ml16" src="@/static/icon-question.png"
						style="width: 32rpx; height: 32rpx;" />
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="ft14" :style="{ color: themeStore.theme.text.light }">
					{{ $t('promo.invitationRanks.teamText3') }}
				</view>
				<view class="ft20" :style="{ color: themeStore.theme.text.highlight }">
					{{ $formatThousandDot(pageData.headerData.award) }}
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="ft14" :style="{ color: themeStore.theme.text.light }">
					{{ $t('promo.invitationRanks.teamText4') }}
				</view>
				<view class="ft20" :style="{ color: themeStore.theme.text.highlight }">
					{{ $formatThousandDot(pageData.headerData.auditHeadAward) }}
				</view>
			</view>
		</view>
		<view class="ft14 mt24" :style="{ color: themeStore.theme.text.light }">
			{{ $t('promo.invitationRanks.teamText5') }}
			{{ appStore.currencySign }}
			{{ pageData.headerData.nextAward || 0 }}
			{{ $t('promo.invitationRanks.teamText6') }}
			{{ pageData.headerData.nextInviteRequired || 0 }}
			{{ $t('promo.invitationRanks.teamText10') }}
		</view>
		<view class="flex-scenter pt30">
			<RoundSegmentControl v-model="promoStore.inviterank.teamTabIndex" :list="[
				$t('promo.invitationRanks.teams'),
				$t('promo.invitationRanks.rewards'),
			]" />
		</view>
		<view v-if="promoStore.inviterank.teamTabIndex === 1" class="list-container ptb30"
			:style="{ color: themeStore.theme.text.normal }">
			<view class="list-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				<view class="list-value">
					ID
				</view>
				<view class="list-value">
					{{ $t('promo.invitationRanks.rewards') }}
				</view>
				<view class="list-value" @click.stop="handleStatusClick">
					<view>
						{{ $t('promo.invitationRanks.teamText11') }}
					</view>
					<view class="ml16 mt12">
						<theme-image src="@/static/icon-dropdown.png" mode="aspectFit"
							style="width: 26rpx; height: 26rpx;"></theme-image>
					</view>
				</view>
			</view>
			<view class="list-scroll" :style="{ height: `calc(100vh - 750rpx - ${appStore.headerStyle.height}px)` }">
				<NoDataSearch style="width: 100%" v-if="pageData.list.length === 0" />
				<view class="list-item" v-for="(item, index) in pageData.list"
					:style="{ 'background': themeStore.theme.list.listBgColor }">
					<view class="list-value">
						{{ item.userId }}
					</view>
					<view class="list-value">
						{{ item.award }}
					</view>
					<view class="list-value">
						<view class="claimable-btn" :style="{ background: themeStore.theme.button.other }"
							v-if="item.status === 0" @click.stop="handleClaimClick(item)">{{
								$t('promo.invitationRanks.claim') }}</view>
						<view class="claimable-btn" :style="{ background: themeStore.theme.button.other }"
							v-if="item.status === 3" @click.stop="handleClaimClick(item)">{{
								$t('promo.invitationRanks.reClaim') }}</view>
						<view v-if="item.status === 1 || item.status === 4">{{ $t('promo.invitationRanks.pass') }}
						</view>
						<view v-if="item.status === 2">{{ $t('promo.invitationRanks.underReview') }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="promoStore.inviterank.teamTabIndex === 0" class="list-container ptb30"
			:style="{ color: themeStore.theme.text.normal }">
			<view class="ft14 flex-acenter">
				<view @click.stop="handleHideInvalidClick" class="mr12">
					<theme-image v-if="pageData.hideInvalid" src="@/static/login/check.png" mode="aspectFit"
						style="width: 38rpx; height: 38rpx;" />
					<theme-image v-else src="@/static/login/no-check.png" mode="aspectFit"
						style="width: 38rpx; height: 38rpx;" />
				</view>
				<view>
					{{ $t('promo.invitationRanks.teamText7') }}
				</view>
			</view>
			<view class="list-item mt16" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				<view class="list-value">
					ID
				</view>
				<view class="list-value flex-acenter">
					<view>
						{{ $t('promo.invitationRanks.teamText8') }}
					</view>
					<view class="ml16 mt10" @click.stop="handleSortClick(1)">
						<theme-image v-if="pageData.sortByTime" src="@/static/icon-sort1.png" mode="aspectFit"
							style="width: 26rpx; height: 26rpx;"></theme-image>
						<theme-image v-else src="@/static/icon-sort.png" mode="aspectFit"
							style="width: 26rpx; height: 26rpx;" />
					</view>
				</view>
				<view class="list-value flex-acenter">
					<view>
						{{ $t('promo.invitationRanks.teamText9') }}
					</view>
					<view class="ml16 mt10" @click.stop="handleSortClick(2)">
						<theme-image v-if="pageData.sortByDeposit" src="@/static/icon-sort1.png" mode="aspectFit"
							style="width: 26rpx; height: 26rpx;"></theme-image>
						<theme-image v-else src="@/static/icon-sort.png" mode="aspectFit"
							style="width: 26rpx; height: 26rpx;" />
					</view>
				</view>
			</view>
			<view class="list-scroll" :style="{ height: `calc(100vh - 790rpx - ${appStore.headerStyle.height}px)` }">
				<NoDataSearch style="width: 100%" v-if="pageData.teamList.length === 0" />
				<view class="list-item" v-for="(item, index) in pageData.teamList"
					:style="{ 'background': themeStore.theme.list.listBgColor }">
					<view class="list-value">
						{{ item.userId }}
					</view>
					<view class="list-value">
						{{ item.inviteTimeFormat }}
					</view>
					<view class="list-value">
						{{ item.rechargeTotal }}
					</view>
				</view>
			</view>
		</view>
		<view v-if="pageData.statusSelectPopupVisible" class="status-popup-view"
			@click.stop="pageData.statusSelectPopupVisible = false">
			<view class="content"
				:style="{ 'background': themeStore.theme.lightBgColor, 'border': `2rpx solid ${themeStore.theme.bgColor}`, 'top': `calc(100vh - 760rpx - ${appStore.headerStyle.height}px)` }">
				<view v-for="(item, index) in pageData.statusList" :key="index" class="select-item"
					@click.stop="handleStatusChange(item)">
					{{ item.title }}
				</view>
			</view>
		</view>
		<TipsPopup ref="tipsPopupRef"
			text="Valid invitation: The user you invite needs to deposit ≥1000 to be defined as a valid invitation" />
	</view>
</template>

<script setup>
import { usePromoStore } from '@/store/usePromoStore'
import { useAppStore } from '@/store/useAppStore'
import { useUserStore } from '@/store/useUserStore'
import { useThemeStore } from '@/store/useThemeStore.js'
import { reactive } from 'vue'
import RoundSegmentControl from '@/components/segment/RoundSegmentControl.vue'
import { requestInviteRechageRankHeadAwardList, requestInviteRechageRankBelowData, requestInviteRechageRankBelowList, requestInviteRechageRankHeadAwardReceive } from '@/api/promo.js'
import { onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import Toast from '@/module/toast/toast.js'
import TipsPopup from '@/components/popup/TipsPopup.vue'
import { ref } from 'vue'
import NoDataSearch from "@/components/nodata/NoDataSearch.vue";

const { t } = useI18n()
const promoStore = usePromoStore()
const appStore = useAppStore()
const userStore = useUserStore()
const themeStore = useThemeStore()
const tipsPopupRef = ref(null)

const pageData = reactive({
	originList: [],
	list: [],
	headerData: {},
	teamList: [],
	sortByTime: false,
	sortByDeposit: false,
	hideInvalid: true,
	currentStatus: -1,
	statusList: [
		{
			title: t('promo.invitationRanks.all'),
			key: -1
		},
		{
			title: t('promo.invitationRanks.underReview'),
			key: 2
		},
		{
			title: t('promo.invitationRanks.pass'),
			key: 1
		},
		{
			title: t('promo.invitationRanks.claimable'),
			key: 0
		}
	],
	statusSelectPopupVisible: false
})

onMounted(() => {
	loadAllData()
})

const loadAllData = () => {
	loadData()
	loadTeamData()
	loadHeaderData()
}

const loadData = async () => {
	const { code, data } = await requestInviteRechageRankHeadAwardList({
		status: pageData.currentStatus
	})
	if (code !== 200) { return }
	pageData.originList = data || []
	pageData.list = data || []
}

const loadTeamData = async () => {
	const { code, data } = await requestInviteRechageRankBelowList({
		page: 1,
		pageSize: 50,
		inviteTimeSrot: Number(pageData.sortByTime),
		rechargeTotalSort: Number(pageData.sortByDeposit),
		hideInvalid: Number(pageData.hideInvalid)
	})
	if (code !== 200) { return }
	pageData.teamList = data.belows || []
}

const loadHeaderData = async () => {
	const { code, data } = await requestInviteRechageRankBelowData()
	if (code !== 200) { return }
	pageData.headerData = data
}

const handleSortClick = (index) => {
	if (index === 1) {
		pageData.sortByTime = !pageData.sortByTime
		if (pageData.sortByTime) {
			pageData.sortByDeposit = false
		}
	}
	if (index === 2) {
		pageData.sortByDeposit = !pageData.sortByDeposit
		if (pageData.sortByDeposit) {
			pageData.sortByTime = false
		}
	}
	loadTeamData()
}

const handleHideInvalidClick = () => {
	pageData.hideInvalid = !pageData.hideInvalid
	loadTeamData()
}

const handleStatusClick = (item) => {
	pageData.statusSelectPopupVisible = true
}

const handleStatusChange = (item) => {
	pageData.statusSelectPopupVisible = false
	pageData.currentStatus = item.key
	loadData()
}

const handleClaimClick = async (item) => {
	Toast.showLoading('Loading')
	const { code, data } = await requestInviteRechageRankHeadAwardReceive({
		id: item.id
	})
	Toast.hideLoading()
	if (code !== 200) { return }
	Toast.show('The reward application has been submitted and we will review it for you as soon as possible')
	loadAllData()
}

const handleQuestionClick = () => {
	tipsPopupRef.value.show()
}

defineExpose({
	loadAllData
})
</script>

<style lang="scss" scoped>
.container {
	position: relative;
}

.status-popup-view {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 999;


	.content {
		position: fixed;
		top: 0;
		right: 30rpx;
		z-index: 999;
		border-radius: 20rpx;
		padding: 20rpx;

		.select-item {
			text-align: center;
			padding: 6rpx;
			font-size: 28rpx;
		}
	}
}

.item-card {
	border-radius: 20rpx;
	padding: 30rpx 0rpx;

	.item-view {
		width: 49%;
		padding: 15rpx;
	}
}

.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%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.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;
		}

		.claimable-btn {
			padding: 0rpx 20rpx;
			height: 40rpx;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			border-radius: 20rpx;
			width: 120rpx;
		}
	}
}
</style>