<template>
	<!-- 充值返利弹出框 -->
	<view class="popup-view" v-if="props.upRebateVisible">
		<view class="up-rebate-view" :style="{ 'background-image': themeStore.imageCssUrl.cot }">
			<theme-image src="@/static/home/close.png" class="close-image" @click="closePopup(1)"></theme-image>
			<view class="up-rebate-text">
				{{ $t('promo.popup.upRebateText') }}
				<text class="rebate-text">{{ $t('promo.popup.upTo') }} 35%</text>
			</view>
			<view class="btn-bg event-detail-btn" :style="{ 'background-image': themeStore.imageCssUrl.flBtn }" @click="eventDetailClick">{{ $t('promo.button.eventDetails') }}</view>
		</view>
	</view>
</template>

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

const themeStore = useThemeStore()

const props = defineProps({
	upRebateVisible: Boolean
});
const emit = defineEmits(['close-popup']);
const closePopup = (type) => {
	emit('close-popup', type);
};
const eventDetailClick = () => {
	// 去充值返利页面
	uni.navigateTo({
		url: '/pages/promo/RebatePromo/RebatePromo'
	});
};
</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;
	}
}
.up-rebate-view {
	width: 665rpx;
	height: 599rpx;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-size: 100% 100%;
	box-sizing: border-box;
	padding: 256rpx 52rpx 0 67rpx;
	.up-rebate-text {
		width: 100%;
		font-weight: bold;
		font-size: 36rpx;
		color: #ffffff;
		line-height: 47rpx;
		font-style: italic;
		.rebate-text {
			font-weight: bold;
			font-size: 40rpx;
			color: #fffa4f;
			line-height: 47rpx;
			text-stroke: 3rpx #940d2f;
			font-style: italic;
			-webkit-text-stroke: 3rpx #940d2f;
		}
	}
	.close-image {
		position: absolute;
		right: -20rpx;
		top: 104rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.event-detail-btn {
		text-align: center;
		position: absolute;
		top: 543rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
</style>
