<template>
	<uni-popup ref="noticePopup" :mask-click="false" type="center">
		<view class="popup-container">
			<view class="title-box">
				<view class="title">
					星妈会活动参与协议
				</view>
				<image @click="close" :src="$baseUrl + 'sign-up/cross.png'" mode="aspectFit" />
			</view>
			 <!-- 可滚动内容区域 -->
			 <scroll-view
				class="content-box"
				scroll-y
				@scroll="onScroll"
				@scrolltolower="onScrollLower"
				>
				<view class="sub-title">发布/更新于：2025年12月1日 </view>
				<view class="sub-content">
					<view class="sub-tips">重要提示</view>：本协议是您与星妈会之间关于参与线下活动的法律文件。为使您更好地参与活动并保障您的合法权益，星妈会特别提示您仔细阅读、理解并同意本协议的全部内容，特别是其中加粗、划线或以其他显著方式标识的，与您的权益（可能）有重大关系的条款（包括但不限于免除、限制星妈会责任的条款及争议解决条款）。如您对本协议的任何条款存在疑问，请在报名前通过官方公布的联系方式与我们联系。如您不同意本协议的任何内容，您应立即停止活动报名程序。</view>
				<view class="sub-title">第一条 活动报名及参与承诺 </view>
				<view class="sub-content">
				作为报名参加活动及使用相关设施 / 服务的先决条件，您确认已注册成为星妈会小程序用户，并完全知晓并自愿接受参与该活动可能存在的所有风险及危险。
				您承诺将配合星妈会工作人员的指引妥善完成活动参与的事项准备，包括但不限于随身物品的寄存、遵守着装要求等。同时您也知晓个人财物（特别是贵重物品）须由您本人妥善保管，如有遗失或损坏，星妈会不承担赔偿责任。
				您承诺报名时填写的所有信息真实、准确、完整且有效。您知悉本次活动资格具有人身专属性，不得以任何形式转让予任何第三方。若因您隐瞒、伪造信息或转让资格所引致的任何法律责任、损失或第三方索赔，均由您独立承担。在此情况下，星妈会有权立即单方面取消您的参与资格，并无需承担任何责任地收回您通过本活动已获得的全部权益。
				您承诺，如您拥有并选择使用个人社交媒体账号，将于活动结束后
				</view>
				<view class="read-complete" @click="onChange">
					<image v-if="isAgree" :src="$baseUrl + 'sign-up/selected.png'" mode="aspectFit" />
					<image v-else :src="$baseUrl + 'sign-up/circle.png'" mode="aspectFit" />
					<view class="read-text">
						本人已认真、完整地阅读了本协议全文，尤其是加粗部分的条款，充分理解其含义及可能产生的法律后果，并自愿同意接受本协议全部内容的约束
					</view>
					<!-- <checkbox-group @change="onChange">
							<checkbox value="1" :checked="isAgree[0] == 1">
							本人已认真、完整地阅读了本协议全文，尤其是加粗部分的条款，充分理解其含义及可能产生的法律后果，并自愿同意接受本协议全部内容的约束
							</checkbox>
					</checkbox-group> -->
				</view>
			 </scroll-view>
			<view :class="!isBottom ? 'btn-box':'btn-box btn-opaque'">
				<view v-if="!isBottom" >请滑动到底部阅读页面须知</view>
				<view v-else @click="goToSign">我已阅读页面所有须知</view>
			</view>
		</view>
	</uni-popup>
</template>

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

const props = defineProps({
  agreement: {
    type: Boolean,
    default: false,
  },
})
const isAgree = ref(false)
const emit = defineEmits(['goToSign'])
const noticePopup = ref(null)
//中奖状态
//是否到达中奖公布日期
const isBottom=ref(false)
// 滚动事件处理 - 核心方法
const  onScroll=(e)=> {
 //    const { scrollHeight, scrollTop, height } = e.detail;
 //    // 检测是否滚动到底部（留5px容错）
 //    const isAtBottom = scrollHeight - scrollTop <= height + 5;
	// // console.log(e.detail, scrollHeight, scrollTop, height,isAtBottom,'滚动个----')
 //    if (isAtBottom && !isBottom.value) {
	// 	isBottom.value = true
 //    } else if (!isAtBottom && isBottom.value) {
	// 	isBottom.value = false
 //    }
}
const onScrollLower=()=>{
	console.log(isBottom.value,'到底部')
	if(!isBottom.value){
		isBottom.value = true
	}
}
const onChange=()=>{
	isAgree.value = !isAgree.value
}
const goToSign = () => {
	if(!isAgree.value) {
		return uni.showToast({
			title: "请阅读并勾选须知信息",
			icon: "none",
		});
	}
	emit('goToSign',isAgree.value)
	close()
}
const open = ()=>{
	noticePopup.value.open()
	isAgree.value = props.agreement
}
const close = ()=>{
	noticePopup.value.close()
	isBottom.value = false
}
defineExpose({
	open
})
</script>

<style lang="less" scoped>
@import '@/common.less';
.popup-container {
	height: 1000rpx;
	width: calc(100vw - 150rpx);
	padding: 40rpx 28rpx;
	box-sizing: border-box;
	background: linear-gradient(180.11deg, #FFE9C5 -3.29%, #FFFFFF 11.59%);
	border-radius: 38rpx;
	.title-box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title{
			font-weight: 600;
			font-size: 28rpx;
			color: #B27C1E;
		}
		image {
			width: 19rpx;
			height: 19rpx;
		}
	}
	.content-box{
		height: 735rpx;
		overflow: scroll;
		margin: 30rpx 0rpx;
		.sub-title{
			font-size: 22rpx;
		}
		.sub-content{
			color: #A8A8A8;
			font-size: 20rpx;
			text-align: justify;
			margin: 30rpx 0rpx;
			.sub-tips{
				color: #000000;
			}
		}
		.read-complete{
			font-size: 20rpx;
			text-align: justify;
			display: flex;
			justify-content: space-between;
			image{
				width: 18rpx;
				height: 18rpx;
				margin-top: 6rpx;
			}
			.read-text{
				width: calc(100% - 25rpx);
			}
		}
	}
	.btn-box{
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 50rpx;
		font-weight: 500;
		font-size: 28rpx;
		background: rgba(211, 164, 88, 0.3);
		text-align: center;
		color: #B27C1E;
	}
	.btn-opaque{
		background: rgba(211, 164, 88, 1);
		color: #FFFFFF;
	}
}
</style>
