<template>
	<view class="normal-login-container">
		<view class="logo-content align-center justify-center flex">
			<view class="logo-img"></view>
			<view class="title">作业管控智慧平台</view>
		</view>
		<view class="login-form-content">
			<view class="login-form">
				<view class="login-form-tab">
					<view class="login-tab" :class="{'active':selectTab==1}" @click="selectTab=1">密码登录</view>
					<view class="login-tab" :class="{'active':selectTab==2}" @click="selectTab=2">验证码登录</view>
				</view>
				<view class="login-box" v-if="selectTab==1">
					<u-form :model="loginForm" ref="uForm" :rules="rules">
						<u-form-item label="" prop="phone">
							<u--input class="login-input" placeholder="请输入您的手机号" border="surround" prefixIcon="account"
								v-model="loginForm.phone" save="false">
							</u--input>
						</u-form-item>
						<u-form-item label="" prop="pd">
							<u-input class="login-input" :type="isOpen?'text':'password'" placeholder="请输入密码"
								prefixIcon="lock" v-model="loginForm.pd" save="false" autocomplete="new-password">
								<template slot="suffix">
									<image @click="isOpen=!isOpen"
										style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 1;"
										:src="isOpen?'../static/images/design_ic_visibility.png':'../static/images/design_ic_visibility_off.png'">
									</image>
								</template>
							</u-input>
						</u-form-item>
						<view style="text-align: right;color: #00367a;float: right;font-size: 30rpx;" @click="restPas">
							忘记密码</view>
						<u-button class="loginBtn" style="margin-top: 70rpx;" @click="submit"
							color="#00367a">登录</u-button>
					</u-form>
				</view>
				<view class="login-box" v-show="selectTab==2">
					<u--form :model="loginForm0" ref="uForm0" :rules="rules0">
						<u-form-item label="" prop="phone">
							<u--input class="login-input" placeholder="请输入您的手机号" border="surround" prefixIcon="account"
								v-model="loginForm0.phone"></u--input>
						</u-form-item>
						<u-form-item label="" prop="code">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input prefixIcon="email" class="login-input" placeholder="验证码" border="surround"
								v-model="loginForm0.code">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode(2)" :text="tips" type="success" size="normal"
										style="margin: -6px 10px" color="#00367a"></u-button>
								</template>
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input prefixIcon="email" class="login-input" placeholder="验证码" border="surround"
								v-model="loginForm0.code">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode(2)" :text="tips" type="success" size="mini"
										color="#00367a"></u-button>
								</template>
							</u--input>
							<!-- #endif -->
						</u-form-item>

						<u-button class="loginBtn" style="margin-top: 30rpx;" @click="submit0"
							color="#00367a">登录</u-button>
					</u--form>
				</view>
			</view>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content">
					<u--form :model="restForm" ref="uForm3" :rules="rules3" labelWidth="60">
						<u-form-item label="手机号" prop="phone">
							<u--input class="login-input" placeholder="请输入您的手机号" border="surround" prefixIcon="account"
								v-model="restForm.phone" save="false"></u--input>
						</u-form-item>
						<u-form-item label="新密码" prop="password">
							<u-input class="login-input" :type="isOpen2?'text':'password'" placeholder="请输入密码"
								prefixIcon="lock" v-model="restForm.password" save="false" autocomplete="new-password">
								<template slot="suffix">
									<image @click="isOpen2=!isOpen2"
										style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
										:src="isOpen2?'../static/images/design_ic_visibility.png':'../static/images/design_ic_visibility_off.png'">
									</image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item label="新密码" prop="passwordA">
							<u-input class="login-input" :type="isOpen3?'text':'password'" placeholder="请再次输入密码"
								prefixIcon="lock" v-model="restForm.passwordA" save="false" autocomplete="new-password">
								<template slot="suffix">
									<image @click="isOpen3=!isOpen3"
										style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
										:src="isOpen3?'../static/images/design_ic_visibility.png':'../static/images/design_ic_visibility_off.png'">
									</image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item label="验证码" prop="code">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input prefixIcon="email" class="login-input" placeholder="验证码" border="surround"
								v-model="restForm.code">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode(3)" :text="tips" type="success" size="normal"
										style="margin: -6px 10px" color="#00367a"></u-button>
								</template>
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input prefixIcon="email" class="login-input" placeholder="验证码" border="surround"
								v-model="restForm.code">
								<template slot="suffix">
									<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<u-button @tap="getCode(3)" :text="tips" type="success" size="mini"
										color="#00367a"></u-button>
								</template>
							</u--input>
							<!-- #endif -->
						</u-form-item>
						<u-button class="loginBtn" style="margin-top: 70rpx;" @click="submit3"
							color="#00367a">确认</u-button>
					</u--form>
				</view>
			</uni-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		sendCodeByPhone,
		forgetPwdByApp
	} from "@/api/index.js"
	import {getDeleteUser} from "@/utils/auth.js"

	export default {
		data() {
			const equalToPassword = (rule, value, callback) => {
				if (this.restForm.password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			// 密码校验 长度不能小于8位且不能大于16位字符,必须包含大写字母、小写字母、数字和特殊符号
			var ISPWD =
				/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,16}$/;
			// 密码校验
			const validatePassword = (rule, value, callback) => {
				if (!ISPWD.test(this.restForm.password)) {
					callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
				} else {
					callback();
				}
			}
			return {
				// globalConfig: getApp().globalData.config,
				selectTab: 1,
				loginForm: {
					phone: 15856165378,
					pd: 'YNsbd@123456',//YNsbd@123456
				},
				loginForm0: {
					phone:  this.$store.state.user.phone,
					code: ""
				},
				restForm: {
					phone: "",
					password: "",
					passwordA: "",
					code: ""
				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					pd: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				rules0: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
				},
				rules3: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],

					code: [{
						required: true,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					password: [{
							required: true,
							trigger: "blur",
							message: "请输入您的密码"
						},
						{
							min: 8,
							max: 16,
							message: '用户密码长度必须介于 8 和 16 之间',
							trigger: 'blur'
						},
						{
							required: true,
							validator: validatePassword,
							trigger: 'blur'
						}
					],
					passwordA: [{
							required: true,
							message: '请再次输入新密码',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							validator: equalToPassword,
							trigger: "blur"
						}
					]
				},
				tips: '',
				type: 'center',
				isOpen: false,
				isOpen2: false,
				isOpen3: false,
			}
		},
		created() {},
		methods: {

			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			restPas() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(this.type)
			},
			// // 登录方法
			// async handleLogin() {
			// 	if (this.loginForm.username === "") {
			// 		this.$modal.msgError("请输入您的账号")
			// 	} else if (this.loginForm.password === "") {
			// 		this.$modal.msgError("请输入您的密码")
			// 	} else if (this.loginForm.code === "") {
			// 		this.$modal.msgError("请输入验证码")
			// 	} else {
			// 		this.$modal.loading("登录中，请耐心等待...")
			// 		this.pwdLogin()
			// 	}
			// },
			// // 密码登录
			// async pwdLogin() {
			// 	this.$store.dispatch('Login', this.loginForm).then(() => {
			// 		this.$modal.closeLoading()
			// 		this.loginSuccess()
			// 	}).catch(() => {})
			// },
			// // 登录成功后，处理函数
			// loginSuccess(result) {
			// 	// 设置用户信息
			// 	this.$store.dispatch('GetInfo').then(res => {
			// 		this.$tab.reLaunch('/pages/index')
			// 	})
			// },
			codeChange(text) {
				this.tips = text;
			},
			getCode(type) {
				if ((type == 2 && this.loginForm0.phone == '') || (type == 3 && this.restForm.phone == '')) {
					uni.$u.toast('请输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					let params = {
						type: type
					}
					if (type == 2) {
						params.phone = this.loginForm0.phone
					} else {
						params.phone = this.restForm.phone
					}
					sendCodeByPhone(params).then(response => {
						uni.hideLoading();
						if (response.code == 200) {
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.$u.toast('验证码发送失败');
						}
					});
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			submit() {
				var user=getDeleteUser()||[]
				if(user.includes(this.loginForm.phone)){
					uni.$u.toast("该账号已注销")
					return
				}
				this.$refs.uForm.validate().then(res => {
					this.$store.dispatch('Login', this.loginForm).then((res) => {
						console.log(res)
						if (res.code == 200) {
							this.isLogin = true
							uni.reLaunch({
								url: "/pages/gzt/index"
							})
						} else {
							uni.$u.toast(res.msg)
							this.isLogin = false
						}
					}).catch(err => {
						uni.$u.toast("登录失败")
						this.$store.dispatch('LogOut').then(() => {
							console.log(err)
							uni.showToast({
								title: err,
								icon: "none"
							})
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			submit0() {
				var user=getDeleteUser()||[]
				if(user.includes(this.loginForm.phone)){
					uni.$u.toast("该账号已注销")
					return
				}
				// console.log(this.loginForm0)
				this.$refs.uForm0.validate().then(res => {
					this.$store.dispatch('LoginCode', this.loginForm0).then((res) => {
						console.log(res)
						if (res.code == 200) {
							this.isLogin = true
							uni.switchTab({
								url: "/pages/gzt/index"
							})
						} else {
							uni.$u.toast(res.msg)
							this.isLogin = false
						}
					}).catch(err => {
						uni.$u.toast("登录失败")
						this.$store.dispatch('LogOut').then(() => {
							console.log(err)
							uni.showToast({
								title: err,
								icon: "none"
							})
						})
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			submit3() {
				let _this = this
				this.$refs.uForm3.validate().then(res => {
					let form = {
						phone: this.restForm.phone,
						pd: this.restForm.password,
						code: this.restForm.code,
						type: 3
					}
					forgetPwdByApp(form).then(res => {
						if (res.code == 200) {
							this.closePwd()
							this.$refs.uToast.show({
								type: 'success',
								message: "密码修改成功",
							})
							// setTimeout(_this.logout(), 50000);
						} else {
							uni.$u.toast(res.msg)
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			closePwd() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.close("center")
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 750rpx;
		background-color: #fff;
		max-width: 600rpx;
	}

	.normal-login-container {
		width: 100%;
		height: 100vh;
		background: linear-gradient(to bottom, #00367a 70%, #fff 30%);
		background-size: 100% 100%;

		.logo-content {
			width: 100%;
			font-size: 40rpx;
			font-weight: 600;
			padding-top: 20%;
			padding-bottom: 20%;
			letter-spacing: 8rpx;
			color: #fff;

			.title {
				text-align: center;
				padding-top: 50rpx;
			}

			.logo-img {
				background-image: url("../static/images/logo.png");
				width: 150rpx;
				height: 150rpx;
				background-size: 100%;
				margin: auto;
			}
		}

		.login-form-content {
			background-color: #fff;
			border-top-left-radius: 100rpx;
			width: 100%;

			.login-form {
				padding: 60rpx 60rpx 20rpx 60rpx;

				.login-form-tab {
					display: flex;
					justify-content: space-around;
					font-size: 35rpx;
					color: rgb(150, 150, 150);

					.login-tab {
						width: 200rpx;
						text-align: center;
					}

					.active {
						color: #00367a;
						padding-bottom: 10rpx;
						border-bottom: 5rpx solid #00367a;
					}
				}

				.login-box {
					width: 85%;
					margin: 30rpx auto;
				}
			}

		}
	}
</style>
