<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?.desc }}</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';
import md from '../../md.js';

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

onMounted(() => {
	props.taskTodo.forEach(item => {
		md.sensorComponentLogTake({
			xcxComponentExposure: "true",
			pageName: "任务面板页",
			componentName: "做任务赚积分",
			componentContent: item.taskTodoExtra?.title
		});
	});
});

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

const integralStore = useIntegralStore();

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

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

// 监听 visible 变化，设置页面滚动状态
watch(() => props.visible, (newVal) => {
	// #ifdef MP-WEIXIN
	if (newVal) {
		// 弹窗展示时，禁止页面滚动
		wx.setPageStyle({
			style: {
				overflow: 'hidden'
			}
		});
	} else {
		// 弹窗关闭时，恢复页面滚动
		wx.setPageStyle({
			style: {
				overflow: 'auto'
			}
		});
	}
	// #endif
}, { immediate: true });

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

// 任务点击事件
const handleTaskClick = (task, index) => {
	md.sensorComponentLogTake({
		xcxComponentClick: "true",
		pageName: "任务面板页",
		componentName: "做任务赚积分",
		componentContent: task.taskTodoExtra?.title
	});

	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>
