<template>
	<view>
		<view class="notice">
			<text>入学须知:</text>
			<view>一、请先完成信息采集等必办环节，在完成在线缴费后才可以查看辅导员分配的宿舍。
			</view>
			<view>二、如在缴费过程中，碰到问题,请咨询:学院财务处固定电话:0771-6301161</view>
			<button @click="handleButtonClick" :disabled="is_read || (countdown > 0 && !is_read) "
				:style="{ backgroundColor: buttonColor }">
				{{ is_read ? "已确认" : countdown == 0 && is_read == 0 ? "确认" : '请先阅读以上内容并等待'+countdown+'秒' }}
			</button>

			<u-toast ref="uToast"></u-toast>

		</view>
		<FloatBall />
	</view>

</template>

<script>
	import {
		confirmRxxz,
		getOwnTaskStatusByCode
	} from "@/api/toApi.js";
	import {
		isEmpty
	} from "@/api/helpFunc.js";
	import FloatBall from "@/pages/compoents/FloatBall.vue";
	export default {
		components: {
			FloatBall
		},
		data() {
			return {
				countdown: 10,
				timer: null,
				button_text: "确认",
				is_read: false
			}
		},
		async onLoad() {
			await this.getOwnTaskStatusByCode();
		},
		mounted() {
			this.startTimer();
		},
		computed: {
			buttonColor() {
				if (this.is_read || (this.countdown > 0 && !this.is_read)) {
					return 'gray'; // 倒计时结束后的背景色
				} else {
					return 'green'; // 倒计时进行中的背景色
				}
			}
		},
		methods: {
			async getOwnTaskStatusByCode() {
				let res = await getOwnTaskStatusByCode("RXXZ");
				if (res.code == 200) {
					if (!isEmpty(res.data)) {
						this.is_read = res.data.status == '1';
					}
				}
			},
			startTimer() {
				this.timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(this.timer);
					}
				}, 1000); // 每秒更新一次倒计时
			},
			async handleButtonClick() {
				if (this.countdown === 0) {
					let res = await confirmRxxz();
					if (res.code == 200) {
						this.is_read = true;
						uni.redirectTo({
							url: "/pages/newindex/newindex"
						});
					} else {
						this.$refs.uToast.show({
							type: "error",
							message: res.msg,
							duration: 1500,
						})
					}

				} else {

					console.log('请先阅读以上内容并等待倒计时结束！');
				}
			}
		},
		beforeDestroy() {
			clearInterval(this.timer);
		}

	}
</script>

<style scoped lang="scss">

	.notice {

		padding: 20rpx 20rpx;

		button {

			position: fixed;
			bottom: 100rpx;
			margin-left: 60rpx;
			width: 80%;
			border-radius: 50rpx;

			color: white;
		}
	}
</style>