<template>
	<view class="earn-home-container" :style="{ color: themeStore.theme.text.light }">
		<view class="ft13 plr30" style="line-height: 1.8;">
			{{ $t('earn.home.topDes') }}
		</view>
		<view class="plr30 pt30" :style="{ color: themeStore.theme.text.light }">
			<view class="item-card flex-wrap"
				:style="{ background: themeStore.theme.promo.invitationRanks.teamCardBg }">
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.myAgentLevel') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { levelTipRef.show() }" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<theme-image :src="pageData.agentInfo.imageUrl" style="width: 82rpx; height: 34rpx;" />
						<view class="ft16 ml8" :style="{ color: themeStore.theme.text.highlight }">
							{{ $t('earn.home.level') }}: {{ pageData.agentInfo.level || 0 }}
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.myRebateRatio') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="handleQuestionClick" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="ft18 mt14 flex-acenter" style="padding-left: 40rpx;"
						:style="{ color: themeStore.theme.text.highlight }">
						<view>
							{{ $formatFloat((pageData.agentInfo.rebateRatio || 0) * 100, 2) }}%
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.myTeam') }}({{ $t('earn.home.today') }})
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { teamTodayTipRef.show() }" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<theme-image src="@/static/icon-people.png" style="width: 32rpx; height: 32rpx;" />
						<view class="ft16 ml8" :style="{ color: themeStore.theme.text.highlight }">
							{{ pageData.agentInfo.myTeam || 0 }}(+{{ pageData.agentInfo.myTeamToday || 0 }})
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.myDirect') }}({{ $t('earn.home.today') }})
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { directTodayTipRef.show() }" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<theme-image src="@/static/icon-people.png" style="width: 32rpx; height: 32rpx;" />
						<view class="ft16 ml8" :style="{ color: themeStore.theme.text.highlight }">
							{{ pageData.agentInfo.myDirect || 0 }}(+{{ pageData.agentInfo.myDirectToday || 0 }})
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="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="flex-acenter item-view-title">
						<view class="item-title ft14 mr8" style="width: 190rpx;">
							{{ $t('earn.home.item1Des') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { teamPerformanceTipRef.show() }"
								src="@/static/icon-question.png" class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<view class="ft18" :style="{ color: themeStore.theme.text.highlight }">
							{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.todayTeamPerformance,
								2) }}
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8" style="width: 190rpx;">
							{{ $t('earn.home.item2Des') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { directPerformanceTipRef.show() }"
								src="@/static/icon-question.png" class="question-icon" />
						</view>
					</view>
					<view class="ft18 mt14 flex-acenter" :style="{ color: themeStore.theme.text.highlight }">
						<view>
							{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.todayDirectPerformance,
								2) }}
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.item3Des') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { rewardTotalTipRef.show() }" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<view class="ft18" :style="{ color: themeStore.theme.text.highlight }">
							{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.rewardTotal, 2) }}
						</view>
					</view>
				</view>
				<view class="item-view flex-acenter flex-column">
					<view class="flex-acenter item-view-title">
						<view class="item-title ft14 mr8">
							{{ $t('earn.home.item4Des') }}
						</view>
						<view class="question-icon-view">
							<theme-image @click="() => { rewardTodayTipRef.show() }" src="@/static/icon-question.png"
								class="question-icon" />
						</view>
					</view>
					<view class="flex-acenter mt14">
						<view class="ft18" :style="{ color: themeStore.theme.text.highlight }">
							{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.rewardToday, 2) }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 1rpx;" :style="{ 'background': themeStore.theme.seplineColor }"></view>
		<view class="earn-footer-body">
			<view class="my-link-label">
				{{ $t('promo.invitationRanks.inviteLink') }}:
			</view>
			<view class="my-link" :style="{ 'background': themeStore.theme.input.bgColor }">
				<view class="my-link-content">
					{{ link }}
				</view>
				<theme-image src="@/static/icon-copy.png" class="coby-btn" @click.stop="handleCopy" />
			</view>
			<view class="my-link-label">
				{{ $t('promo.invitationRanks.inviteCode') }}:
			</view>
			<view class="my-link" :style="{ 'background': themeStore.theme.input.bgColor }">
				<view class="my-link-content">
					{{ pageData.agentInfo.inviteCode }}
				</view>
				<theme-image src="@/static/icon-copy.png" class="coby-btn"
					@click.stop="copyText({ text: pageData.agentInfo.inviteCode })" />
			</view>
			<view class="share-btn"
				:style="{ 'background': themeStore.theme.button.normal, 'color': themeStore.theme.button.textNormal }"
				@click="handleShare">
				<view>{{ $t('earn.footer.share') }}</view>
			</view>
		</view>
		<EarnV2CommissionTablePopup ref="commissionTablePopupRef" />
		<TipsPopup ref="levelTipRef">
			<view>{{ $t('earn.home.levelTip1') }}</view>
			<view>{{ $t('earn.home.levelTip2') }}</view>
			<view>{{ $t('earn.home.levelTip3') }}</view>
		</TipsPopup>
		<TipsPopup ref="teamTodayTipRef">
			<view>{{ $t('earn.home.teamTodayTip1') }}</view>
			<view>{{ $t('earn.home.teamTodayTip2') }}</view>
		</TipsPopup>
		<TipsPopup ref="directTodayTipRef">
			<view>{{ $t('earn.home.directTodayTip1') }}</view>
			<view>{{ $t('earn.home.directTodayTip2') }}</view>
		</TipsPopup>
		<TipsPopup ref="teamPerformanceTipRef">
			<view>{{ $t('earn.home.teamPerformanceTip1') }}</view>
		</TipsPopup>
		<TipsPopup ref="directPerformanceTipRef">
			<view>{{ $t('earn.home.directPerformanceTip1') }}</view>
		</TipsPopup>
		<TipsPopup ref="rewardTotalTipRef">
			<view>{{ $t('earn.home.rewardTotalTip1') }}</view>
		</TipsPopup>
		<TipsPopup ref="rewardTodayTipRef">
			<view>{{ $t('earn.home.rewardTodayTip1') }}</view>
		</TipsPopup>
	</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, ref } from 'vue'
