<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 props.taskTodo" 
					:key="index"
				>
					<view class="task_icon">
						<image 
							class="icon_img" 
							:src="task?.taskTodoExtra?.icon" 
							mode="aspectFit"
						/>
					</view>
					<view class="task_content">
						<text class="task_title">{{ task?.taskTodoExtra?.title }}</text>
						<text class="task_points">积分+{{ task?.taskTodoExtra?.credits }}</text>
					</view>
					<view 
						class="task_button" 
						:class="{ completed: task?.taskTodoExtra?.status == '3' }"
						@click="handleTaskClick(task, index)"
					>
						<text class="task_button_text">{{ task?.taskTodoExtra?.status == '3' ? '已完成' : '去完成' }}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, watch } from 'vue';
import { useIntegralStore } from '../../stores/integral';

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

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

const integralStore = useIntegralStore();

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

// 任务列表数据
const taskList = ref([]);

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

// 任务点击事件
const handleTaskClick = (task, index) => {
	if (task?.taskTodoExtra?.status === '3') {
		// 已完成的任务不触发跳转
		console.log('任务已完成:', task?.taskTodoExtra?.title);
		return;
	}
	
	emit('taskClick', { task, index });
};

</script>

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