<!-- 每日签到 -->
<template>
	<page-container title="签到" :showBack="true" >
		<banner :type-id="7" :height="328"></banner>
		<view class="checkin-container"
			style="width: 686rpx; height: 838rpx; background-color: #fff; margin: 40rpx auto 0; border-radius: 16rpx;">

			<view class="center" style="padding-top: 24rpx;">
				<text style="color: #8A8A8A; font-size: 28rpx;">累计签到<text style="color: #96B050;">{{
					checkinData.TotalCheckins }}</text>天</text>
			</view>

			<!-- 累计签到 -->
			<view style="width: 100%; overflow: hidden;">
				<scroll-view class="relative" scroll-x="true"
					style="white-space: nowrap;  margin-left: 58rpx; margin-top: 24rpx;">
					<view class="progress-line"
						style="width: 100%; height: 4rpx; background-color: #F3F3F3;position: absolute;  top: 42rpx; left: 10rpx;">
					</view>
					<view class="relative total-checkin-item"
						style="width: 71.7rpx; height: 102rpx;display: inline-block; margin-right: 94rpx;"
						v-for="(item, index) in checkinData.TotalCheckinList" :key="index"
						@tap="showTips(item, $event, index)">
						<image :src="item.icon"
							style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>

						<image v-if="item.isClaim" :src="$img('/static/checkin/Claimed.png')"
							style="width: 71.7rpx; height: 72rpx; position: absolute;" mode=""></image>

						<text
							style="width: 100%; text-align: center; position: absolute; bottom: 0rpx; color: #8A8A8A; font-size: 18rpx;">
							累计
							<text style="color: #96B050;">{{ item.Days }}</text>
							天
						</text>
					</view>

				</scroll-view>
			</view>

			<!-- 签到列表 -->
			<view class="justify-center" style="margin-top: 24rpx;">

				<scroll-view scroll-y="true" style="width: 632rpx; height: 600rpx;">
					<view class="grid-container">
						<view class="grid-item" v-for="(item, index) in checkinData.CheckinList" :key="index" style="">
							<image :src="item.icon">
							</image>
							<!-- <image v-if="!item.isClaim" style="z-index: 10;"
								:src="$img('/static/checkin/Expired.png')" mode=""></image> -->

							<image v-if="item.isClaim" style="z-index: 10;" :src="$img('/static/checkin/Claimed2.png')"
								mode=""></image>

							<image v-if="item.isToday" :src="$img('/static/checkin/ClaimBorder.png')" mode="">
							</image>

							<text class="day">第{{ item.Day }}天</text>
							<text class="reward">{{ item.Reward }}</text>

						</view>
					</view>
				</scroll-view>

			</view>
		</view>

		<!-- 签到按钮 -->
		<view class="justify-center" style="width: 100%; height: 198rpx; background-color: #fff; margin-top: -10rpx;">
			<view class="align-center column">
				<view class="sign-btn center" @click="sign"
					style="width: 340rpx; height: 84rpx; background-color: #D8FD24; margin-top: 32rpx;">
					<text style="color: #333333; font-size: 32rpx; font-weight: 600;">{{ !is_sign ? "今日已签到" : "每日签到"
						}}</text>
				</view>
				<text style="color: #8A8A8A; font-size: 20rpx; margin-top: 12rpx;">{{ checkinData.Requirement
				}}</text>
			</view>
		</view>

		<!-- 气泡提示 -->
		<view class="tooltip" v-if="tipVisible" :style="{ left: tipPosition.x + 'px', top: tipPosition.y + 'px' }">
			<view class="tooltip-content">
				<text>{{ currentTip }}</text>
			</view>
			<view class="tooltip-arrow"></view>
		</view>
	</page-container>
</template>

<script>
import PageContainer from '@/components/page-container/page-container.vue'