import Toast from '@/module/toast/toast.js'
import { onMounted } from 'vue'
import { copyText, shareWithSystem } from '@/module/utils/system.js'
import { getAgentV2Home } from '@/api/earn.js'
import EarnV2CommissionTablePopup from './EarnV2CommissionTablePopup.vue'
import TipsPopup from '@/components/popup/TipsPopup.vue'

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

const commissionTablePopupRef = ref(null)
const levelTipRef = ref(null)
const teamTodayTipRef = ref(null)
const directTodayTipRef = ref(null)
const teamPerformanceTipRef = ref(null)
const directPerformanceTipRef = ref(null)
const rewardTotalTipRef = ref(null)
const rewardTodayTipRef = ref(null)

const pageData = reactive({
	agentInfo: {}
})
const link = ref('')
onMounted(() => {
	getAgentHomeInfo()
})
const handleShare = () => {
	console.log('handleShare');
	const shareObj = {
		title: 'Let\'s play games together to earn money!',
		text: "Let's play games together to earn money!",
		url: link.value,
	}
	shareWithSystem(shareObj)
}
const handleCopy = () => {
	// const cid = appStore.channelId ?? '';
	// const h5No = appStore.h5No ?? 1;
	// const link = pageData.agentInfo.inviteLink.includes('?') ? pageData.agentInfo.inviteLink + `&cid=${cid}&h5No=${h5No}` : pageData.agentInfo.inviteLink + `?cid=${cid}&h5No=${h5No}&invite_code=${pageData.agentInfo.inviteCode}`;
	copyText({ text: link.value })
}
const getAgentHomeInfo = async () => {
	const { code, data } = await getAgentV2Home()
	if (code == 200) {
		pageData.agentInfo = data || {}
		const cid = appStore.channelId ?? '';
		const h5No = appStore.h5No ?? 1;
		link.value = data?.inviteLink?.includes('?') ? data?.inviteLink + `&cid=${cid}&h5No=${h5No}` : data?.inviteLink + `?cid=${cid}&h5No=${h5No}&invite_code=${data.inviteCode}`;
	}
}

const handleQuestionClick = () => {
	commissionTablePopupRef.value.show()
}
</script>

<style lang="scss" scoped>
.earn-home-container {
	position: relative;
	padding-bottom: 60rpx;
}

.item-card {
	padding: 0rpx 8rpx;
	padding-top: 45rpx;
	border-radius: 20rpx;

	.item-view {
		width: 49%;
		margin-bottom: 45rpx;

		.item-view-title {
			position: relative;

			.question-icon-view {
				position: absolute;
				top: 0;
				bottom: 0;
				right: -40rpx;
				width: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.question-icon {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.item-title {
		text-align: center;
		line-height: 34rpx;
	}

	.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 {
	box-sizing: border-box;
	padding: 30rpx 30rpx;

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

	.my-link {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 0rpx 30rpx;
		margin: 24rpx 0rpx;
		height: 76rpx;
		position: relative;
		border-radius: 20rpx;

		.my-link-content {
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			box-sizing: border-box;
			font-size: 24rpx;
		}

		.coby-btn {
			flex-shrink: 0;
			width: 35rpx;
			height: 35rpx;
			margin-left: 24rpx;
		}
	}

	.share-btn {
		width: 100%;
		height: 90rpx;
		border-radius: 45rpx;
		font-size: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		margin-top: 40rpx;
	}
}
</style>