<template>
	<mobile-sub-layout :title="$t('promo.header.siginTitle')" :lineHeight="4" :bgColor="themeStore.theme.bgColor">
		<template #header-right>
			<view class="claim-all-btn" :style="{ background: themeStore.theme.button.other }" @click="claimRewards(0)">{{ $t('promo.button.claimAll') }}</view>
		</template>
		<view class="signin-body">
			<view class="signin-content">
				<view class="signin-content-top">
					<view class="signin-content-top-item" :style="{ background: themeStore.theme.lightBgColor }">
						<view class="signin-content-top-item-view" :style="{ color: themeStore.theme.text.normal }" >
							{{ $t('promo.public.requiredDeposit') }}
							<text :style="{ color: themeStore.theme.text.highlight }">{{ signinPageData.userBetAmountToday }}/{{ signinPageData.betAmountTodayConfig }}</text>
						</view>
						<view class="signin-content-top-item-view" :style="{ color: themeStore.theme.text.normal }">
							{{ $t('promo.public.requiredBets') }}
							<text :style="{ color: themeStore.theme.text.highlight }">{{ signinPageData.userRechargeAmountToday }}/{{ signinPageData.rechargeAmountTodayConfig }}</text>
						</view>
					</view>
				</view>
				<view class="signin-days-content" :style="{ background: themeStore.theme.lightBgColor }">
					<view class="signin-days-item" v-for="(item, index) in signinPageData.list" :key="index">
						<view class="signin-days-item-day">{{ $t('promo.public.day') }} {{ index + 1 }}</view>
						<theme-image class="signin-days-item-icon" src="@/static/promo/lbi.png"></theme-image>
						<theme-image class="signin-days-item-image" src="@/static/promo/xxx.png" v-if="item.status == 1"></theme-image>
						<view class="signin-days-item-money" v-if="item.status != 1">{{ item.rewards }}</view>
						<view class="claimed-btn" :style="{ 'background-image': themeStore.imageCssUrl.claim }" @click="getSigninReward(item, index)" v-else>{{ $t('promo.button.claim') }}</view>
						<view class="signin-days-item-claimed" v-if="item.status == 2">
							<theme-image src="@/static/promo/Claimed.png" class="claimed-image"></theme-image>
						</view>
						<view class="signin-days-item-noclaimed" :style="{ 'background-image': themeStore.imageCssUrl.g }" v-if="item.status == 1"></view>
					</view>
				</view>
				<Rules :list="SigninRules"></Rules>
			</view>
		</view>
		<view class="receive-success-body" v-if="receiveSuccessVisible">
			<theme-image class="receive-success-image" src="@/static/promo/t.png"></theme-image>
			<view class="receive-success-content">
				<theme-image class="close-receive-success-content" @click="closeReceiveSuccess" src="@/static/promo/close.png"></theme-image>
				<view class="receive-success-content-title">{{ $t('promo.public.bonusContent') }}</view>
				<view class="receive-success-content-icon">
					<theme-image class="icon-size" src="@/static/promo/lbi.png"></theme-image>
				</view>
				<view class="amount">{{ receiveAmount }}</view>
				<view class="bet-now-btn" :style="{ 'background-image': themeStore.imageCssUrl.placeBtn }" @click.stop="closeReceiveSuccess">{{ $t('promo.button.betNow') }}</view>
			</view>
		</view>
	</mobile-sub-layout>
</template>

<script setup>
import Rules from '@/pages/promo/components/Rules.vue';
import { SigninRules } from '@/pages/promo/constants/index.js';
import { getSigninInfoApi, recvRewardUrlApi } from '@/api/promo.js';
import { ref, onMounted, reactive } from 'vue';
import Toast from '@/module/toast/toast.js';
import { useAppStore } from '@/store/useAppStore';
import { useThemeStore } from '@/store/useThemeStore';
import { useI18n } from 'vue-i18n';


const { t } = useI18n();
const appStore = useAppStore();
const themeStore = useThemeStore()

let receiveSuccessVisible = ref(false);
let receiveAmount = ref(0);
let signinPageData = reactive({
	list: [],
	betAmountTodayConfig: 0,
	rechargeAmountTodayConfig: 0,
	userBetAmountToday: 0,
	userRechargeAmountToday: 0,
	signinIdToday: ''
});
const closeReceiveSuccess = () => {
	receiveSuccessVisible.value = false;
};
const getSigninReward = async (item, index) => {
	const { code, data } = await recvRewardUrlApi({
		signinId: index + 1
	});
	if (code == 200) {
		getSigninInfo();
		receiveAmount.value = item.rewards;
		receiveSuccessVisible.value = true;
	}
};
const claimRewards = async (signinId) => {
	const { code, data } = await recvRewardUrlApi({
		signinId: signinId
	});
	if (code == 200) {
		getSigninInfo();
		Toast.show(t('promo.toast.receiveSuccessfully'));
	}
};
const getSigninInfo = async () => {
	Toast.showLoading(t('promo.toast.loading'));
	const { code, data } = await getSigninInfoApi();
	if (code == 200) {
		let config = JSON.parse(data.config);
		let arr = [];
		config.items.forEach((item, index) => {
			let i = {
				deposit: item[1],
				bet: item[2],
				rewards: item[0],
				status: data.signinData[index]
			};
			arr.push(i);
		});
		signinPageData.signinIdToday = data.signinIdToday;
		signinPageData.betAmountTodayConfig = arr[data.signinIdToday].deposit;
		signinPageData.rechargeAmountTodayConfig = arr[data.signinIdToday].bet;
		signinPageData.userBetAmountToday = data.betAmountToday;
		signinPageData.userRechargeAmountToday = data.rechargeAmountToday;
		signinPageData.list = arr;
		Toast.hideLoading();
	} else {
		Toast.hideLoading();
	}
};
onMounted(() => {
	getSigninInfo();
});
</script>