export default {
	components: {
		PageContainer
	},
	data() {
		return {
			tipVisible: false,
			currentTip: '',
			tipPosition: {
				x: 0,
				y: 0
			},
			checkinData: {
				TotalCheckins: 10, //累计签到天数
				Requirement: "当日消费满100钻石",
				TotalCheckinList: [],
				CheckinList: [
				],
			},
			is_sign: false,
			isSignCooldown: false, // 添加防抖状态变量
		}
	},
	onLoad() {
		this.load();
	},
	methods: {
		showTips(item, event, index) {
			if (item.tips) {
				// 获取点击元素的位置
				const query = uni.createSelectorQuery();
				query.selectAll('.total-checkin-item').boundingClientRect(data => {
					if (data && data[index]) {
						const itemRect = data[index];
						this.tipPosition.x = itemRect.left + itemRect.width / 2;
						this.tipPosition.y = itemRect.top - 20;
						this.currentTip = item.tips;
						this.tipVisible = true;
						// 自动隐藏提示
						setTimeout(() => {
							this.tipVisible = false;
						}, 2000);
					}
				}).exec();
			}
		},
		async load() {
			let sign_in_spend_limit = this.$config.getAppSetting("sign_in_spend_limit");
			if (sign_in_spend_limit && sign_in_spend_limit > 0) {
				this.checkinData.Requirement = "签到条件：当日消费满" + sign_in_spend_limit + "钻石"
			} else {
				this.checkinData.Requirement = ""
			}
			let res = await this.req({
				url: 'sign_info',
				Loading: true
				// method: "GET",
			})
			console.log(res);
			if (res.status === 0) {

				return;
			}
			let data = res.data;
			console.log(this.checkinData.CheckinList);
			this.is_sign = data.is_sign == 0 ? true : false;
			this.checkinData.CheckinList.splice(0, this.checkinData.CheckinList.length);
			let that = this;
			data.daily_configs.forEach(item => {
				let t = {
					isExpired: false,
					isClaim: item.is_sign === 2 ? true : false,
					isToday: item.is_sign_day === 1 ? true : false,
					Day: item.day,
					Reward: item.description,
					icon:item.icon
				};
				// isExpired: true, //是否过期
				// 		isClaim: false, //是否签到
				// 		isToday: false, //是否是当天
				that.checkinData.CheckinList.push(t);
			});
			//TotalCheckinList
			this.checkinData.TotalCheckinList.splice(0, this.checkinData.TotalCheckinList.length);
			data.continuous_configs.forEach(item => {
				let t = {
					Days: item.day,
					isClaim: item.is_sign === 1 ? true : false,
					tips: item.description || '',
					icon:item.icon
				};
				that.checkinData.TotalCheckinList.push(t);
			});
			this.checkinData.TotalCheckins = data.sign_days;

		},
		async sign() {
			if (!this.is_sign) {
				this.$c.msg("已签到")
				return false;
			}

			// 添加防抖检查
			if (this.isSignCooldown) {
				this.$c.msg("点击太频繁，请稍后再试")
				return false;
			}

			// 设置防抖状态
			this.isSignCooldown = true;

			// 一秒后重置防抖状态
			setTimeout(() => {
				this.isSignCooldown = false;
			}, 500);

			let res = await this.req({
				url: 'sign',
				Loading: true
			})
			console.log(res);
			if (res.status === 1) {
				this.$c.msg(res.msg)
			}
			await this.load();
		}

	}
}
</script>

<style lang="scss">
.checkin-container {
	animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(4, 140rpx);
	gap: 26rpx;
}

.grid-item {
	width: 140rpx;
	height: 172rpx;
	position: relative;
	animation: scaleIn 0.5s ease-out;
	animation-fill-mode: both;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	
	&:active {
		transform: scale(0.95);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	>image {
		width: 100%;
		height: 100%;
		position: absolute;
		transition: all 0.3s ease;
	}

	.day {
		position: absolute;
		font-size: 18rpx;
		color: #96B152;
		top: 12rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s ease;
	}

	.reward {
		position: absolute;
		font-size: 20rpx;
		color: #96B050;
		white-space: nowrap;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
		transition: all 0.3s ease;
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.8);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.total-checkin-item {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	animation: slideIn 0.5s ease-out;
	animation-fill-mode: both;
	
	&:active {
		transform: scale(1.1);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-20rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.sign-btn {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	
	&:active {
		transform: scale(0.95);
		background-color: darken(#D8FD24, 5%);
		
		&::after {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 100%;
			height: 100%;
			background: rgba(255, 255, 255, 0.2);
			border-radius: 50%;
			transform: translate(-50%, -50%) scale(0);
			animation: ripple 0.6s ease-out;
		}
	}
}

@keyframes ripple {
	0% {
		transform: translate(-50%, -50%) scale(0);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50%, -50%) scale(2);
		opacity: 0;
	}
}

.tooltip {
	position: fixed;
	z-index: 999;
	transform: translateX(-50%);
	animation: tooltipFadeIn 0.3s ease-out;

	.tooltip-content {
		min-width: 80rpx;
		max-width: 300rpx;
		padding: 10rpx 16rpx;
		background-color: rgba(0, 0, 0, 0.7);
		color: #fff;
		border-radius: 8rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.tooltip-arrow {
		width: 0;
		height: 0;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid rgba(0, 0, 0, 0.7);
		margin: 0 auto;
	}
}

@keyframes tooltipFadeIn {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(10rpx);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

// 为每个签到项添加延迟动画
.grid-item {
	@for $i from 1 through 30 {
		&:nth-child(#{$i}) {
			animation-delay: #{$i * 0.05}s;
		}
	}
}

// 为累计签到项添加延迟动画
.total-checkin-item {
	@for $i from 1 through 10 {
		&:nth-child(#{$i}) {
			animation-delay: #{$i * 0.1}s;
		}
	}
}
</style>