<template>
	<common-layout>
		<view class="jili-container">
			<view class="top-view pb30" :style="{ 'background-image': themeStore.imageCssUrl.promoJiliBg }">
				<TransparentHeader
					:title="promoStore.jili.title"
				/>
				<img class="logo mt32" :src="themeStore.imageUrl.promoJiliLogo" />
				<img class="text" :src="themeStore.imageUrl.promoJiliZi" />
				<view class="plr30 ptb30 mt16" style="width: 100%;">
					<view class="require-view">
						<view class="title">
							{{ $t('promo.jili.userRequirements') }}
						</view>
						<view class="mt32">
							{{ $t('promo.jili.require1') }} <text class="text-value">{{ promoStore.jili.content.register_desc }}</text>
						</view>
						<view>
							{{ $t('promo.jili.require2') }} <text class="text-value">{{ promoStore.jili.content.min_recharge_amount }}</text>
						</view>
						<view>
							{{ $t('promo.jili.require3') }} <text class="text-value">{{ $t('promo.jili.require4') }}</text>
						</view>
					</view>
				</view>
				<view v-if="promoStore.jili.giftCode" class="flex-acenter mt16 plr30 w-100p">
					<view class="copy-text">
						{{ promoStore.jili.giftCode || '' }}
					</view>
					<view class="copy-btn" @click.stop="handleCopyClick">
						{{ $t('promo.jili.copy') }}
					</view>
				</view>
				<view v-else class="mt16">
					<view class="confirm-btn" @click.stop="handleConfirmClick">
						{{ $t('promo.jili.getGiftCode') }}
					</view>
				</view>
				<view class="game-view-title">
					{{ $t('promo.jili.suportedGamesTitle') }}
				</view>
				<view class="game-view">
					<view v-for="(item, index) in promoStore.jili.gameList" :key="index" class="game-item" @click.stop="handleGameClick(item)">
						<img class="game-img" :src="item.url" />
						<view class="game-name">
							{{ item.name || '' }}
						</view>
					</view>
				</view>
			</view>
			<view class="rule-view plr30 mt24">
				<view class="rule-header" :style="{ 'background-image': themeStore.imageCssUrl.promoJiliTitleBg }">
					{{ $t('promo.jili.ruleTitle') }}
				</view>
				<view class="rule-card">
					<view class="rule-card-2">
						<view>
							{{ $t('promo.jili.rule1') }}
						</view>
						<view class="image-des">
							{{ $t('promo.jili.rule2') }}
						</view>
						<img :src="themeStore.imageUrl.promoJili1" style="width: 100%;" />
						<view class="image-des">
							{{ $t('promo.jili.rule3') }}
						</view>
						<img :src="themeStore.imageUrl.promoJili2" style="width: 100%;" />
						<view class="image-des">
							{{ $t('promo.jili.rule4') }}
						</view>
						<img :src="themeStore.imageUrl.promoJili3" style="width: 100%;" />
					</view>
				</view>
			</view>
			<view class="rule-view plr30 mt24">
				<view class="rule-header" :style="{ 'background-image': themeStore.imageCssUrl.promoJiliTitleBg }">
					{{ $t('promo.jili.ruleTitle') }}
				</view>
				<view class="rule-card">
					<view class="rule-card-2">
						<view>
							{{ $t('promo.jili.term1') }}
						</view>
						<view>
							{{ $t('promo.jili.term2') }}
						</view>
						<view>
							{{ $t('promo.jili.term3') }}
						</view>
						<view>
							{{ $t('promo.jili.term4') }}
						</view>
					</view>
				</view>
			</view>
		</view>
	</common-layout>
</template>

<script setup>
	import TransparentHeader from '@/components/header/TransparentHeader.vue'
	import { requestGetGameUrlByGame } from '@/api/game.js'
	import { onMounted, reactive } from 'vue'
	import Toast from '@/module/toast/toast.js'
	import { usePromoStore } from '@/store/usePromoStore'
	import { useI18n } from 'vue-i18n'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const { t } = useI18n()
	const promoStore = usePromoStore()
	const themeStore = useThemeStore()
	
	onMounted(() => {
		loadData()
	})
	
	const loadData = async () => {
		await promoStore.getPromoList()
	}
	
	const handleConfirmClick = async () => {
		Toast.showLoading('Loading')
		await promoStore.getGiftCode()
		Toast.hideLoading()
	}
	
	const handleCopyClick = () => {
		uni.setClipboardData({
			data: promoStore.jili.giftCode,
			success() {
				Toast.showSuccess()
			}
		})
	}
	
	const handleGameClick = async (item) => {
		Toast.showLoading('Loading')
		const gameId = item.gameid
		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
	}
</script>

<style lang="scss" scoped>
	.jili-container {
		background-color: #131C2E;
		padding-bottom: 30rpx;
		
		.top-view {
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.logo {
				width: 170rpx;
				height: 70rpx;
			}
			
			.text {
				width: 689rpx;
				height: 216rpx;
			}
			
			.title {
				text-align: center;
				font-size: 38rpx;
				font-weight: bold;
				color: #FDDC9B;
			}
			
			.require-view {
				border-radius: 48rpx;
				border: 2rpx solid #FDDC9B;
				background-color: #304578;
				padding: 30rpx;
				color: #FCA868;
				font-size: 32rpx;
				
				.text-value {
					color: #FDDC9B;
				}
			}
			
			.copy-text {
				height: 90rpx;
				background: #0A132A;
				border-radius: 45rpx;
				border: 1px solid #FEDB9B;
				font-weight: bold;
				font-size: 50rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
				flex: 1;
				margin-right: 30rpx;
			}
			
			.copy-btn {
				height: 90rpx;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #111A32;
				background: linear-gradient(2deg, #E7914A, #FEE6AE);
				border-radius: 45rpx;
			}
			
			.confirm-btn {
				height: 90rpx;
				width: 690rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #111A32;
				background: linear-gradient(2deg, #E7914A, #FEE6AE);
				border-radius: 45rpx;
			}
			
			.game-view-title {
				width: 100%;
				font-weight: bold;
				font-size: 32rpx;
				color: #FDDC9B;
				padding: 30rpx 30rpx;
				align-self: flex-start;
			}
			
			.game-view {
				display: flex;
				flex-wrap: wrap;
				width: 100%;
				padding: 0rpx 15rpx;
				
				.game-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 15rpx;
					
					.game-img {
						width: 150rpx;
						height: 150rpx;
						object-fit: cover;
						overflow: hidden;
						border-radius: 20rpx;
						
					}
					
					.game-name {
						width: 150rpx;
						margin-top: 16rpx;
						font-size: 20rpx;
						color: #ffffff;
						text-align: center;
						@include text-over(1);
					}
				}
			}
		}

		.rule-view {
			padding: 20rpx 30rpx;
			position: relative;
			color: #FED596;
			font-size: 32rpx;
			line-height: 1.5;
			
			.rule-card {
				background: #304578;
				border-radius: 48rpx;
				padding: 20rpx;
			}
			
			.rule-card-2 {
				border-radius: 48rpx;
				border: 1px solid #CBAE9D;
				padding: 30rpx;
				padding-top: 60rpx;
			}
			
			.rule-header {
				position: absolute;
				top: 0rpx;
				left: 104rpx;
				right: 104rpx;
				height: 80rpx;
				z-index: 1;
				font-size: 36rpx;
				color: #15213D;
				text-align: center;
				line-height: 80rpx;
				font-weight: bold;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			
			.image-des {
				color: #EA9F69;
				padding: 30rpx 0rpx;
			}
		}
	}
</style>