<template>
	<view class="find-password-page">
		<public-module></public-module>
		<view class="top u-flex">
			<view @click="showPhone" :style="{ color: phoneNumberColor }" class="item">1.验证手机号码</view>
			<view :style="{ color: passwordColor }" class="item">2.设置新密码</view>
		</view>
		<view v-if="!nextStatus" class="login-body">
			<view class="login-phone">
				<view class="form-row">
					<u-input v-model="forgetForm.phone" type="number" placeholder="请输入手机号码" border="bottom" />
				</view>
				<view class="form-row">
					<u-input type="number" v-model="forgetForm.verifyCode" placeholder="请输入验证码" border="bottom">
						<template slot="suffix">
							<view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
						</template>
					</u-input>
				</view>
				<button class="submit" size="default" @click="onNextSubmit"><text style="color:#fff">下一步</text></button>
			</view>
		</view>
		<view v-else class="login-body">
			<view class="login-phone">
				<view class="form-row u-flex">
					<u-input v-model="forgetForm.password" :password="showPassword" placeholder="请设置6-20位新的登录密码" border="bottom">
						<template slot="suffix">
							<view @click="showPasswordMode" style="padding: 10rpx">
								<u-icon width="18" height="14" :name="passwordModeIcon"></u-icon>
							</view>
						</template>
					</u-input>
				</view>
				<view class="form-row u-flex">
					<u-input v-model="forgetForm.repeatPassword" :password="showPasswordRepeat" placeholder="请再次输入新的登录密码" border="bottom">
						<template slot="suffix">
							<view @click="showPasswordModeRepeat" style="padding: 10rpx">
								<u-icon width="18" height="14" :name="passwordModeRepeatIcon"></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'
	import { loginPasswordReg } from '@/plugins/utils.js'
	import { useShowToast,useShowModal,useReLaunch } from '@/plugins/utils.js'

	var clear;
	export default {
		data() {
			return {
				forgetForm:{
					phone: '',
					verifyCode: '', 
					password: '',
					repeatPassword: '',
				},
				readonly: false,
				codeText: '发送验证码',
				nextStatus: false,
				showPassword: true,
				showPasswordRepeat: true
			};
		},
		computed:{
			phoneNumberColor(){
				return !this.nextStatus ? '#0079fe' : ''
			},
			passwordColor(){
				return  !this.nextStatus ? '' : '#0079fe'
			},
			passwordModeIcon(){
				return this.showPassword ? '/static/eye-hide.png' : '/static/eye.png'
			},
			passwordModeRepeatIcon(){
				return this.showPasswordRepeat ? '/static/eye-hide.png' : '/static/eye.png'
			}
		},
		methods: {
			//验证码按钮文字状态
			verifyCodeCountDown() {
				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);
			},
			//获取验证码
			getVerifyCode() {
				const phoneRegular = /^1\d{10}$/;
				if (this.readonly) {
					useShowToast('验证码已发送~')
				}
				console.log(this.forgetForm.phone);
				if (!this.forgetForm.phone) {
					return useShowToast('请输入手机号~')
				}
				if (!phoneRegular.test(this.forgetForm.phone)) {
					return useShowToast('手机号格式不正确~')
				}
				api.loginApi.postCodeApi(this.forgetForm.phone)
					.then(res => {
						this.verifyCodeCountDown(); //开始倒计时
					})
			},
			onNextSubmit() {
				const phoneRegular = /^1\d{10}$/;
				const verifyCodeReg=/^\d{6}$/;
				const validateValue = Object.values(this.forgetForm)
				if(!validateValue[0]) return uni.$u.toast("请输入手机号码~");
				if(!validateValue[1]) return uni.$u.toast("请输入验证码~");
				if(!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
				if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
				this.nextStatus = true;
			},
			showPhone() {
				this.nextStatus = false;
			},
			onSubmit() {
				const validateValue = Object.values(this.forgetForm)
				if(!validateValue[2]) return uni.$u.toast("请输入密码~");
				if(!validateValue[3]) return uni.$u.toast("请输入密码~");
				if(!loginPasswordReg.test(validateValue[2])) return useShowModal('密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~')
				if(!loginPasswordReg.test(validateValue[3])) return useShowModal('密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~')
				if (validateValue[2] !== validateValue[3]) return uni.$u.toast('两次输入密码不一致');
				let httpData = {
					password: this.forgetForm.password,
					phoneNumber: this.forgetForm.phone,
					userId: this.forgetForm.verifyCode
				};
				const res = api.loginApi.postResetCodeApi(this.forgetForm.phone, httpData)
				if (res) {
					useShowToast( '重置密码成功~').then(res => {
						useReLaunch('/publicLoginSubPage/public/login')
					});
				}
			},
			showPasswordMode() {
				this.showPassword = !this.showPassword;
			},
			showPasswordModeRepeat() {
				this.showPasswordRepeat = !this.showPasswordRepeat;
			}
		}
	};
</script>

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