<template>
	<!--  排行榜弹出框 -->
	<view v-if="props.rankVisible" class="popup-view">
		<view class="rank-view" :style="{
			width: themeStore.theme.promo.popUp.rankView.width,
			paddingTop: themeStore.theme.promo.popUp.rankView.paddingTop,
			transform: themeStore.theme.promo.popUp.rankView.transform,
			height: themeStore.theme.promo.popUp.rankView.height,
			top: themeStore.theme.promo.popUp.rankView.top,
			'background-image': themeStore.imageCssUrl.rankBg
		}">
			<theme-image src="@/static/promo/close.png"
				:style="{ top: themeStore.theme.promo.popUp.rankView.closeTop, right: themeStore.theme.promo.popUp.rankView.closeRight }"
				class="close-image" @click="closePopup(3)"></theme-image>
			<view class="rank-view-tip-text"
				:style="{ color: themeStore.theme.promo.popUp.textColor, marginBottom: themeStore.theme.promo.popUp.rankView.marginBottom }">
				{{ $t('promo.popup.rankText') }}
				<text :style="{ color: themeStore.theme.promo.popUp.highlightTextColor }">{{ $t('promo.popup.rankFree')
					}}</text>
				{{ $t('promo.popup.rankReward') }} {{ $t('promo.popup.upTo') }}
				<text :style="{ color: themeStore.theme.promo.popUp.highlightTextColor }">477,777</text>
			</view>
			<view v-if="themeStore.theme.promo.popUp.rankView.isShowEventAward" class="rewards-title flex-center"
				:style="{ 'background': `top / cover no-repeat ${themeStore.theme.promo.rank.betRewardHeadBg}` }">
				{{ $t('promo.pop.eventAward') }}
			</view>
			<!-- <theme-image v-if="themeStore.theme.promo.popUp.rankView.isShowEventAward" src="@/static/rank/EventAward.png" class="EventAward-image"></theme-image> -->
			<view class="rank-view-table" :style="{ padding: themeStore.theme.promo.popUp.rankView.padding }">
				<view class="rank-view-item rank-view-theader"
					:style="{ color: themeStore.theme.promo.popUp.textColor, backgroundColor: themeStore.theme.promo.popUp.rankView.headerBgColor }">
					<view class="rank-view-item-column1" :style="{ color: themeStore.theme.promo.popUp.rankColor }">{{
						$t('promo.public.rank') }}</view>
					<view class="rank-view-item-column2">{{ $t('promo.leaderboard.dailyList') }}</view>
					<view class="rank-view-item-column2">{{ $t('promo.leaderboard.weeklyList') }}</view>
					<view class="rank-view-item-column2">{{ $t('promo.leaderboard.monthlyList') }}</view>
				</view>
				<view class="rank-view-item rank-view-tbody"
					:style="{ color: themeStore.theme.promo.popUp.textColor, backgroundColor: themeStore.theme.promo.popUp.rankView.itemBgColor }"
					v-for="(item, index) in promoStore.betrankList">
					<view class="rank-view-item-column1" :style="{ color: themeStore.theme.promo.popUp.rankColor }">{{
						item.rank }}</view>
					<view class="rank-view-item-column2">{{ item.day }}</view>
					<view class="rank-view-item-column2">{{ item.week }}</view>
					<view class="rank-view-item-column2">{{ item.month }}</view>
				</view>
			</view>
			<view class="btn-bg event-detail-btn"
				:style="{ color: themeStore.theme.promo.popUp.btnColor, 'background-image': themeStore.imageCssUrl.flBtn }"
				@click="rankEventDetailClick">{{ $t('promo.button.eventDetails') }}</view>
		</view>
	</view>
</template>

<script setup>
import { useThemeStore } from '@/store/useThemeStore';
import { usePromoStore } from '@/store/usePromoStore';
import { computed } from 'vue';

const themeStore = useThemeStore()
const promoStore = usePromoStore()
const props = defineProps({
	rankVisible: Boolean
});

const emit = defineEmits(['close-popup']);

const closePopup = (type) => {
	emit('close-popup', type);
};
const rankEventDetailClick = () => {
	const promo = promoStore.promoList.find((item) => item.jumpUrl === 'module:betrank')
	uni.navigateTo({
		url: '/pages/promo/Ranking/Ranking',
		success: function (res) {
			res.eventChannel.emit(
				"getContentInfo",
				JSON.stringify(promo.content)
			);
		},
	});
};
</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;
	}
}

.rank-view {
	position: absolute;
	left: 50%;
	background-size: 100% 100%;
	box-sizing: border-box;

	.rank-view-tip-text {
		width: 100%;
		box-sizing: border-box;
		padding: 0 48rpx;
		font-weight: 500;
		font-size: 30rpx;
		// color: #ffffff;
		line-height: 60rpx;
		font-style: italic;
		// margin-bottom: 37rpx;
	}

	.rewards-title {
		width: 235rpx;
		height: 58rpx;
		font-family: Roboto;
		font-weight: 500;
		font-size: 24rpx;
		margin: 0 auto;
	}

	.EventAward-image {
		display: block;
		margin: 0 auto;
		width: 376rpx;
		height: 64rpx;
	}

	.rank-view-table {
		width: 100%;
		box-sizing: border-box;
		// padding: 0 25rpx;
		margin-top: 24rpx;

		.rank-view-item {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			height: 62rpx;

			border-radius: 20rpx;
			font-size: 24rpx;
			// color: #ffffff;
			line-height: 47rpx;
			text-align: center;
			margin-bottom: 10rpx;

			.rank-view-item-column1 {
				width: 20%;
				line-height: 62rpx;
			}

			.rank-view-item-column2 {
				width: 26%;
			}
		}

		.rank-view-theader {
			// background: #8d120e;
		}

		.rank-view-tbody {
			// background: rgba(141, 18, 14, 0.6);
		}
	}

	.event-detail-btn {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: -100rpx;
	}

	.close-image {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		// right: -20rpx;
		// top: 52rpx;
	}
}
</style>
