<template>
	<!-- 首充弹出框 -->
	<view class="popup-view" v-if="props.firstDepositVisible">
		<view class="first-deposit-popup" :style="{ 'background-image': themeStore.imageCssUrl.homeFirstRechargeBg }">
			<theme-image src="@/static/promo/close.png" @click="closePopup(0)" class="close-btn"></theme-image>
			<view class="first-deposit-popup-content">
				<view class="first-deposit-popup-content-item item-theader-bg">
					<text class="item-column1">{{ $t('promo.public.depoistAmoout') }}</text>
					<text class="item-column2">{{ $t('promo.public.rewardAmoout') }}</text>
				</view>
				<view class="first-deposit-popup-content-tbody">
					<view class="first-deposit-popup-content-item item-tbody-bg" v-for="(item, index) in promoStore.firstdepositList">
						<text class="item-column1">≥{{ item.amount }}</text>
						<text class="item-column2">{{ item.reward }}</text>
					</view>
				</view>
				<view class="despite-btn-view">
					<view class="despite-btn" :style="{ 'background-image': themeStore.imageCssUrl.flBtn }" @click="despiteNowClick">{{ $t('promo.button.despiteNow') }}</view>
					<view class="details-btn" :style="{ 'background-image': themeStore.imageCssUrl.flBtn }" @click="firstDespiteDelClick">{{ $t('promo.button.details') }}</view>
				</view>
				<view class="login-form-check">
					<view @click="checkClick" class="check-block"></view>
					<text class="check-text">{{ $t('promo.public.checkText') }}</text>
					<theme-image @click="checkClick" v-show="isCheck" src="@/static/account/Check.png" class="check-image-size"></theme-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { usePromoStore } from '@/store/usePromoStore'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	const promoStore = usePromoStore()
	
	import { ref } from 'vue';
	let isCheck = ref(true);
	const props = defineProps({
		firstDepositVisible: Boolean
	});
	const emit = defineEmits(['close-popup']);
	const closePopup = (type) => {
		emit('close-popup', type, isCheck.value);
	};
	/**
	 * 选中默认选项
	 */
	const checkClick = () => {
		isCheck.value = !isCheck.value;
	};
	const despiteNowClick = () => {
		//去充值
		uni.navigateTo({
			url: '/pages/wallet/Deposit'
		});
	};
	const firstDespiteDelClick = () => {
		//去首充详情页面
		uni.navigateTo({
			url: '/pages/promo/FirstDeposit/FirstDeposit'
		});
	};
</script>

<style lang="scss" scoped>
.popup-view {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
}
.first-deposit-popup {
	width: 700rpx;
	height: 1120rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -60%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	.first-deposit-popup-content {
		position: absolute;
		top: 430rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0 68rpx;
		.first-deposit-popup-content-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			height: 62rpx;
			border-radius: 20rpx;
			margin-bottom: 10rpx;
			.item-column1 {
				width: 50%;
				text-align: center;
				line-height: 62rpx;
				color: #ffffff;
				font-size: 28rpx;
			}
			.item-column2 {
				width: 50%;
				text-align: center;
				line-height: 62rpx;
				color: #f8eb59;
				font-size: 28rpx;
			}
		}
		.first-deposit-popup-content-tbody {
			width: 100%;
			height: 440rpx;
			overflow-y: auto;
		}

		.despite-btn-view {
			width: 100%;
			display: flex;
			justify-content: center;
			box-sizing: border-box;
			// padding-left: 118rpx;
			position: relative;
			margin-top: 15rpx;
			.despite-btn {
				width: 399rpx;
				height: 106rpx;
				background-size: 100% 100%;
				font-size: 36rpx;
				color: #811009;
				line-height: 71rpx;
				text-align: center;
			}
			.details-btn {
				position: absolute;
				right: 0;
				font-size: 28rpx;
				color: #ffde49;
				line-height: 47rpx;
				text-decoration-line: underline;
				margin-top: 35rpx;
			}
		}

		.login-form-check {
			width: 100%;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			.check-block {
				width: 32rpx;
				height: 34rpx;
				background: #3a0614;
				border-radius: 10rpx;
				border: 1px solid #d22726;
			}
			.check-text {
				margin-left: 15rpx;
				font-size: 24rpx;
				color: #fff;
			}
			.check-image-size {
				width: 37rpx;
				height: 36rpx;
				display: block;
				position: absolute;
				left: 135rpx;
				top: -8rpx;
			}
		}
		.item-theader-bg {
			background: #8d120e;
		}
		.item-tbody-bg {
			background: rgba(141, 18, 14, 0.6);
		}
	}
	.close-btn {
		position: absolute;
		right: 31rpx;
		top: 74rpx;
		width: 60rpx;
		height: 60rpx;
	}
	/* 自定义滚动条轨道样式 */
	::-webkit-scrollbar-track {
		border-radius: 6rpx;
		background-color: #6a1009;
	}

	/* 自定义滚动条的样式 */
	::-webkit-scrollbar {
		width: 12rpx;
		height: 88rpx;
		background-color: #6a1009;
	}
	::-webkit-scrollbar-thumb {
		width: 12rpx;
		background-color: #fd7e7a;
		border-radius: 6rpx;
	}
}
</style>
