<template>
	<view class="login-page">
		<view v-if="pageIndex == 1">
			<image class="background-image" src="https://lxnapi.ccttiot.com/bike/img/static/uWOnjtkaVDDLhY4PtMd8"
				mode="aspectFill">
			</image>
			<view class="overlay">

				<view class="container">
					<!-- 登录/注册切换标签 -->
					<view class="tab-bar-box" v-if="!isRegister">
						<view class="tab-item" @tap="setIsCodeLogin(true)">
							<image :src="isCodeLogin ?
								'https://lxnapi.ccttiot.com/bike/img/static/uLTEz0tXCElq04X9ruhR' :
								'https://lxnapi.ccttiot.com/bike/img/static/uVTppaVeTsblOqJsLqEk'" class="tab-bar">
							</image>
						</view>
						<view class="tab-item" @tap="setIsCodeLogin(false)">
							<image :src="!isCodeLogin ?
								'https://lxnapi.ccttiot.com/bike/img/static/unCWmblh1uzRcYxBzI1K' :
								'https://lxnapi.ccttiot.com/bike/img/static/uqPMG4DDTpTyVg7fFV50'" class="tab-bar-1">
							</image>
						</view>
					</view>

					<!-- 表单区域 -->
					<view class="form-container">
						<!-- 手机号输入框 -->
						<view class="input-box">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/uAjqjitdgGf19n0G3uuI"
								class="input-icon"></image>
							<input type="number" v-model="phone" placeholder="请输入手机号" maxlength="11" class="input"
								@input="validatePhone" />
						</view>
						<text class="error-tip" v-if="errors.phone">{{ errors.phone }}</text>

						<!-- 密码输入框 -->
						<view class="input-box" v-if="!isCodeLogin || isRegister">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/ud4QtAXZp6fOitzpapuw"
								class="input-icon"></image>
							<input type="password" v-model="password" placeholder="请输入密码" class="input-2"
								@input="validatePassword" />
							<text class="get-code" v-if="!isRegister && !isCodeLogin" @tap="forgetPassword">忘记密码？</text>
						</view>
						<text class="error-tip" v-if="errors.password">{{ errors.password }}</text>

						<!-- 验证码输入框 -->
						<view class="input-box" v-if="isCodeLogin || isRegister">
							<image src="https://lxnapi.ccttiot.com/bike/img/static/u7H7WpZhmsvtgZawoxW6"
								class="input-icon"></image>
							<input type="number" v-model="code" placeholder="请输入验证码" maxlength="4" class="input-2"
								@input="validateCode" />
							<text class="get-code" :class="{ 'disabled': countdown > 0 }" @tap="handleGetCode">
								{{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
							</text>
						</view>
						<text class="error-tip" v-if="errors.code">{{ errors.code }}</text>

						<!-- 登录按钮 -->
						<view class="login-btn" @tap="handleLogin" :class="{ 'disabled': loading }">
							<text class="login-txt">{{ loading ? '处理中...' : (isRegister ? '立即注册' : '立即登录') }}</text>
						</view>

						<!-- 切换登录/注册 -->
						<view class="switch-mode" @tap="switchMode">
							<text class="tip-txt">{{ isRegister ? '已有账号？' : '没有账号？' }}</text>
							<text class="tip-txt highlight">{{ isRegister ? '去登录' : '去注册' }}</text>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view v-else class="page1">
			<view class="button-container">
				<view class="btn1" @tap="handlePhoneLogin">
					手机登录
				</view>
				<button class="btn2" open-type="getPhoneNumber" @getphonenumber="handleQuickLogin" v-if="isAgree">
					快捷登录
				</button>
				<view class="btn2" @tap="weChatLogin" v-if="!isAgree">
					快捷登录
				</view>
				<view class="agreement-container">
					<view class="checkbox" @tap="toggleAgreement">
						<image
							:src="isAgree ? 'https://lxnapi.ccttiot.com/bike/img/static/u0vgvsizwNYtdwgmhdLR' : 'https://lxnapi.ccttiot.com/bike/img/static/u3AnE2Nd41NwRjs8DUWz'"
							class="checkbox-icon"></image>
					</view>
					<view class="agreement-text">
						我已阅读并同意
						<text class="link" @tap="openUserAgreement">《用户服务协议》</text>
						
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	data() {
		return {
			isCodeLogin: true,
			isRegister: false,
			phone: '',
			code: '',
			password: '',
			uuid: '',
			loading: false,
			countdown: 0,
			errors: {
				phone: '',
				code: '',
				password: ''
			},
			modalConfig: {
				title: '',
				message: ''
			},
			showPhoneLogin: true,
			pageIndex: 0,
			isAgree: false, // 添加用户协议勾选状态
		}
	},

	methods: {
		weChatLogin() {
			if (!this.checkAgreement()) return;
		},
		toggleAgreement() {
			this.isAgree = !this.isAgree;
		},

		// 检查协议是否已勾选
		checkAgreement() {
			if (!this.isAgree) {
				uni.showToast({
					title: '请先阅读并同意用户协议和隐私政策',
					icon: 'none',
					duration: 2000
				});
				return false;
			}
			return true;
		},

		// 打开用户协议
		openUserAgreement() {
			uni.navigateTo({
				url: '/page_user/word?id=25'  // 根据实际路径调整
			});
		},

		// 打开隐私政策
		openPrivacyPolicy() {
			uni.navigateTo({
				url: '/pages/agreement/privacy-policy'  // 根据实际路径调整
			});
		},

		// 手机登录按钮处理
		handlePhoneLogin() {
			if (!this.checkAgreement()) return;
			this.pageIndex = 1;
		},

		// 快捷登录按钮处理
		handleQuickLogin(e) {
			
			if (!this.isAgree) {
				uni.showToast({
					title: '请先阅读并同意用户协议和隐私政策',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			this.getPhoneNumber(e);
		},
		getPhoneNumber(e) {
			let that = this;
			console.log("eeeeeeee", e);
			const wxLoginAsync = () => {
				return new Promise((resolve, reject) => {
					wx.login({
						success(res) {
							if (res.code) {
								console.log('登录！', res);
								let data = {
									jscode: res.code,
									// userType: that.usertype,
									mobileCode: e.detail.code,
								};
								resolve(data);
							} else {
								reject(res.errMsg);
							}
						},
						fail(err) {
							reject(err);
						}
					});
				});
			};
			wxLoginAsync()
				.then(async (data) => {

					this.$u.post("/wxlogin?mobileCode=" + data.mobileCode + '&jsCode=' + data.jscode
					).then((res) => {

						if (res.code == 200) {
							console.log(res, 'resres');
							wx.setStorageSync('token', res.token);
							that.ceshi()

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});

				})
				.catch((err) => {
					console.error(err);
				});
		},
		ceshi() {
			this.$u.get('/getInfo').then((res) => {
				if (res.code == 200) {
					wx.setStorageSync('userInfo', res.user)
					if (res.user.isAuthentication) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					} else {
						uni.redirectTo({
							url: '/page_user/idTest'
						})
					}
				}
			})
		},
		// 验证手机号
		validatePhone() {
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!this.phone.trim()) {
				this.errors.phone = '请输入手机号';
				return false;
			} else if (!phoneRegex.test(this.phone)) {
				this.errors.phone = '请输入正确的手机号格式';
				return false;
			}
			this.errors.phone = '';
			return true;
		},

		// 验证验证码
		validateCode() {
			const codeRegex = /^\d{4}$/;
			if (!this.code.trim()) {
				this.errors.code = '请输入验证码';
				return false;
			} else if (!codeRegex.test(this.code)) {
				this.errors.code = '请输入4位数字验证码';
				return false;
			}
			this.errors.code = '';
			return true;
		},

		// 验证密码
		validatePassword() {
			if (!this.password.trim()) {
				this.errors.password = '请输入密码';
				return false;
			} else if (this.password.length < 6) {
				this.errors.password = '密码长度不能少于6位';
				return false;
			}
			this.errors.password = '';
			return true;
		},
		validateForm() {
			let isValid = true;
			const newErrors = {
				phone: '',
				code: '',
				password: ''
			};

			// 手机号验证
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!this.phone.trim()) {
				newErrors.phone = '请输入手机号';
				isValid = false;
			} else if (!phoneRegex.test(this.phone)) {
				newErrors.phone = '请输入正确的手机号格式';
				isValid = false;
			}

			// 验证码验证
			if (this.isCodeLogin || this.isRegister) {
				const codeRegex = /^\d{4}$/;
				if (!this.code.trim()) {
					newErrors.code = '请输入验证码';
					isValid = false;
				} else if (!codeRegex.test(this.code)) {
					newErrors.code = '请输入4位数字验证码';
					isValid = false;
				}
			}

			// 密码验证
			if (!this.isCodeLogin || this.isRegister) {
				if (!this.password.trim()) {
					newErrors.password = '请输入密码';
					isValid = false;
				} else if (this.password.length < 6) {
					newErrors.password = '密码长度不能少于6位';
					isValid = false;
				}
			}

			this.errors = newErrors;
			return isValid;
		},

		handleLogin() {
			if (!this.validateForm()) return;

			if ((this.isCodeLogin || this.isRegister) && !this.uuid) {
				uni.showToast({
					title: '请先获取验证码',
					icon: 'none',
					duration: 2000
				});
				return;
			}

			this.loading = true;
			let url, data;

			if (this.isRegister) {
				url = '/register';
				data = {
					username: this.phone,
					password: this.password,
					code: this.code,
					uuid: this.uuid
				};
			} else if (this.isCodeLogin) {
				url = '/appCodeLogin';
				data = {
					phone: this.phone,
					phoneCode: this.code,
					uuid: this.uuid
				};
			} else {
				url = '/appLogin';
				data = {
					username: this.phone,
					password: this.password
				};
			}

			this.$u.post(url, data).then((res) => {
				if (res.code == 200) {
					wx.setStorageSync('token', res.token);
					this.ceshi()
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			}).finally(() => {
				this.loading = false;
			});
		},

		handleGetCode() {
			if (this.countdown > 0) return;

			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!this.phone.trim() || !phoneRegex.test(this.phone)) {
				this.errors.phone = '请输入正确的手机号格式';
				return;
			}

			const type = this.isRegister ? '2' : '1'; // 1:登录 2:注册
			this.$u.get("/appCaptcha?type=" + type + "&phone=" + this.phone).then((res) => {
				if (res.code == 200) {
					this.uuid = res.uuid;
					this.countdown = 60;
					this.startCountdown();
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
			});
		},

		startCountdown() {
			if (this.countdown <= 0) return;
			setTimeout(() => {
				this.countdown--;
				if (this.countdown > 0) {
					this.startCountdown();
				}
			}, 1000);
		},

		switchMode() {
			this.isRegister = !this.isRegister;
			this.isCodeLogin = true;
			this.clearForm();
		},

		setIsCodeLogin(value) {
			this.isCodeLogin = value;
			this.clearForm();
		},

		clearForm() {
			this.phone = '';
			this.code = '';
			this.password = '';
			this.errors = {
				phone: '',
				code: '',
				password: ''
			};
		},

		showModal(title, message) {
			this.modalConfig.title = title;
			this.modalConfig.message = message;
			this.$refs.messageBox.open();
		},

		closeModal() {
			this.$refs.messageBox.close();
		},

		forgetPassword() {
			uni.navigateTo({
				url: '/pages/login/ResetPassword'
			});
		},

		async getUserInfo() {
			try {
				const res = await this.$u.get('/getInfo');
				if (res.code === 200) {
					uni.setStorageSync('userInfo', res.user);
					if (res.user.isAuthentication) {
						uni.redirectTo({
							url: '/pages/index/index'
						});
					} else {
						uni.redirectTo({
							url: '/pages/id-test/id-test'
						});
					}
				}
			} catch (error) {
				console.error('获取用户信息失败:', error);
			}
		}
	}
}
</script>



<style lang="scss">
.login-page {
	position: relative;
	width: 100%;
	height: 100vh;

	.page1 {
		position: relative;
		width: 100%;
		height: 100vh;
		background-image: url('https://lxnapi.ccttiot.com/bike/img/static/uWIMugXcD13DAIBbsXhI');
		background-size: cover;
		background-position: center;
		display: flex;
		flex-direction: column;

		.button-container {
			margin-top: 55vh;
			// margin-top: calc(100vh - 750rpx);
			padding: 0 68rpx;
			display: flex;
			flex-direction: column;
			gap: 32rpx;
		}

		.agreement-container {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20rpx;
			padding: 0 20rpx;

			.checkbox {
				padding: 10rpx;

				.checkbox-icon {
					margin-top: 6rpx;
					width: 32rpx;
					height: 32rpx;
				}
			}

			.agreement-text {
				font-size: 24rpx;
				color: #666;
				margin-left: 10rpx;

				.link {
					color: #4297F3;
				}
			}
		}

		.btn1 {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 108rpx;
			background: linear-gradient(90deg, #4297F3 0%, rgba(66, 151, 243, 0.66) 100%);
			border-radius: 54rpx;
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
		}

		.btn2 {
			width: 100%;
			height: 108rpx;
			border-radius: 54rpx;
			border: 2rpx solid #4297F3;
			font-weight: 500;
			font-size: 36rpx;
			color: #4297F3;
			background: transparent;
			display: flex;
			align-items: center;
			justify-content: center;

			&:disabled {
				opacity: 0.5;
				color: #999;
				border-color: #999;
			}
		}
	}

	.background-image {
		width: 750rpx;
		height: 472rpx;
	}

	.overlay {
		position: absolute;
		top: 400rpx;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 68rpx;
	}

	.container {
		border-radius: 16rpx;
		background-color: rgba(255, 255, 255, 0.9);
	}

	.tab-bar-box {
		margin-top: 42rpx;
		display: flex;
		flex-direction: row;
	}

	.tab-bar {
		width: 319rpx;
		height: 108rpx;
	}

	.tab-bar-1 {
		margin-left: -30rpx;
		width: 319rpx;
		height: 108rpx;
	}

	.input-box {
		padding-left: 36rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 68rpx;
		width: 614rpx;
		height: 108rpx;
		background-color: #EFEFEF;
		border-radius: 54rpx;
	}

	.input-icon {
		width: 38rpx;
		height: 38rpx;
	}

	.input {
		width: 500rpx;
		margin-left: 20rpx;
		background-color: transparent;
	}

	.input-2 {
		width: 350rpx;
		margin-left: 20rpx;
		background-color: transparent;
	}

	.get-code {
		width: 40%;
		font-weight: 400;
		font-size: 28rpx;
		color: #4297F3;
		padding: 0 30rpx;

		&.disabled {
			color: #999;
		}
	}

	.error-tip {
		margin-top: 10rpx;
		padding-left: 36rpx;
		font-size: 24rpx;
		color: #ff4d4f;
	}

	.login-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 68rpx;
		width: 614rpx;
		height: 108rpx;
		background-color: #4297F3;
		border-radius: 54rpx;

		&.disabled {
			opacity: 0.7;
		}
	}

	.login-txt {
		font-weight: 700;
		font-size: 36rpx;
		color: #FFFFFF;
	}

	.switch-mode {
		margin-top: 68rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.tip-txt {
		font-weight: 400;
		font-size: 32rpx;
		color: #3D3D3D;

		&.highlight {
			color: #4297F3;
		}
	}
}
</style>