<template>
	<!-- 签到弹出框 -->
	<view v-if="props.signinVisible" class="popup-view">
		<view class="signin-view">
			<theme-image src="@/static/home/signin-title.png" class="signin-title-image"></theme-image>
			<theme-image src="@/static/promo/close.png" @click="closePopup(2)" class="close-image"></theme-image>
			<view class="signin-view-content" :style="{ 'background-image': themeStore.imageCssUrl.signinBg }">
				<view class="signin-view-content-text">
					{{ $t('promo.popup.signinText') }}
					<text class="text-color">{{ appStore.currencySign }}9999</text>
				</view>
				<view class="signin-view-content-text">
					{{ $t('promo.popup.signinText') }}
					<text class="text-color">{{ appStore.currencySign }}9999</text>
				</view>
				<view class="btn-bg event-detail-btn" :style="{ 'background-image': themeStore.imageCssUrl.flBtn }" @click="signinEventDetailClick">{{ $t('promo.button.eventDetails') }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'

	const themeStore = useThemeStore()
const appStore = useAppStore()
const props = defineProps({
	signinVisible: Boolean
});
const emit = defineEmits(['close-popup']);
const closePopup = (type) => {
	emit('close-popup', type);
};
const signinEventDetailClick = () => {
	// 去签到页面
	uni.navigateTo({
		url: '/pages/promo/Signin/Signin'
	});
};
</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;
	.btn-bg {
		width: 399rpx;
		height: 106rpx;
		background-size: 100% 100%;
		font-size: 36rpx;
		color: #811009;
		line-height: 71rpx;
		text-align: center;
	}
}

.signin-view {
	height: 800rpx;
	width: 700rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	.signin-title-image {
		width: 546rpx;
		height: 262rpx;
		position: absolute;
		top: 0;
		z-index: 10;
		left: 50%;
		transform: translateX(-50%);
	}
	.close-image {
		position: absolute;
		top: 104rpx;
		right: 25rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.signin-view-content {
		position: absolute;
		top: 207rpx;
		z-index: 9;
		left: 50%;
		transform: translateX(-50%);
		width: 630rpx;
		height: 515rpx;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 103rpx 57rpx 0 64rpx;
		.signin-view-content-text {
			width: 100%;
			font-size: 32rpx;
			color: #ffffff;
			font-weight: bold;
			text-stroke: 3rpx #940d2f;
			.text-color {
				color: #fff851;
				font-weight: bold;
				text-stroke: 3rpx #940d2f;
				-webkit-text-stroke: 3rpx #940d2f;
			}
		}
		.event-detail-btn {
			margin: 0 auto;
			margin-top: 75rpx;
		}
	}
}
</style>
