<template>
	<common-layout>
		<view class="signup-bonus-container">
			<view class="top-view pb30" :style="{ 'background-image': themeStore.imageCssUrl.signupBonusBg }">
				<TransparentHeader
					:title="promoStore.signup.title"
				/>
				<view class="pt30">
					<theme-image src="@/static/promo/signupbonus/img-text-1.png" style="width: 660rpx; height: 148rpx;" />
				</view>
				<view class="flex-acenter">
					<theme-image src="@/static/promo/signupbonus/img-text-currency-tag.png" style="width: 50rpx; height: 65rpx;" />
					<theme-image v-for="(item, index) in pageData.awardArr" :key="index" :src="numMap[item]" style="width: 50rpx; height: 65rpx;" />
					<theme-image src="@/static/promo/signupbonus/img-text-rewards.png" style="width: 250rpx; height: 59rpx;" />
				</view>
				<view class="cont-down-view" style="margin-top: 200rpx;">
					{{ $t('promo.signup.eventCountdown') }}: {{ pageData.countdownTimeFormat }}
				</view>
			</view>
			<view class="plr24 pb30">
				<view v-for="(item, index) in pageData.descList" class="task-view" @click.stop="handleDescClick(item)">
					<view class="task-no">
						{{ $t('promo.signup.task') }} {{ item.task }}
					</view>
					<view v-if="item.deschtml" v-html="item.deschtml" class="task-info" :class="{ 'highlight': pageData.finishStatus.includes(item.task) }"></view>
					<view v-else class="task-info" :class="{ 'highlight': pageData.finishStatus.includes(item.task) }">
						{{ item.desc }}
					</view>
					<theme-image v-if="pageData.finishStatus.includes(item.task)" class="task-check" src="@/static/promo/signupbonus/icon-check-red.png" mode="aspectFit"></theme-image>
					<theme-image v-else class="task-arrow" src="@/static/promo/signupbonus/icon-arrow-right.png" mode="aspectFit"></theme-image>
				</view>
			</view>
			<view class="plr24 mt16">
				<view class="confirm-btn flex-acenter flex-scenter" @click.stop="handleConfirmClick">
					<view>
						{{ $t('promo.signup.cliam') }} {{ appStore.currencySign }} {{ promoStore.signup.content.award || '' }}
					</view>
				</view>
				<view class="total-rollover mt24">
					{{ $t('promo.signup.totalRollover') }}: {{ promoStore.signup.content.award * promoStore.signup.content.bet_multi }}
				</view>
			</view>
			<view class="rule-view mt24">
				<view class="rule-header" :style="{ 'background-image': themeStore.imageCssUrl.signupBonusTextHeader }">
					{{ $t('promo.signup.ruleTitle') }}
				</view>
				<view class="rule-view-content">
					<view>
						{{ $t('promo.signup.rule1') }}
					</view>
					<view>
						{{ $t('promo.signup.rule2') }}
					</view>
					<view>
						{{ $t('promo.signup.rule3') }}
					</view>
					<view class="title ptb24">
						{{ $t('promo.signup.termTitle') }}
					</view>
					<view>
						{{ $t('promo.signup.term1') }}
					</view>
					<view>
						{{ $t('promo.signup.term2') }}
					</view>
					<view>
						{{ $t('promo.signup.term3') }}
					</view>
					<view>
						{{ $t('promo.signup.term4') }}
					</view>
				</view>
			</view>
		</view>
	</common-layout>
</template>

