<template>
	<view class="container" :style="{color: themeStore.theme.text.normal}">
		<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.item3Des') }}
					</view>
					<view class="question-icon-view">
						<theme-image @click="() => { rewardTotalTipRef.show() }" src="@/static/icon-question.png" class="question-icon"/>
					</view>
				</view>
				<view class="ft18 mt14" :style="{ color: themeStore.theme.text.highlight }">
					{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.rewardTotal, 2) }}
				</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="ft18 mt14 flex-acenter" :style="{ color: themeStore.theme.text.highlight }">
					<view>
						{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.rewardToday, 2) }}
					</view>
				</view>
			</view>
			<view class="item-view flex-acenter flex-column">
				<view class="ft14">
					{{ $t('earn.home.item5Des') }}
				</view>
				<view class="ft18 mt14" :style="{ color: themeStore.theme.text.highlight }">
					{{ appStore.currencySign }} {{ $formatThousandDot(pageData.agentInfo.commissionsAvailable, 2) }}
				</view>
			</view>
			<view class="item-view flex-acenter flex-scenter">
				<view style="padding-top: 52rpx;">
					<view class="claimable-btn" :style="{ background: themeStore.theme.button.other }" @click.stop="handleClaimClick(item)">
						{{ $t('earn.home.claim') }}
					</view>
				</view>
			</view>
		</view>
		<view class="list-container ptb30">
			<view class="list-item" :style="{ 'background': themeStore.theme.list.headerBgColor }">
				<view class="list-value">
					{{ $t('earn.home.date') }}
				</view>
				<view class="list-value">
					{{ $t('earn.home.reward') }}
				</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.rewardDay }}
					</view>
					<view class="list-value">
						{{ $formatThousandDot(item.rewardAmount, 2) }}
					</view>
				</view>
			</view>
		</view>
		<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 { useAppStore } from '@/store/useAppStore'
	import { useUserStore } from '@/store/useUserStore'
	import { useThemeStore } from '@/store/useThemeStore.js'
	import { reactive, onMounted, ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	import Toast from '@/module/toast/toast.js'
	import NoDataSearch from "@/components/nodata/NoDataSearch.vue";
	import { getAgentV2MyRewardBaseInfo, agentV2ClaimAward, getAgentV2MyRewardList } from '@/api/earn.js'
	import TipsPopup from '@/components/popup/TipsPopup.vue'
	
	const { t } = useI18n()
	const appStore = useAppStore()
	const userStore = useUserStore()
	const themeStore = useThemeStore()

	const rewardTotalTipRef = ref(null)
	const rewardTodayTipRef = ref(null)
	
	const pageData = reactive({
		agentInfo: {},
		list: []
	})
	
	onMounted(() => {
		getAgentBaseInfo()
		getList()
	})

	const getAgentBaseInfo = async () => {
		const { code, data } = await getAgentV2MyRewardBaseInfo()
		if (code == 200) {
			pageData.agentInfo = data || {}
		}
	}

	const getList = async () => {
		const { code, data } = await getAgentV2MyRewardList({
			page: 1,
			pageSize: 50
		})
		if (code == 200) {
			pageData.list = data || []
		}
	}
	
	const handleClaimClick = async (item) => {
		Toast.showLoading('Loading')
		const { code, data } = await agentV2ClaimAward()
		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')
		getAgentBaseInfo()
	}
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		padding: 0 30rpx 45rpx 30rpx;

		.claimable-btn {
			padding: 0rpx 20rpx;
			height: 50rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			width: 148rpx;
		}
	}
	
	.item-card {
		border-radius: 20rpx;
		padding: 0rpx 16rpx;
		padding-top: 45rpx;

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

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