<template>
	<view class="find-password-page">
		<public-module></public-module>
		<view class="top u-flex">
			<view @click="showPhone" :style="{ color: !nextStatus ? '#0079fe' : '' }" class="item">1.验证手机号码</view>
			<view :style="{ color: !nextStatus ? '' : '#0079fe' }" class="item">2.设置新密码</view>
		</view>
		<view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
			<view class="loginPhone">
				<view class="form-row">
					<u-input v-model="phone" type="number" placeholder="请输入手机号码" border="bottom" />
				</view>
				<view class="form-row">
					<u-input type="number" v-model="vCode" placeholder="请输入验证码" border="bottom">
						<template slot="suffix">
							<view @click="getVcode" class="getvcode">{{ codeText }}</view>
						</template>
					</u-input>
				</view>
				<button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
			</view>
		</view>
		<view v-else style="margin-top: 40rpx;" class="f__login">
			<view class="loginPhone">
				<view class="form-row u-flex">
					<u-input v-model="password" :password="showPasswordF" placeholder="请设置6-20位新的登录密码" border="bottom">
						<template slot="suffix">
							<view @click="showPasswordMode" style="padding: 10rpx">
								<u-icon width="18" height="14" :name="
						  showPasswordF ? '/static/eye-hide.png' : '/static/eye.png'
						"></u-icon>
							</view>
						</template>
					</u-input>
				</view>
				<view class="form-row u-flex">
					<u-input v-model="rePassword" :password="showPasswordS" placeholder="请再次输入新的登录密码" border="bottom">
						<template slot="suffix">
							<view @click="showPasswordModeS" style="padding: 10rpx">
								<u-icon width="18" height="14" :name="
						  showPasswordS ? '/static/eye-hide.png' : '/static/eye.png'
						"></u-icon>
							</view>
						</template>
					</u-input>
				</view>
				<button class="submit" size="default" @click="onSubmit"><text style="color:#fff">确定</text></button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index.js'

	var clear;
	export default {
		data() {
			return {
				readonly: false,
				codeText: '发送验证码',
				phone: '', //号码
				vCode: '', //验证码
				nextStatus: false,
				password: '',
				rePassword: '',
				showPasswordF: true,
				showPasswordS: true
			};
		},
		methods: {
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60s后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 's后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '发送验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			getVcode() {
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送~',
						icon: 'none'
					});
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					});
					return;
				}
				const phoneRegular = /^1\d{10}$/;
				if (!phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				let httpData = {};
				// 获取验证码接口
				api.loginApi.postCodeApi(this.phone)
					.then(res => {
						this.getCodeState(); //开始倒计时
					})
					.catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none'
						});
					});
			},
			onNextSubmit() {
				const phoneRegular = /^1\d{10}$/;
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号码~',
						icon: 'none'
					});
					return;
				} else if (!phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				if (this.vCode == '') {
					uni.showToast({
						title: '请输入验证码~',
						icon: 'none'
					});
					return;
				} else if (!/^\d{6}$/.test(this.vCode)) {
					uni.showToast({
						title: '验证码格式不正确~',
						icon: 'none'
					});
					return;
				}
				this.nextStatus = true;
			},
			showPhone() {
				this.nextStatus = false;
			},
			onSubmit() {
				const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
				if (this.password == '' && this.rePassword == '') {
					uni.showToast({
						title: '请输入密码~',
						icon: 'none'
					});
					return;
				} else if (!passReg.test(this.password) && !passReg.test(this.rePassword)) {
					//uni.showToast，字数过长，会造成手机上显示不完全，官方bug，采用uni.showModal
					uni.showModal({
						title: '提示',
						content: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
						showCancel: false
					});
					return;
				}
				if (this.password !== this.rePassword) return uni.$u.toast('两次输入密码不一致');
				let httpData = {
					password: this.password,
					phoneNumber: this.phone,
					userId: this.vCode
				};
				const res = api.loginApi.postResetCodeApi(this.phone, httpData)
				if (res) {
					uni.showToast({
						title: '重置密码成功~',
						icon: 'none'
					}).then(res => {
						uni.reLaunch({
							url: '/publicLoginSubPage/public/login'
						});
					});
				}
			},
			showPasswordMode() {
				this.showPasswordF = !this.showPasswordF;
			},
			showPasswordModeS() {
				this.showPasswordS = !this.showPasswordS;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import './static/findPassword.scss';
</style>