<script setup>
	import globalConfig from '@/config/global.config.js'
	import { useAppStore } from '@/store/useAppStore'
	import TransparentHeader from '@/components/header/TransparentHeader.vue'
	import { onMounted, reactive, onUnmounted } from 'vue'
	import Toast from '@/module/toast/toast.js'
	import { usePromoStore } from '@/store/usePromoStore'
	import { useThemeStore } from '@/store/useThemeStore'
	import { requestRegisterActivityData, requestRegisterActivityReward } from '@/api/promo.js'
	import { requestGetGameUrlByGame } from '@/api/game.js'
	import { countdownFormatter } from '@/module/formatter/date-formatter.js'
	import { useI18n } from 'vue-i18n'
	import { onShow } from '@dcloudio/uni-app'
	
	const numMap = {
		'0': globalConfig.appImagePrefix() + '/promo/signupbonus/0.png',
		'1': globalConfig.appImagePrefix() + '/promo/signupbonus/1.png',
		'2': globalConfig.appImagePrefix() + '/promo/signupbonus/2.png',
		'3': globalConfig.appImagePrefix() + '/promo/signupbonus/3.png',
		'4': globalConfig.appImagePrefix() + '/promo/signupbonus/4.png',
		'5': globalConfig.appImagePrefix() + '/promo/signupbonus/5.png',
		'6': globalConfig.appImagePrefix() + '/promo/signupbonus/6.png',
		'7': globalConfig.appImagePrefix() + '/promo/signupbonus/7.png',
		'8': globalConfig.appImagePrefix() + '/promo/signupbonus/8.png',
		'9': globalConfig.appImagePrefix() + '/promo/signupbonus/9.png'
	}
	
	const { t } = useI18n()
	const appStore = useAppStore()
	const promoStore = usePromoStore()
	const themeStore = useThemeStore()
	
	const pageData = reactive({
		descList: [],
		finishStatus: [],
		registerTime: 0,
		timer: null,
		countdownTime: 0,
		countdownTimeFormat: '00:00:00',
		awardArr: []
	})
	
	onMounted(() => {
		loadData()
	})
	
	onShow(() => {
		loadData2()
	})
	
	onUnmounted(() => {
		clearCountdown()
	})
	
	const loadData = async () => {
		await promoStore.getPromoList()
		const descList = []
		if (promoStore.signup.descList) {
			promoStore.signup.descList.forEach(el => {
				const keys = Object.keys(el)
				if (keys.length) {
					const task = keys[0]
					const desc = el[keys[0]].desc
					let deschtml = ''
					if (task === '3') {
						const num = el[keys[0]].amount
						deschtml = desc.replace('%d', `<span style="color: #FF0033">${num}</span>`)
					}
					descList.push({
						task: task,
						desc: desc,
						deschtml: deschtml
					})
				}
			})
		}
		pageData.descList = descList
		
		const awardArr = []
		let str = promoStore.signup.content.award + ''
		for (let i = 0; i < str.length; i++) {
			awardArr.push(str[i])
		}
		pageData.awardArr = awardArr
	}
	
	const loadData2 = async () => {
		const { code, data } = await requestRegisterActivityData()
		if (code !== 200) { return }
		pageData.registerTime = data.registerTime
		pageData.finishStatus = JSON.parse(data.finishStatus || '')
		const currentTime = (new Date()).getTime()
		const vilidTime = 24 * 60 * 60 * 1000
		const endTime = data.registerTime + vilidTime
		
		const countdownTime = endTime - currentTime
		pageData.countdownTime = countdownTime
		pageData.countdownTimeFormat = countdownFormatter(pageData.countdownTime)
		setTimeout(() => {
			startCountdown()
		})
	}
	
	const startCountdown = () => {
		clearCountdown()
		if (pageData.countdownTime <= 0) {
			return
		}
		pageData.timer = setInterval(() => {
			pageData.countdownTime = pageData.countdownTime - 1000
			pageData.countdownTimeFormat = countdownFormatter(pageData.countdownTime)
			if (pageData.countdownTime <= 0) {
				clearCountdown()
				return
			}
		}, 1000)
	}
	
	const clearCountdown = () => {
		if (!pageData.timer) { return }
		clearInterval(pageData.timer)
		pageData.timer = null
	}
 	
	const handleDescClick = async (item) => {	
		if (pageData.finishStatus.includes(item.task)) {
			return
		}
		if (item.task === '1') {
			uni.navigateTo({
				url: '/pages/account/PhoneBinding/PhoneBinding'
			})
		}
		if (item.task === '2') {
			uni.navigateTo({
				url: '/pages/wallet/Deposit'
			})
		}
		if (item.task === '3') {
			Toast.showLoading('Loading')
			const gameId = promoStore.signup.content.game_id
			const { code, data } = await requestGetGameUrlByGame({
				gameId: gameId
			})
			Toast.hideLoading()
			if (code !== 200 && !data) { return }
			uni.setStorageSync('GAME_URL_KEY', data)
			// #ifdef H5
			uni.navigateTo({
				url: `/pages/webview/GameWeb?gameId=${gameId}&url=${encodeURIComponent(data)}`
			})
			// #endif
		}
		if (item.task === '4') {
			uni.navigateTo({
				url: '/pages/wallet/Withdraw'
			})
		}
	}
	
	const handleConfirmClick = async () => {
		let isFinish = true
		pageData.descList.forEach(el => {
			if (!pageData.finishStatus.includes(el.task)) {
				isFinish = false
			}
		})
		if (!isFinish) {
			Toast.show(t('promo.signup.toast1'))
			return
		}
		Toast.showLoading('Loading')
		const { code, data } = await requestRegisterActivityReward()
		Toast.hideLoading()
		if (code !== 200) { return }
		Toast.showSuccess('Reward received successfully')
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	}
</script>

