<template>
	<view class="sign_rule_overlay" v-if="visible">
		<view class="sign_rule_container" @click.stop>
			<!-- 弹窗内容 -->
			<view class="rule_content">
				<text class="rule_title">任务规则</text>
				
				<view class="rule_list">
					<rich-text class="rule_rich_text" :nodes="ruleContent"></rich-text>
				</view>
			</view>
			
			<!-- 关闭按钮 -->
			<view class="close_button" @click="handleClose">
				<text class="close_icon">×</text>
			</view>
		</view>
	</view>
</template>

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

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

// Emits 定义
const emit = defineEmits(['close']);
const integralStore = useIntegralStore();
const ruleText = ref(integralStore.signinAndTaskInfo?.checkInTodo?.checkInExtra?.rule);


// 富文本内容字符串
// const ruleContent = ref(ruleText.value ? ruleText.value : '<div class="rule_text">2025年4月1日签到规则升级</div><div class="rule_text">1. 当月连签2天后,单日签到奖励升至2分</div><div class="rule_text">2. 当周满签7天,额外再奖励5分</div><div class="rule_text">3. 断签也有机会补,邀请小伙伴帮你助力</div><div class="rule_text">4. 每月1号连签次数清零</div>');
const ruleContent = ref(ruleText.value ? ruleText.value : '');

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

onMounted(() => {
	ruleText.value = integralStore.signinAndTaskInfo?.checkInTodo?.checkInExtra?.rule;
	console.log('ruleContent=',ruleContent.value);
});
</script>

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