<template>
	<view class="pageContent">
		<image src="/static/images/login.png" mode="" class="login-bg"></image>
		<view class="content_con">
			欢迎登录
		</view>
		<view class="content">
			<view class='ver_item'>
				<input type="number" v-model="phone" :maxlength="11" placeholder="请输入手机号" class="input" />
			</view>
			<view class='ver_item'>
				<input type="number" v-model="code" :maxlength="6" placeholder="请输入验证码" class="input" />
				<button :class="showView?' get_phone_number blue':'get_phone_number grad'"
					@click="getPhoneCode">{{ isCounting ? `${countdown}s后重新获取` : '获取验证码' }}</button>
			</view>
			<!-- 协议勾选 -->
			<view class="agreement">
				<view class="custom-checkbox" @click="toggleCheck">
					<view class="checkbox-icon" :class="{ checked: isChecked }">
						<uni-icons v-if="isChecked" type="checkmarkempty" size="8" color="#fff"></uni-icons>
					</view>
					<text class="checkbox-label">我已认真阅读，理解并同意<a class="agreeT">《用户服务协议》</a>及<a
							class="agreeT">《隐私政策》</a></text>
				</view>
			</view>

			<!-- 登录按钮 -->
			<button class="login-btn" @click="handleLogin">
				登录
			</button>
		</view>
		<!-- 弹框 -->
		<view class="agreement-mask" v-if="showAgreement">
			<!-- 协议弹窗 -->
			<view class="agreement-popup" @click.stop>
				<!-- 标题 -->
				<view class="popup-title">服务协议及隐私政策</view>
				<!-- 协议内容 -->
				<view class="popup-content">
					为了更好的保障您的合法权益，请您阅读并同意以下协议
					<text class="protocol-link" @click="openProtocol('user')">《用户服务协议》</text>
					<text class="protocol-link" @click="openProtocol('privacy')">《隐私政策》</text>
				</view>
				<!-- 按钮组 -->
				<view class="popup-buttons">
					<button class="btn disagree" @click="handleDisagree">不同意</button>
					<button class="btn agree" @click="handleAgree">同意</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import { login } from '@/api/login';
	export default {
		data() {
			return {
				showView: false,
				//codebtn: '获取验证码',
				phone: '', //手机号码
				code: "", //验证码
				agreed: false,
				isCounting: false,
				countdown: 60,
				isChecked: false,
				showAgreement: false // 控制弹窗显示
			}
		},
		methods: {
			// 获取验证码
			getPhoneCode() {
				const phoneNumber = this.phone
				const myreg = /^1[3456789]\d{9}$/;
				if (!phoneNumber) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					});
					return false;
				} else if (!myreg.test(phoneNumber)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none',
						duration: 1000
					});
					return false;
				}
				this.isCounting = true
				this.countdown = 60
				const timer = setInterval(() => {
					this.countdown--
					if (this.countdown <= 0) {
						clearInterval(timer)
						this.isCounting = false
					}
				}, 1000)

				// 接口调用
				// uni.request({
				// 	...
				// })
			},
			// 勾选同意
			toggleCheck() {
				this.isChecked = !this.isChecked
			},
			// 登录
			handleLogin() {
				if (this.phone == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				} else if (this.code == '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						duration: 1000
					})
					return false
				} else if (!this.isChecked) {
					this.showAgreement = true
					return false
				}
				// 接口调用
				// uni.request({
				// 	...
				// })
				// uni.showToast({
				// 	title: '验证通过了，走接口',
				// 	icon: 'none',
				// 	duration: 1000
				// })
				uni.switchTab({
					url: '/pages/common/index/index'
				})

			},
			// 打开具体协议
			openProtocol(type) {
				if (type === 'user') {
					// 跳转到用户协议页面
					uni.navigateTo({
						url: '/pages/protocol/user'
					})
				} else {
					// 跳转到隐私政策页面
					uni.navigateTo({
						url: '/pages/protocol/privacy'
					})
				}
			},

			// 不同意
			handleDisagree() {
				this.showAgreement = false
			},
			// 同意
			handleAgree() {
				this.isChecked = !this.isChecked
				this.showAgreement = false
			},
		},
	}
</script>

<style scoped>
	.pageContent {
		background: rgb(26, 26, 26);
		height: 100vh;
	}

	.login-bg {
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
		position: relative;
	}

	.content {
		height: 70%;
		width: 100%;
		background: rgb(26, 26, 26);
		position: absolute;
		bottom: 0px;
		border-radius: 60px 60px 0px 0px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.content_con {
		position: absolute;
		top: 220rpx;
		color: rgba(255, 255, 255, 0.87);
		left: 30rpx;
		font-size: 60rpx;
	}

	.input {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		height: 80rpx;
		color: rgba(255, 255, 255, 0.6);
		margin-top: 50rpx;
	}

	.ver_item {
		position: relative;
	}

	.get_phone_number {
		position: absolute;
		right: 0px;
		color: #999;
		top: 1rpx;
		background: rgb(26, 26, 26);
		border: none;
		text-align: right;
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
	}

	.grad {
		color: rgb(187, 230, 0);
	}

	.blue {
		color: rgba(255, 255, 255, 0.6);
	}

	.agreement {
		margin: 50rpx 0;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
	}

	.login-btn {
		margin-top: 150rpx;
		background-color: rgb(187, 230, 0);
		color: rgb(35, 35, 35);
		border-radius: 50rpx;
	}

	.login-btn[disabled] {
		background-color: #ccc;
	}

	.custom-checkbox {
		display: flex;
		align-items: center;
	}

	.checkbox-icon {
		width: 30rpx;
		height: 30rpx;
		border: 1px solid rgba(255, 255, 255, 0.87);
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.checkbox-icon.checked {
		background-color: #07C160;
		border-color: #07C160;
		color: white;
	}

	.checkbox-label {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	.agreeT {
		color: rgb(187, 230, 0);
	}

	/* 遮罩层 */
	.agreement-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	/* 弹窗主体 */
	.agreement-popup {
		width: 80%;
		background-color: rgba(42, 42, 42);
		border-radius: 16rpx;
		padding: 40rpx;
		box-sizing: border-box;
		border: 1rpx solid rgba(187, 230, 0, 0.3)
	}

	/* 标题 */
	.popup-title {
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
		color: rgba(255, 255, 255, 0.87);
	}

	/* 内容文本 */
	.popup-content {
		font-size: 30rpx;
		line-height: 1.6;
		color: rgba(255, 255, 255, 0.87);
		margin-bottom: 50rpx;
	}

	/* 协议链接 */
	.protocol-link {
		color: rgb(187, 230, 0);
		margin: 0 10rpx;
	}

	/* 按钮容器 */
	.popup-buttons {
		display: flex;
		justify-content: space-between;
	}

	/* 通用按钮样式 */
	.btn {
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 0 20rpx;
	}

	/* 不同意按钮 */
	.disagree {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.87);
		border: 1px solid rgb(255, 255, 255);
		font-size: 24rpx;
	}

	/* 同意按钮 */
	.agree {
		background-color: rgb(187, 230, 0);
		color: #232323;
		border: none;
		font-size: 24rpx;
	}
</style>