<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="ruleText"></rich-text>
				</view>
			</view>
			
			<!-- 关闭按钮 -->
			<view class="close_button" @click="handleClose">
				<text class="close_icon">×</text>
			</view>
		</view>
	</view>
</template>

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

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

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

// 监听 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');
};
</script>

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