<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" @click="showPasswordModeF">
							<view style="padding:20rpx"><u-icon :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" @click="showPasswordModeS">
							<view style="padding:20rpx"><u-icon :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>
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 = {};
			// 获取验证码接口
			uni.$u.http
				.post(`/yt/noauth/resetCode/${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({
					title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (this.password !== this.rePassword) return uni.$u.toast('两次输入密码不一致');
			let httpData = {
				password: this.password,
				phoneNumber: this.phone,
				userId: this.vCode
			};
			uni.$u.http
				.post(`/yt/noauth/reset/${this.phone}`, httpData)
				.then(res => {
					uni.showToast({
						title: '重置密码成功~',
						icon: 'none'
					}).then(res => {
						uni.reLaunch({
							url: '/pages/personal/personal'
						});
					});
				})
				.catch(err => {
					uni.showToast({
						title: err.data.msg,
						icon: 'none'
					});
					console.log(err.data.msg);
				});
		},
		showPasswordModeF() {
			this.showPasswordF = !this.showPasswordF;
		},
		showPasswordModeS() {
			this.showPasswordS = !this.showPasswordS;
		}
	}
};
</script>

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