<template>
	<view class="invitation-ranks-home-container">
		<view class="plr30 ptb30">
			<view class="item-card" :style="{ 'background': themeStore.theme.lightBgColor }">
				<view class="item-title"
					:style="{ 'background-image': themeStore.imageCssUrl.invitationRanksCardBg, color: themeStore.theme.text.highlight }">
					{{ $t('promo.invitationRanks.homeText1') }}
				</view>
				<view class="item-subtitle ft12 mt16" :style="{ 'color': themeStore.theme.text.highlight }">
					{{ $t('promo.invitationRanks.homeText2') }}
				</view>
				<view class="item-reward flex-acenter flex-scenter ft15 mt16"
					:style="{ 'background-image': themeStore.imageCssUrl.invitationRanksBgNumber, color: themeStore.theme.text.light }">
					<view>
						{{ $t('promo.invitationRanks.homeText3') }}
					</view>
					<view class="plr16" style="font-size: 50rpx;" :style="{ 'color': themeStore.theme.text.highlight }">
						{{ appStore.currencySign }} {{ $formatThousandDot(promoStore.inviterank.uptoRewards) }}
					</view>
					<view :style="{ 'color': themeStore.theme.text.light }">
						{{ $t('promo.invitationRanks.homeText4') }}
					</view>
				</view>
				<view class="item-des ft12 mt16">
					{{ $t('promo.invitationRanks.homeText5') }}
				</view>
				<view class="flex-acenter mt16 ft10 w-100p" style="justify-content: space-around;"
					:style="{ 'color': themeStore.theme.text.theme2 }">
					<view class="item-small-btn" :style="{ 'background': themeStore.theme.button.bgColor }"
						@click.stop="handleRulesClick(0)">
						{{ $t('promo.invitationRanks.rules') }}
					</view>
					<view class="item-small-btn" :style="{ 'background': themeStore.theme.button.bgColor }"
						@click.stop="handleMyRewardsClick">
						{{ $t('promo.invitationRanks.myRewards') }}
					</view>
					<view v-if="!userStore.userInfo.mobile" class="item-small-btn"
						:style="{ 'background': themeStore.theme.button.bgColor }" @click.stop="handleBindClick">
						{{ $t('promo.invitationRanks.bindToJoin') }}
					</view>
				</view>
			</view>
			<view class="item-card mt32" :style="{ 'background': themeStore.theme.lightBgColor }">
				<view class="item-title" :style="{ 'background-image': themeStore.imageCssUrl.invitationRanksCardBg, color: themeStore.theme.text.highlight }">
					{{ $t('promo.invitationRanks.homeText6') }}
				</view>
				<view class="item-subtitle ft12 mt16" :style="{ 'color': themeStore.theme.text.highlight }">
					{{ $t('promo.invitationRanks.homeText7') }}
				</view>
				<view class="item-reward flex-acenter flex-scenter ft15 mt16"
					:style="{ 'background-image': themeStore.imageCssUrl.invitationRanksBgNumber, color: themeStore.theme.text.light }">
					<view>
						{{ $t('promo.invitationRanks.homeText8') }}
					</view>
					<view class="plr16" style="font-size: 50rpx;" :style="{ 'color': themeStore.theme.text.highlight }">
						{{ appStore.currencySign }} {{ $formatThousandDot(promoStore.inviterank.topRewards) }}
					</view>
				</view>
				<view class="item-des ft12 mt16" :style="{ 'color': themeStore.theme.text.light }">
					{{ $t('promo.invitationRanks.homeText9') }}
				</view>
				<view class="flex-acenter mt16 ft10 w-100p" style="justify-content: space-around;"
					:style="{ 'color': themeStore.theme.text.theme2 }">
					<view class="item-small-btn" :style="{ 'background': themeStore.theme.button.bgColor }"
						@click.stop="handleRulesClick(1)">
						{{ $t('promo.invitationRanks.rules') }}
					</view>
					<view class="item-small-btn" :style="{ 'background': themeStore.theme.button.bgColor }"
						@click.stop="handleRankClick">
						{{ $t('promo.invitationRanks.rank') }}
					</view>
					<view v-if="!userStore.userInfo.mobile" class="item-small-btn"
						:style="{ 'background': themeStore.theme.button.bgColor }" @click.stop="handleBindClick">
						{{ $t('promo.invitationRanks.bindToJoin') }}
					</view>
				</view>
			</view>
		</view>
		<view v-if="!promoStore.inviterank.isActivityEnd" class="earn-footer-body" :style="{color: themeStore.theme.text.light}">
			<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.seplineColor }"></view>
			<view class="my-link-label plr30 mt24">
				{{ $t('promo.invitationRanks.inviteLink') }}:
			</view>
			<view class="my-link">
				<view class="my-link-content" :style="{ 'background': themeStore.theme.input.bgColor }">
					{{ pageData.inviteLink }}
				</view>
				<view class="coby-btn" :style="{ 'background': themeStore.theme.earn.gradientBtn }"
					@click.stop="copyText({ text: pageData.inviteLink })">{{ $t('earn.footer.copy') }}</view>
			</view>
			<view class="my-link-label plr30">
				{{ $t('promo.invitationRanks.inviteCode') }}:
			</view>
			<view class="my-link">
				<view class="my-link-content" :style="{ 'background': themeStore.theme.input.bgColor }">
					{{ pageData.inviteCode }}
				</view>
				<view class="coby-btn" :style="{ 'background': themeStore.theme.earn.gradientBtn }"
					@click.stop="copyText({ text: pageData.inviteCode })">{{ $t('earn.footer.copy') }}</view>
			</view>
			<view class="share-btn"
				:style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
				@click.stop="shareWithSystem({url: pageData.inviteLink})">
				<theme-image src="@/static/earn/share-icon.png" class="share-icon"></theme-image>
				<text>{{ $t('earn.footer.share') }}</text>
			</view>
		</view>
		<view v-if="promoStore.inviterank.isActivityEnd" class="earn-footer-body">
			<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.seplineColor }"></view>
			<view class="ptb30 plr30 ft13">
				{{ $t('promo.invitationRanks.homeText10') }}
			</view>
			<view class="share-btn"
				:style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
				@click.stop="handleMyRewardsClick()">
				<text>{{ $t('promo.invitationRanks.myRewards') }}</text>
			</view>
		</view>
	</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 { requestAppEventUpload } from '@/api/app.js'
