<template>
	<view class="rading">
		<view v-if="!canEnter">
			<!-- 倒计时内容 -->
			<p>
				缴费须知：
			</p>
			<p>
				1. 请确保您已阅读并理解本页面的服务条款和费用说明。<br>
				2. 在开始支付之前，请确认您所输入的支付金额和相关信息准确无误。<br>
				3. 支付成功后，请耐心等待系统处理您的支付请求，不要重复支付以避免重复扣款。<br>
				4. 如遇到支付问题或有任何疑问，请及时联系客服获取帮助，避免造成不必要的损失或困扰。<br>

				感谢您的配合与支持！<br><br>
			</p>
			<p style="color: red;margin-bottom: 15rpx;">请在倒计时结束后勾选已阅读</p>

			<checkbox-group>
				<checkbox :disabled="countdown > 0" v-model="checkboxValue" @change="checkboxChange">已阅读</checkbox>
			</checkbox-group>
			<button @click="markAsEntered" :disabled="countdown > 0"
				class="togo">{{ countdown > 0 ? '倒计时 ' + countdown + ' 秒进入页面' : '点击进入' }}</button>
		</view>
		<view v-else>
			<!-- 进入页面的内容 -->
			<p>欢迎进入页面</p>
			<button @click="topay" class="welcome">进入缴费</button>
		</view>
		<FloatBall />
	</view>
</template>

<script>
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				countdown: 10,
				checkboxValue: "false", // 字符串类型
				canEnter: false,
				timer: null,
			};
		},
		created() {
			this.startCountdown();
		},
		methods: {
			startCountdown() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(this.timer);
					}
				}, 1000);
			},
			markAsEntered() {
				if (this.countdown === 0 && this.checkboxValue) {
					this.canEnter = true;
					uni.navigateTo({
						url: "/pages/pay/index"
					})
				} else {
					uni.showToast({
						title: '请在倒计时结束后选择复选框',
						icon: 'none'
					});
				}
			
			},
			checkboxChange(value) {
				this.checkboxValue = value;
			},
			topay() {
				uni.navigateTo({
					url: "/pages/pay/index"
				})
			}
		},
		destroyed() {
			clearInterval(this.timer); // 每次离开页面时清除定时器
		},
	};
</script>
<style>
	.rading {
		padding: 0 40rpx;
	}

	.togo {
		width: 80%;
		margin-top: 40rpx;
		background-color: skyblue;
		color: white;
	}

	.welcome {
		margin-top: 40rpx;
		background-color: skyblue;
		color: white;
	}
</style>