<template>
	<view class="page">
		<view class="fixed">
			<u-navbar title="登录" :border-bottom="false" :background="background" title-color='#000' title-size='36'
				back-icon-color='#000' height='45'></u-navbar>
		</view>
		<!-- <u-navbar :is-back="false" :title="tittxt" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45' >
			
		</u-navbar> -->
		<!-- <view class="pages1" v-if="deptId==100">
			<view class="imgbox">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uzg30jo8Mx7lgaRHFyiO" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"   >
				授权登录
			</button>
		
		</view> -->
		<view class="pages2" v-if="deptId==100&&pageindex==0">
			<view class="imgbox">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/umJTSzDVtnfpyYrZY0VJ" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				style="margin-top: 30rpx;">
				<!-- <image src="https://lxnapi.ccttiot.com/bike/img/static/uka0jHcbyy1we0qwbiov" mode=""></image> -->
				快捷登录
			</button>
			<!-- <view class="button" style="margin-top: 20rpx;" @click="pageindex=1">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ubSJ6aNMOUfPf80iotGv" mode=""></image>
				验证码登录
			</view> -->
			<view class="tipss"  @click="pageindex=1" style="width: 100%;text-align: center;margin-top: 50rpx;color: #ccc;">
				验证码登录
			</view>
			<!-- 	<view class="button1"  @click="back">
				取消登录
			</view> -->
		</view>
		<view class="page3" v-if="pageindex == 1">
			<view class="tit">
				登录
			</view>
			<view class="tipsss" style="color: red;margin-top: 30rpx;">
				内测功能，押金充值无法使用，用户请使用快捷登录
			</view>
			<view class="tit_li" style="margin-top: 104rpx;">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u3swF9YhZbUCuhGmrMrk" mode=""></image>
				手机号
			</view>
			<view class="ipt">
				<input type="number" class="ips" v-model="phone" placeholder="请输入您的手机号"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="tit_li">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ujOHD0RFCsOWAprtYLzj" mode=""
					style="width: 50rpx;height: 54rpx;margin-right: 26rpx;"></image>
				验证码
			</view>
			<view class="ipt">
				<input type="number" class="ips" v-model="phoneCode" placeholder="请输入验证码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' style="width: 60%;" />
				<view class="send_code" :class="{ disabled: isCodeButtonDisabled }" @click="getcode()">
					{{ codeButtonText }}
				</view>
			</view>
			<view class="tit_li">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYkqUlpkl5VuksJhaPlW" mode=""
					style="width: rpx;height: 54rpx;margin-right: 26rpx;"></image>
				密码
			</view>
			<view class="ipt">
				<input class="ips" v-model="password" placeholder="请输入密码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="sub_btn" @click="sub1()"  :style="{ background: isSubButtonActive ? '#64B6A8' : '' }">
				注册并登录
			</view>
			<view class="tips">
				已有帐号？<span @click="page2()">立即登录</span>
			</view>
			<view class="line_box">
				<view class="lines"></view>
				其他登录方式
				<view class="lines"></view>
			</view>
			<view class="wxbtn">
				<image @click="towx()" src="https://lxnapi.ccttiot.com/bike/img/static/uUCvpOwGG8McfpYSUye4" mode="">
				</image>
			</view>
		</view>
		<view class="page3" v-if="pageindex==2">
			<view class="tit">
				登录
			</view>
			<view class="tit_li" style="margin-top: 104rpx;">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u3swF9YhZbUCuhGmrMrk" mode=""></image>
				手机号
			</view>
			<view class="ipt">

				<input type="number" class="ips" v-model="phone1" placeholder=" 请输入您的手机号"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>

			<view class="tit_li">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYkqUlpkl5VuksJhaPlW" mode=""
					style="width: rpx;height: 54rpx;margin-right: 26rpx;"></image>
				密码
			</view>
			<view class="ipt">

				<input type="number" class="ips" v-model="password1" placeholder=" 请输入密码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="tipss">
				<view class="">

				</view>
				<span @click="page3">忘记密码</span>
			</view>
			<view class="sub_btn" :style="{ background: isSubButtonActive1 ? '#64B6A8' : '' }" @click="sub2()">
				登录
			</view>
			<view class="tips">
				没有账号？<span @click="page1()">立即注册</span>
			</view>
			<view class="line_box">
				<view class="lines"></view>
				其他登录方式
				<view class="lines"></view>
			</view>
			<view class="wxbtn">
				<image @click="towx()" src="https://lxnapi.ccttiot.com/bike/img/static/uUCvpOwGG8McfpYSUye4" mode="">
				</image>
			</view>

		</view>
		<view class="page3" v-if="pageindex==3">
			
			<view class="tit_li" style="margin-top: 104rpx;">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u3swF9YhZbUCuhGmrMrk" mode=""></image>
				手机号
			</view>
			<view class="ipt">
		
				<input type="number" class="ips" v-model="phone2" placeholder=" 请输入您的手机号"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="tit_li">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/ujOHD0RFCsOWAprtYLzj" mode=""
					style="width: 50rpx;height: 54rpx;margin-right: 26rpx;"></image>
				验证码
			</view>
			<view class="ipt">
				<input type="number" class="ips" v-model="phoneCode2" placeholder="请输入验证码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' style="width: 60%;" />
				<view class="send_code" :class="{ disabled: isCodeButtonDisabled2 }" @click="getcode2()">
					{{ codeButtonText2 }}
				</view>
			</view>
			<view class="tit_li">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYkqUlpkl5VuksJhaPlW" mode=""
					style="width: rpx;height: 54rpx;margin-right: 26rpx;"></image>
				新密码
			</view>
			<view class="ipt">
		
				<input type="number" class="ips" v-model="password2" placeholder=" 请输入新密码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="tit_li" >
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uYkqUlpkl5VuksJhaPlW" mode=""
					style="width: rpx;height: 54rpx;margin-right: 26rpx;"></image>
				确认密码
			</view>
			<view class="ipt">
					
				<input type="number" class="ips" v-model="subpassword2" placeholder=" 请再次输入密码"
					placeholder-style='font-weight: 400;font-size: 36rpx;color: #808080;' />
			</view>
			<view class="tipss">
				<view class="">
		
				</view>
				
			</view>
			<view class="sub_btn" :style="{ background: isSubButtonActive2 ? '#64B6A8' : '' }" @click="sub3()">
				确定
			</view>
			
			
			
		
		</view>
		<view class="pages2" v-if="deptId==101">
			<view class="imgbox">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uX6A5Dlyr4lvGFNuqfPK" mode=""></image>
			</view>
			<button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				授权登录
			</button>
			<!-- 	<view class="button1"  @click="back">
				取消登录
			</view> -->
		</view>
		<!-- <view class="tip">
			<image src="https://api.ccttiot.com/smartmeter/img/static/u4LEl3cUFgF9uN30ESnF" mode=""></image>
			我已同意并阅读《服务条款》《法律条款及隐私政策》
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				tittxt: "登录",
				chooseType: true,
				usertype: '',
				login: false,
				deptId: '',
				pageindex: 0,
				phone: '',
				phoneCode: '',
				password: '',
				isCodeButtonDisabled: false,
				codeButtonText: '获取验证码',
				countdown: 60,
				uuid: '',
				isSubButtonActive: false,
				isSubButtonActive1: false,
				isSubButtonActive2:false,
				phone1:'',
				password1:'',
				interval:null,
				phone2:'',
				phoneCode2:'',
				password2:'',
				subpassword2:'',
				isCodeButtonDisabled2: false,
				codeButtonText2: '获取验证码',
				countdown2: 60,
				openCode:null,
				isindex:false,
				areaId:'16'
			}
		},
		onLoad(e) {
			this.deptId = uni.getStorageSync('deptId');
				
				
			if(e.isindex=='true'){
				this.isindex=true
			}
			
			// this.deptId = 101
		},
		computed: {
			codeButtonStyle() {
				return this.isCodeButtonDisabled ? 'background: #979797;' : '';
			},
			
		},
		onShow() {
			if( uni.getStorageSync('areaId')){
				this.areaId = uni.getStorageSync('areaId');
			}
			wx.login({
			    success(res) {
			        if (res.code) {
			          this.openCode=res.code
					  console.log(this.openCode,'this.openCodethis.openCode');
			        }
			    },
			});
		},
		watch: {
			phone() {
				this.checkInputFields();
			},
			phoneCode() {
				this.checkInputFields();
			},
			password() {
				this.checkInputFields();
			},
			phone1(){
				this.checkInputFields1();
			},
			password1() {
				this.checkInputFields1();
			},
			
			phone2(){
				this.checkInputFields2();
			},
			phoneCode2() {
				this.checkInputFields2();
			},
			password2(){
				this.checkInputFields2();
			},
			subpassword2() {
				this.checkInputFields2();
			},
		},
		methods: {
			page3(){
				this.pageindex=3
				this.phone1=''
				this.password1=''
			},
			page1(){
				// clearInterval(this.interval)
				this.pageindex=1
				this.phone1=''
				
				this.password1=''
			},
			page2(){
				// clearInterval(this.interval)
				this.pageindex=2
				this.phone=''
				this.phoneCode=''
				this.password=''
			},
			sub3(){
				if (!this.phone2 || !this.phoneCode2|| !this.password2|| !this.subpassword2) {
				
					uni.showToast({
						title: '请完整填写信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.validatePhone(this.phone2)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (this.subpassword2 != this.password2) {
				
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.$u.put("/app/forgetAppPwd?phone="+this.phone2+'&newPassword='+this.password2+'&phoneCode='+this.phoneCode2+'&uuid='+this.uuid).then((res) => {
					if (res.code == 200) {
						// 登录成功后的操作
						this.pageindex=2
						this.phone2=''
						this.phoneCode2=''
						this.uuid=''
						this.password2=''
						this.subpassword2=''
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			// 密码登录
			sub2(){
				if (!this.phone1 || !this.password1) {
				
					uni.showToast({
						title: '请完整填写信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.validatePhone(this.phone1)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// let areaId = uni.getStorageSync('areaId');
				let data = {
					phone: this.phone1,
					password: this.password1,
					areaId: this.areaId,
					
					
				}
				this.$u.post("/appCodeLogin", data).then((res) => {
					if (res.code == 200) {
						// 登录成功后的操作
						wx.setStorageSync('token', res.token);
						this.ceshi()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			checkInputFields2() {
				if (this.phone2&& this.phoneCode2 && this.password2&&this.subpassword2) {
					this.isSubButtonActive2 = true;
				} else {
					this.isSubButtonActive2 = false;
				}
			},
			checkInputFields1() {
				if (this.phone1 && this.password1) {
					this.isSubButtonActive1 = true;
				} else {
					this.isSubButtonActive1 = false;
				}
			},
			checkInputFields() {
				if (this.phone && this.phoneCode && this.password) {
					this.isSubButtonActive = true;
				} else {
					this.isSubButtonActive = false;
				}
			},
			validatePhone(phone) {
				const phoneRegex = /^1[3-9]\d{9}$/;
				return phoneRegex.test(phone);
			},
			getcode() {
				if (this.isCodeButtonDisabled) return;
				if (!this.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.validatePhone(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.isCodeButtonDisabled = true;
				this.$u.get("/appCaptcha?type=1&phone=" + this.phone).then((res) => {
					if (res.code == 200) {
						this.uuid = res.uuid
						this.startCountdown();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.isCodeButtonDisabled = false;
					}
				});
			},
			getcode2() {
				if (this.isCodeButtonDisabled) return;
				if (!this.phone2) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.validatePhone(this.phone2)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.isCodeButtonDisabled2 = true;
				this.$u.get("/appCaptcha?type=1&phone=" + this.phone2).then((res) => {
					if (res.code == 200) {
						this.uuid = res.uuid
						this.startCountdown2();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
						this.isCodeButtonDisabled2 = false;
					}
				});
			},
			startCountdown2() {
				this.codeButtonText2 = `${this.countdown}秒后重发`;
				 const interval = setInterval(() => {
					this.countdown2--;
					if (this.countdown2 <= 0) {
						clearInterval(interval);
						this.codeButtonText2 = '获取验证码';
						this.isCodeButtonDisabled2 = false;
						this.countdown2 = 60;
					} else {
						this.codeButtonText2 = `${this.countdown2}秒后重发`;
					}
				}, 1000);
			},
			startCountdown() {
				this.codeButtonText = `${this.countdown}秒后重发`;
				 this.interval = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(interval);
						this.codeButtonText = '获取验证码';
						this.isCodeButtonDisabled = false;
						this.countdown = 60;
					} else {
						this.codeButtonText = `${this.countdown}秒后重发`;
					}
				}, 1000);
			},
			sub1() {
				if (!this.phone || !this.phoneCode || !this.password) {

					uni.showToast({
						title: '请完整填写信息',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if (!this.validatePhone(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				// let areaId = uni.getStorageSync('areaId');
				let data = {
					phone: this.phone,
					password: this.password,
					areaId:  this.areaId,
					phoneCode: this.phoneCode,
					uuid: this.uuid,
					openid:this.openCode
				}
				this.$u.post("/appCodeLogin", data).then((res) => {
					if (res.code == 200) {
						// 登录成功后的操作
						wx.setStorageSync('token', res.token);
						this.ceshi()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			towx() {
				console.log('dianjile ');
				this.pageindex = 0
			},
			userType(num) {
				this.chooseType = false
				this.login = true
				if (num == 1) {
					this.usertype = '01'
				} else {
					this.usertype = '00'
				}
			},
			back() {
				uni.navigateBack({
					delta: 1 // delta值为1时表示返回的页面层数
				});
			},
			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) => {
						// let areaId = uni.getStorageSync('areaId');
						this.$u.post("/wxlogin?mobileCode=" + data.mobileCode + '&jsCode=' + data.jscode +
							'&areaId=' +  this.areaId).then((res) => {




							// this.$forceUpdate()
							if (res.code == 200) {
								console.log(res, 'resres');
								wx.setStorageSync('token', res.token);
								that.ceshi()
								// uni.switchTab({
								// 	url: '/pages/index/index'
								// })
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 2000
								});
							}
						});

					})
					.catch((err) => {
						console.error(err);
					});
			},
			async ceshi() {
				this.$u.get("/getAppInfo").then((res) => {
					console.log('进入跳转');
					if(this.isindex==true){
						uni.navigateBack({
							delta: 1 // delta值为1时表示返回的页面层数
						});
					}else{
						uni.navigateTo({
							url: '/pages/index/index'
						})
					}
				
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF;
	}

	.page {
		position: relative;

		/* 添加相对定位 */
		.fixed {
			z-index: 999;
			position: fixed;
			top: 0;
		}

		.page3 {

			padding: 200rpx 60rpx 0 60rpx;

			.tipss {
				margin-top: 42rpx;
				padding-right: 30rpx;
				width: 620rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 28rpx;
				color: #64B6A8;
			}

			.line_box {
				.lines {
					width: 162rpx;
					height: 0rpx;
					border: 1rpx solid #D8D8D8;
				}

				margin-top: 134rpx;
				width: 620rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				justify-content: space-between;
				font-weight: 400;
				font-size: 32rpx;
				color: #808080;
			}

			.wxbtn {

				width: 100%;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					height: 64rpx;
					width: 64rpx;
				}

			}

			.tips {
				width: 258rpx;
				margin: 0 auto;
				font-weight: 400;
				font-size: 28rpx;
				color: #50565A;

				span {
					text-decoration: underline;
					text-underline-offset: 4rpx;
					color: #64B6A8;
				}
			}

			.sub_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 80rpx auto 52rpx;
				width: 620rpx;
				height: 92rpx;
				background: rgba(100, 182, 168, 0.5);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}

			.tit {
				width: 145rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: 500;
				font-size: 72rpx;
				color: #3D3D3D;
				color: #3D3D3D;

				background: linear-gradient(0deg, #64B6A8 0.1%, rgba(255, 255, 255, 0) 30%), #FFFFFF;
			}

			.tit_li {
				margin-top: 42rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				font-weight: 500;
				font-size: 32rpx;
				color: #64B6A8;

				image {
					margin-right: 30rpx;
					width: 37rpx;
					height: 56rpx;
				}
			}

			.ipt {
				padding-left: 8rpx;
				margin-top: 42rpx;
				width: 599rpx;
				height: 80rpx;
				background: #fff;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border-bottom: 1rpx solid #D8D8D8;
				display: flex;
				align-items: center;
				justify-content: center;

				.send_code {
					margin-left: auto;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 158rpx;
					height: 58rpx;
					background: #64B6A8;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
				}

				.disabled {
					pointer-events: none;
					opacity: 0.6;
					background: #979797;
				}

				.ips {
					width: 100%;
				}
			}
		}

		.pages1 {
			.imgbox {
				margin-top: 0rpx;
				width: 750rpx;
				height: 734rpx;
				z-index: 0;

				image {
					width: 750rpx;
					height: 734rpx;
				}
			}

			.button {
				margin-top: 200rpx;
				width: 586rpx;
				height: 90rpx;
				background: #4C97E7;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
			}

			.button1 {
				margin: 72rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 586rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 4rpx solid #4C97E7;
				font-weight: 500;
				font-size: 40rpx;
				color: #4C97E7;
			}
		}

		.pages2 {
			.imgbox {
				margin-top: 0rpx;
				width: 750rpx;
				height: 1274rpx;
				z-index: 0;

				image {
					width: 750rpx;
					height: 1274rpx;
				}
			}

			.button {
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 100rpx;
				width: 586rpx;
				height: 90rpx;
				background: #64B6A8;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;

				image {
					margin-right: 10rpx;
					width: 56rpx;
					height: 46rpx;
				}
			}

			.button1 {
				margin: 72rpx auto;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 586rpx;
				height: 90rpx;
				background: #fff;
				border-radius: 54rpx 54rpx 54rpx 54rpx;
				border: 4rpx solid #4C97E7;
				font-weight: 500;
				font-size: 40rpx;
				color: #4C97E7;
			}
		}

	}

	.tip {
		margin-top: 128rpx;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #979797;

		image {
			width: 26rpx;
			height: 26rpx;
		}
	}
</style>