<style lang="scss" scoped>
	.signup-bonus-container {
		background-color: #310A1A;
		
		.top-view {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.cont-down-view {
				background: linear-gradient(90deg, #A91C3B, #F03158, #A91C3B);
				width: 500rpx;
				height: 66rpx;
				border-radius: 33rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #ffffff;
				line-height: 66rpx;
				text-align: center;
			}
		}
		
		.task-view {
			margin-top: 16rpx;
			height: 130rpx;
			background: linear-gradient(-26deg, #F5E9D5, #F5EAD8, #FFDCB5);
			border-radius: 20rpx;
			border: 3rpx solid #FBD6AC;
			display: flex;
			align-items: center;
			overflow: hidden;
			padding-right: 25rpx;
			
			.task-no {
				flex-shrink: 0;
				width: 150rpx;
				height: 130rpx;
				background: linear-gradient(-26deg, #FF4A6E, #F03158, #A91C3B);
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				color: #ffffff;
				font-weight: bold;
				font-size: 36rpx;
				line-height: 130rpx;
				text-align: center;
			}
			
			.task-info {
				flex: 1;
				font-size: 32rpx;
				line-height: 1.5;
				padding: 0rpx 20rpx;
				text-align: center;
				color: #2E2E2E;
				font-weight: bold;
			}
			
			.task-info.highlight {
				color: #FF0033;
			}
			
			.task-arrow {
				width: 36rpx;
				height: 36rpx;
				flex-shrink: 0;
			}
			
			.task-check {
				width: 50rpx;
				height: 50rpx;
				flex-shrink: 0;
			}
		}
		
		.task-view:first-child {
			margin-top: 0rpx;
		}
		
		.confirm-btn {
			background: linear-gradient(180deg, #F0BD26, #FCF945);
			border-radius: 20rpx;
			height: 110rpx;
			border: 4rpx solid #551139;
			font-size: 36rpx;
			font-weight: bold;
			color: #430C05;
		}
		
		.total-rollover {
			font-size: 30rpx;
			color: #ffffff;
			text-align: center;
		}
		
		.rule-view {
			padding: 30rpx 24rpx;
			position: relative;
			
			.rule-header {
				position: absolute;
				top: 0rpx;
				left: 150rpx;
				right: 150rpx;
				height: 70rpx;
				z-index: 1;
				font-size: 40rpx;
				color: #2E0F01;
				text-align: center;
				line-height: 70rpx;
				font-weight: bold;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			
			.rule-view-content {
				padding: 40rpx 25rpx;
				padding-top: 60rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				color: #2E0F01;
				font-size: 30rpx;
				line-height: 1.5;
				
				.title {
					color: #FF0033;
					font-size: 40rpx;
				}
			}
		}
	}
</style>
