<template>
	<view class="task_pop_overlay" v-if="visible" @click.stop>
		<view class="task_pop_container" @click.stop>
			<!-- 弹窗头部 -->
			<view class="task_pop_header">
				<text class="task_pop_title">做任务赚积分</text>
				<view class="close_button" @click="handleClose">
					<text class="close_icon">×</text>
				</view>
			</view>
			
			<!-- 任务列表 -->
			<view class="task_list">
				<view 
					class="task_item" 
					v-for="(task, index) in taskList" 
					:key="index"
				>
					<view class="task_icon">
						<image 
							class="icon_img" 
							:src="task.icon" 
							mode="aspectFit"
						/>
					</view>
					<view class="task_content">
						<text class="task_title">{{ task.title }}</text>
						<text class="task_points">积分+{{ task.points }}</text>
					</view>
					<view 
						class="task_button" 
						:class="{ completed: task.completed }"
						@click="handleTaskClick(task, index)"
					>
						<text class="task_button_text">{{ task.completed ? '已完成' : '去完成' }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 任务完成提示弹窗 -->
		<TaskCompleteTips 
			:visible="showTaskCompleteTips" 
			:points="currentTaskPoints"
			:taskTitle="currentTaskTitle"
			@close="handleCloseTaskCompleteTips"
		/>
	</view>
</template>

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

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

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

// 任务完成提示弹窗状态
const showTaskCompleteTips = ref(false);
const currentTaskPoints = ref(0);
const currentTaskTitle = ref('');

// 任务列表数据
const taskList = [
	{
		id: 1,
		title: '完善信息',
		points: 20,
		icon: '/static/images/task_info.png',
		completed: false
	},
	{
		id: 2,
		title: '邀请好友',
		points: 20,
		icon: '/static/images/task_invite.png',
		completed: false
	},
	{
		id: 3,
		title: '浏览星妈优选商城',
		points: 20,
		icon: '/static/images/task_browse.png',
		completed: false
	},
	{
		id: 4,
		title: '完成首单优选消费',
		points: 20,
		icon: '/static/images/task_browse.png',
		completed: false
	},
	{
		id: 5,
		title: '关注公众号',
		points: 20,
		icon: '/static/images/task_follow.png',
		completed: true
	},
	{
		id: 6,
		title: '添加企业微信',
		points: 20,
		icon: '/static/images/task_wechat.png',
		completed: false
	}
];

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

// 任务点击事件
const handleTaskClick = (task, index) => {
	if (task.completed) {
		// 已完成的任务不触发跳转
		console.log('任务已完成:', task.title);
		return;
	}
	
	// 显示任务完成提示弹窗
	currentTaskTitle.value = task.title;
	currentTaskPoints.value = task.points;
	// showTaskCompleteTips.value = true;
	
	emit('taskClick', { task, index });
};

// 关闭任务完成提示弹窗
const handleCloseTaskCompleteTips = () => {
	showTaskCompleteTips.value = false;
};
</script>

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