<style lang="scss" scoped>
.claim-all-btn {
	width: 140rpx;
	height: 44rpx;
	border-radius: 22rpx;
	color: #fff;
	text-align: center;
	font-size: 22rpx;
	line-height: 44rpx;
}

.signin-body {
	width: 100vw;
	padding: 30rpx;
	
	.signin-content {
		margin-top: 10rpx;
		overflow-y: auto;
		.signin-content-top {
			width: 100%;
			box-sizing: border-box;
			.signin-content-top-item {
				width: 100%;
				height: 60rpx;
				background: #922222;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding-left: 14rpx;
				padding-right: 9rpx;
				display: flex;
				justify-content: space-between;
				.signin-content-top-item-view {
					font-weight: 500;
					font-size: 24rpx;
					color: #ffffff;
					line-height: 60rpx;
				}
			}
		}
		.signin-days-content {
			width: 100%;
			box-sizing: border-box;
			background: #922222;
			padding: 30rpx 5rpx 30rpx 15rpx;
			border-radius: 20rpx;
			margin-top: 21rpx;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
				
			.signin-days-item-claimed {
				background: rgba(11, 0, 0, 0.6);
				box-sizing: border-box;
				border: 2rpx solid #fff851;
				position: absolute;
				top: -2rpx;
				border-radius: 10rpx;
				left: -2rpx;
				width: 150rpx;
				height: 206rpx;
				z-index: 100;
				.claimed-image {
					width: 114rpx;
					height: 105rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}
			}

			.signin-days-item {
				width: 156rpx;
				height: 206rpx;
				box-sizing: border-box;
				border: 2rpx solid #fa8484;
				background: #922222;
				border-radius: 10rpx;
				padding-top: 15rpx;
				position: relative;
				margin-bottom: 21rpx;
				margin-right: 10rpx;
				.signin-days-item-noclaimed {
					width: 191rpx;
					height: 247rpx;
					pointer-events: none;
					background-repeat: no-repeat;
					background-size: 191rpx 247rpx;
					position: absolute;
					top: -20.5rpx;
					left: -17.5rpx;
				}
				.claimed-btn {
					width: 138rpx;
					height: 47rpx;
					margin: 0 auto;
					margin-top: 18rpx;
					text-align: center;
					line-height: 47rpx;
					font-size: 24rpx;
					color: #fff;
					background-size: 100% 100%;
					background-repeat: no-repeat;
				}
				.signin-days-item-day {
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #fa8484;
				}
				.signin-days-item-icon {
					width: 57rpx;
					height: 57rpx;
					display: block;
					margin: 0 auto;
					margin-top: 28rpx;
				}
				.signin-days-item-image {
					width: 132rpx;
					height: 2rpx;
					display: block;
					margin: 0 auto;
					// margin-top: 35rpx;
				}
				.signin-days-item-money {
					width: 100%;
					font-weight: 500;
					font-size: 24rpx;
					color: #fff851;
					text-align: center;
					margin-top: 28rpx;
				}
			}
		}
	}
}
.receive-success-body {
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.7);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	.receive-success-image {
		width: 510rpx;
		height: 385rpx;
		position: absolute;
		top: 144rpx;
		left: 50%;
		z-index: 999;
		transform: translateX(-50%);
	}
	.receive-success-content {
		position: absolute;
		z-index: 888;
		top: 335rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 630rpx;
		height: 535rpx;
		background: #922222;
		border-radius: 20rpx;
		.close-receive-success-content {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			right: -30rpx;
			top: -30rpx;
			.receive-success-content-title {
				font-weight: 600;
				font-size: 30rpx;
				color: #ffffff;
				text-align: center;
				margin-top: 141rpx;
			}
			.receive-success-content-icon {
				width: 134rpx;
				height: 131rpx;
				background: rgba(97, 6, 6, 0.6);
				border-radius: 20rpx;
				margin: 0 auto;
				margin-top: 33rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon-size {
					width: 57rpx;
					height: 57rpx;
				}
			}
			.amount {
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #fff852;
				margin-top: 24rpx;
			}
			.bet-now-btn {
				width: 360rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				font-weight: 500;
				font-size: 32rpx;
				background-size: 100% 100%;
				margin: 0 auto;
				margin-top: 42rpx;
			}
		}
	}
}
</style>
