<template>
	<view class="signed_tips_overlay" v-if="visible" @click="handleClose">
		<!-- 背景容器，右下角镂空透明圆角矩形 -->
		<view class="background_container"></view>
		
		<view class="signed_tips_container">
			<!-- <text class="tips_title">签到成功！</text> -->
            <image class="tips_title" :src="$baseUrl + `integral/1023/signedTitle.png`" mode="aspectFit" />
			<text class="points_text">获得{{ points }}积分</text>
		</view>
        <view class="signedbg_icon_container">
			<image class="signedbg_icon" :class="{ 'signedbg_icon_animating': isAnimating }" :src="$baseUrl + `integral/1023/jifenIcon1.png`" mode="aspectFit" />
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits, ref, watch } from 'vue';

// Props 定义
const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	points: {
		type: Number,
		default: 0
	}
});

// Emits 定义
const emit = defineEmits(['close']);

// 是否正在播放动画
const isAnimating = ref(false);

// 动画定时器
let animationTimer = null;

// 监听 visible 变化，当 visible = true 时自动播放动画
watch(() => props.visible, (newVal) => {
	if (newVal) {
		// 弹窗显示时，开始播放动画
		isAnimating.value = true;
		
		// 清除之前的定时器（防止重复触发）
		if (animationTimer) {
			clearTimeout(animationTimer);
		}
		
		// 动画播放完毕后（1.5秒）停止动画并关闭弹窗
		animationTimer = setTimeout(() => {
			isAnimating.value = false;
			emit('close');
			animationTimer = null;
		}, 1500);
	} else {
		// 弹窗关闭时，清除定时器并停止动画
		if (animationTimer) {
			clearTimeout(animationTimer);
			animationTimer = null;
		}
		isAnimating.value = false;
	}
});

// 关闭弹窗
const handleClose = () => {
	// 清除定时器
	if (animationTimer) {
		clearTimeout(animationTimer);
		animationTimer = null;
	}
	isAnimating.value = false;
	emit('close');
};
</script>

<style lang="less" scoped>
@import '@/components/qiandao/SignedTips.less';
</style>
