<template>
	<view v-if="props.visible" class="popup-view" @click.stop="handleMaskClick" @touchmove.prevent="handleMaskMove">
		<view class="popup-content-view">
			<view class="content-view" :style="{ 'background-image': themeStore.imageCssUrl.promoJiliPopupBg }">
				<theme-image class="title-img" src="@/static/promo/jili/jili-promotion.png" mode="aspectFit"></theme-image>
				<view class="des">
					{{ $t('promo.jili.popdes1') }}
					<text style="color: #FF3000;">{{ $t('promo.jili.popdes2') }}</text>
					{{ $t('promo.jili.popdes3') }}
				</view>
				<view class="event-btn" @click.stop="handleDetailClick">
					{{ $t('promo.jili.popbtn') }}
				</view>
				<view class="flex-acenter mt32">
					<view class="check-box" @click.stop="handleNoShowTodayClick">
						<theme-image v-if="hasCheck" class="check-img" src="@/static/promo/jili/icon-check.png"></theme-image>
					</view>
					<view class="tip ml16">
						{{ $t('promo.jili.poptip') }}
					</view>
				</view>
			</view>
			<theme-image class="close-btn" src="@/static/promo/jili/delet.png" @click.stop="closePopup('giftCode')"></theme-image>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { usePromoStore } from '@/store/usePromoStore'
	import { useThemeStore } from '@/store/useThemeStore'
		
	const themeStore = useThemeStore()
	const promoStore = usePromoStore()
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['close-popup'])
	let hasCheck = ref(true)

	const closePopup = (type) => {
		if (hasCheck.value) {
			promoStore.setJiliNoShowToday()
		}
		emit('close-popup', type)
	}

	const handleDetailClick = () => {
		uni.navigateTo({
			url: '/pages/promo/Jili'
		})
	}

	const handleNoShowTodayClick = () => {
		hasCheck.value = !hasCheck.value
	}
	
	const handleMaskClick = () => {
		
	}
	
	const handleMaskMove = () => {
		
	}
</script>

<style lang="scss" scoped>
.popup-view {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-content-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.close-btn {
		margin-top: 46rpx;
		width: 80rpx;
		height: 80rpx;
	}
}

.content-view {
	width: 660rpx;
	height: 680rpx;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.event-btn {
		margin-top: 120rpx;
		height: 90rpx;
		width: 500rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #111A32;
		background: linear-gradient(2deg, #E7914A, #FEE6AE);
		border-radius: 45rpx;
	}
	
	.title-img {
		position: absolute;
		top: -40rpx;
		left: 0;
		right: 0;
		height: 162rpx;
		z-index: 1;
		left: 50%;
		transform: translate(-50%, 0%);
	}
	
	.des {
		margin-top: 260rpx;
		padding: 0rpx 120rpx;
		font-size: 36rpx;
		color: #543013;
	}
	
	.tip {
		font-size: 24rpx;
		color: #ffffff;
	}
	
	.check-box {
		width: 36rpx;
		height: 36rpx;
		border-radius: 12rpx;
		border: 3rpx solid #FEE6AE;
		position: relative;
	}
	
	.check-img {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 1;
	}
}
</style>
