<template>
	<view class="task_complete_tips_overlay" v-if="visible" @click.stop>
		<!-- 遮罩层 -->
		<view class="mask_overlay"></view>
		
		<!-- 弹窗内容 -->
		<view class="task_complete_tips_container">
			<!-- 第一行：标题文字 -->
			<text class="tips_title">{{ displayTitle }}</text>
			<!-- <text class="tips_title">完成任务完成任务完成任务任务任务</text> -->
			
			<!-- 第二行：积分文字 -->
			<text class="points_text">获得{{ points }}积分</text>
			
		<!-- 第三行：图片 -->
		<view class="task_complete_icon_container">
			<image class="task_complete_icon" :class="{ 'task_complete_icon_animating': isAnimating }" :src="$baseUrl + `integral/1023/jifenIcon_renwu.png`" mode="aspectFit" />
		</view>
			
			<!-- 第四行：开心收下按钮 -->
			<view class="accept_button" @click="handleAccept">
				<text class="accept_button_text">开心收下</text>
			</view>
			
			<!-- 第五行：关闭按钮 -->
			<view class="close_button" @click="handleClose">
				<text class="close_icon">×</text>
			</view>
		</view>
	</view>
</template>

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

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

// 处理标题文本，超过14个字显示省略号
const displayTitle = computed(() => {
	const title = `完成${props.taskTitle}任务`;
	// const title = '完成任务完成任务完成任务任务啊啊啊';//`完成${props.taskTitle}任务`;
	if (title.length > 16) {
		return title.substring(0, 15) + '...';
	}
	console.log('title:', title);
	return title;
});

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

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

// 监听 visible 值的变化
watch(() => props.visible, (newVal) => {
	if (newVal) {
		console.log('埋点');
		md.sensorPopLogTake({
			xcxPopExposure: "true",
			toolName: "做任务赚积分",
			popName: "任务完成弹窗"
		});
	}

	// #ifdef MP-WEIXIN
	if (newVal) {
		// 弹窗展示时，禁止页面滚动
		wx.setPageStyle({
			style: {
				overflow: 'hidden'
			}
		});
	} else {
		// 弹窗关闭时，恢复页面滚动
		wx.setPageStyle({
			style: {
				overflow: 'auto'
			}
		});
	}
	// #endif
});

// 关闭弹窗
const handleClose = () => {
	emit('close');
};

// 开心收下按钮点击
const handleAccept = () => {
	if (isAnimating.value) return; // 如果正在播放动画，则忽略点击
	
	isAnimating.value = true;
	
	// 触发accept事件
	emit('accept');
	
	// 等待动画播放完毕后关闭弹窗（动画持续1.5秒）
	setTimeout(() => {
		isAnimating.value = false;
		emit('close');
	}, 950);
};
</script>

<style lang="less" scoped>
@import '@/components/renwu/TaskCompleteTips.less';
</style>