import { getAgentInfoApi } from '@/api/earn.js';
import { reactive } from 'vue'
import Toast from '@/module/toast/toast.js'
import { onMounted } from 'vue'
import { copyText, shareWithSystem } from '@/module/utils/system.js'

const promoStore = usePromoStore()
const appStore = useAppStore()
const userStore = useUserStore()
const themeStore = useThemeStore()

const pageData = reactive({
	inviteLink: '',
	inviteCode: '',
})

onMounted(() => {
	getAgentInfo()
})

const getAgentInfo = async () => {
	const { code, data } = await getAgentInfoApi()
	if (code == 200) {	
		pageData.inviteLink = data.referralUrl || ''
		if (data.referralUrl) {
			const arr = data.referralUrl.split('?')
			if (arr.length > 1) {
				const param = arr[1]
				const paramArr = param.split('&')
				paramArr.forEach(el => {
					if (el.includes('invite_code=')) {
						pageData.inviteCode = el.replace('invite_code=', '')
					}
				})
			}
		}
	}
}

const handleRulesClick = (index) => {
	promoStore.inviterank.tabIndex = 3
	promoStore.inviterank.rulsTabIndex = index
}

const handleRankClick = () => {
	promoStore.inviterank.tabIndex = 1
}

const handleMyRewardsClick = () => {
	promoStore.inviterank.tabIndex = 2
}

const handleBindClick = () => {
	uni.navigateTo({
		url: '/pages/account/PhoneBinding/PhoneBinding'
	})
}
</script>

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

.item-card {
	padding: 0rpx 30rpx;
	padding-bottom: 30rpx;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.item-title {
		width: 440rpx;
		height: 58rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		text-align: center;
		line-height: 58rpx;
		color: #82100D;
		font-size: 32rpx;
	}

	.item-reward {
		width: 100%;
		height: 110rpx;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.item-small-btn {
		width: 180rpx;
		height: 42rpx;
		border-radius: 21rpx;
		line-height: 42rpx;
		text-align: center;
	}
}

.earn-footer-body {
	// position: fixed;
	// z-index: 1;
	// bottom: 0;
	// left: 0;
	// right: 0;
	// height: 276rpx;
	box-sizing: border-box;
	padding-bottom: 50rpx;

	.my-link-label {
		font-size: 28rpx;
		flex-shrink: 0;
	}

	.my-link {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 24rpx 30rpx;

		.my-link-content {
			flex: 1;
			margin-right: 24rpx;
			height: 76rpx;
			border-radius: 20rpx;
			line-height: 76rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			padding: 0 24rpx;
			font-size: 24rpx;
		}

		.coby-btn {
			flex-shrink: 0;
			width: 130rpx;
			height: 70rpx;
			background: linear-gradient(0deg, #32b12f 0%, #10740b 100%);
			border-radius: 35rpx;
			line-height: 70rpx;
			color: #fff;
			font-size: 30rpx;
			text-align: center;
			line-height: 70rpx;
			flex-shrink: 0;
		}
	}

	.share-btn {
		width: 690rpx;
		height: 90rpx;
		background: linear-gradient(90deg, #f78b22, #e34e04);
		border-radius: 45rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		line-height: 90rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		box-sizing: border-box;
		padding-left: 228rpx;

		.share-icon {
			margin-right: 30rpx;
			width: 53rpx;
			height: 54rpx;
		}
	}
}
</style>