<template>
	<view class="task_pop_overlay" v-if="visible" @click.stop>
		<view class="task_pop_container" :style="{ height: containerHeight + 'rpx' }" @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" :style="{ height: taskListHeight + 'rpx', 'overflow-y': canScroll ? 'auto' : 'hidden' }">
				<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 }}{{ (task?.taskTodoExtra?.type === 'BROWSE_PAGE' || task?.taskTodoExtra?.type === 'EXCHANGE_GOODS') ? `（${task?.taskTodoExtra?.completeCount || 0}/${task?.taskTodoExtra?.completeLimit || 0}）` : '' }}
						</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, computed } 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: () => []
	}
});

// 计算任务条数
const taskCount = computed(() => {
	return props.taskTodo?.length || 0;
});

// 计算弹窗容器高度：100 + 条数 * 170，最多6条
const containerHeight = computed(() => {
	const count = Math.min(taskCount.value, 6);
	return 100 + count * 170;
});

// 计算任务列表高度：根据条数动态变化，最多6条时固定高度
const taskListHeight = computed(() => {
	const count = taskCount.value;
	if (count <= 6) {
		return count * 170;
	}
	// 超过6条时，固定为6条的高度，内容可滚动
	return 6 * 170;
});

// 判断是否可滚动：超过6条时可滚动
const canScroll = computed(() => {
	return taskCount.value > 6;
});

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>
