<template>
	<view class="task_complete_overlay" v-if="visible" @click="handleClose">
		<!-- 背景容器，右下角镂空透明圆角矩形 -->
		<view class="background_container"></view>
		
		<view class="task_complete_container">
			<!-- 任务完成标题 -->
			<text class="task_title">完成{{ taskTitle }}任务</text>
			<!-- 获得积分文字 -->
			<text class="points_text">获得{{ points }}积分</text>
			<!-- 金币图标 -->
			<image class="coin_icon" :src="$baseUrl + `integral/1023/jifenIcon1.png`" mode="aspectFit" />
			<!-- 开心收下按钮 -->
			<view class="accept_button" @click="handleAccept">
				<text class="accept_text">开心收下</text>
			</view>
		</view>
		
		<!-- 关闭按钮 -->
		<view class="close_button" @click="handleClose">
			<text class="close_icon">×</text>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

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

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

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

// 开心收下按钮点击
const handleAccept = () => {
	emit('accept');
	emit('close');
};
</script>

<style lang="less" scoped>
@import '@/components/qiandao/TaskComplete.less';
</style>
