<template>
	<!-- 充值返利弹出框 -->
	<view v-if="props.communityVisible" class="popup-view">
		<view class="community-body" :style="{ 'background-image': themeStore.imageCssUrl.communityBg }">
			<view class="community-body-title">
				{{ appStore.currencySign }}
				<text>{{ promoStore.community.rewordBonus }}</text>
			</view>
			<view class="community-body-subtitle">{{ $t('promo.popup.communityTitle') }}</view>
			<view class="community-body-text">
				{{ $t('promo.popup.communityText') }}
				<text>{{ $t('promo.popup.rankFree') }}</text>
			</view>
			<view class="community-body-btn" :style="{ 'background-image': themeStore.imageCssUrl.jAn }">
				<theme-image src="@/static/promo/tg.png" style="width: 50rpx; height: 50rpx"></theme-image>
				<text style="font-size: 34rpx; color: #5f1f08; margin-left: 38rpx">{{ $t('promo.button.joinNow') }}</text>
			</view>
			<view class="community-body-tips">
				<theme-image src="@/static/home/g2.png" style="width: 43rpx; height: 44rpx"></theme-image>
				<theme-image src="@/static/home/Checkmark.png" class="check-image"></theme-image>
				<text style="font-size: 18rpx; color: #fff; margin-left: 14rpx; line-height: 44rpx">{{ $t('promo.popup.communityTip') }}</text>
			</view>
			<theme-image src="@/static/home/close.png" class="close-image" @click="closePopup(4)"></theme-image>
		</view>
	</view>
</template>

<script setup>
	import { usePromoStore } from '@/store/usePromoStore'
	import { useAppStore } from '@/store/useAppStore'
	import { useThemeStore } from '@/store/useThemeStore'
	
	const themeStore = useThemeStore()
	const appStore = useAppStore()
	const promoStore = usePromoStore()
	
	const props = defineProps({
		communityVisible: Boolean
	});
	const emit = defineEmits(['close-popup']);
	const closePopup = (type) => {
		emit('close-popup', type);
	};
</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;
}
.community-body {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 647rpx;
	height: 923rpx;
	background-size: 100% 100%;
	box-sizing: border-box;
	padding-top: 213rpx;
	.community-body-title {
		text-align: center;
		font-weight: normal;
		font-size: 35rpx;
		color: #ff0000;
		line-height: 18rpx;
		text {
			font-size: 86rpx;
		}
	}
	.community-body-subtitle {
		margin-top: 26rpx;
		text-align: center;
		font-weight: normal;
		font-size: 26rpx;
		color: #816137;
	}
	.community-body-text {
		font-weight: 500;
		font-size: 26rpx;
		color: #000000;
		width: 100%;
		margin-top: 26rpx;
		box-sizing: border-box;
		padding: 0 126rpx;
		text {
			color: #ff0000;
		}
	}
	.community-body-btn {
		margin: 0 auto;
		margin-top: 135rpx;
		width: 460rpx;
		height: 99rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: flex-start;
		box-sizing: border-box;
		padding-left: 98rpx;
		padding-top: 16rpx;
	}
	.community-body-tips {
		width: 100%;
		box-sizing: border-box;
		padding-left: 137rpx;
		position: relative;
		display: flex;
		justify-content: flex-start;
		.check-image {
			width: 37rpx;
			height: 36rpx;
			position: absolute;
			left: 140rpx;
		}
	}
	.close-image {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin: 0 auto;
	}
}
</style>
