<template>
	<mobile-sub-layout :title="$t('promo.rebatePromo.title')" :lineHeight="4">
		<template #header-right>
			<!-- <theme-image src="@/static/wallet/icon-withdraw-headerright.png" mode="aspectFit" style="width: 40rpx; height: 40rpx;" @click.stop="handleHistoryClick"/> -->
		</template>
		<view class="rebate-body">
			<view class="rebate-content-list">
				<view class="rebate-content-list-item" :style="{ 'background-image': themeStore.imageCssUrl.flBg }" v-for="(item, index) in 7">
					<theme-image :src="promoMap[index]" class="image-size"></theme-image>
					<view class="item-center-text">
						<view class="item-center-text-top">20% {{ $t('promo.rebatePromo.bonus') }}</view>
						<view class="item-center-text-bottom" v-if="index != 0">{{ $t('promo.rebatePromo.ninmiumDeposit') }}:3000</view>
						<view class="item-center-text-btn" :style="{ 'background-image': themeStore.imageCssUrl.flBtn }" v-else>{{ $t('promo.button.contatToClaim') }}</view>
					</view>
					<view class="right-top-text">
						<view class="right-top-text-top">{{ $t('promo.rebatePromo.tumover') }}</view>
						<view class="right-top-text-bottom">3X</view>
					</view>
					<theme-image class="claimed-image" src="@/static/promo/btn-Claimed.png"></theme-image>
				</view>
			</view>
			<Rules :list="RebateRules"></Rules>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import globalConfig from '@/config/global.config.js'
import Rules from '@/pages/promo/components/Rules.vue';
import { RebateRules } from '@/pages/promo/constants/index.js';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';

const day1 = globalConfig.appImagePrefix() + '/promo/Day1.png'
const day2 = globalConfig.appImagePrefix() + '/promo/Day2.png'
const day3 = globalConfig.appImagePrefix() + '/promo/Day3.png'
const day4 = globalConfig.appImagePrefix() + '/promo/Day4.png'
const day5 = globalConfig.appImagePrefix() + '/promo/Day5.png'
const day6 = globalConfig.appImagePrefix() + '/promo/Day6.png'
const day7 = globalConfig.appImagePrefix() + '/promo/Day7.png'

const promoMap = [ day1, day2, day3, day4, day5, day6, day7 ]

const themeStore = useThemeStore()
const appStore = useAppStore();

const handleHistoryClick = () => {
	uni.navigateTo({
		url: '/pages/promo/CashbackRecord/CashbackRecord'
	});
};
</script>

<style lang="scss" scoped>
.rebate-body {
	width: 100vw;
	padding: 30rpx 30rpx;
	box-sizing: border-box;
		
	.rebate-content-list {
		box-sizing: border-box;
		width: 100%;
		
		.rebate-content-list-item {
			width: 100%;
			height: 152rpx;
			background-size: 100% 100%;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			.image-size {
				width: 190rpx;
				height: 70rpx;
				margin-left: 10rpx;
			}
			.item-center-text {
				margin-left: 43rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				.item-center-text-top {
					font-weight: 600;
					font-size: 54rpx;
					color: #ffffff;
					text-stroke: 2rpx #d71ed8;
					-webkit-text-stroke: 2rpx #d71ed8;
				}
				.item-center-text-bottom {
					font-weight: 500;
					font-size: 20rpx;
					color: #fec9fe;
				}
				.item-center-text-btn {
					width: 250rpx;
					height: 53rpx;
					background-size: 100% 100%;
					line-height: 53rpx;
					text-align: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #811009;
				}
			}
			.right-top-text {
				position: absolute;
				top: 9rpx;
				right: 20rpx;
				z-index: 10;
				text-align: center;
				display: flex;
				flex-direction: column;

				.right-top-text-top {
					font-size: 24rpx;
					line-height: 19rpx;
				}
				.right-top-text-bottom {
					font-weight: 500;
					font-size: 36rpx;
					line-height: 27rpx;
					color: #f9ec1c;
					margin-top: 5rpx;
				}
			}
			.claimed-image {
				width: 211rpx;
				height: 124rpx;
				position: absolute;
				right: 0;
				top: 0;
				z-index: 50;
			}
		}
	}
}
</style>
