<template>
	<view class="find-password-page">
		<public-module></public-module>
		<view class="top u-flex">
			<view @click="showPhone" :style="{ color: phoneNumberColor }" class="item">1.{{ $t('login.verifyPhone') }}</view>
			<view :style="{ color: passwordColor }" class="item">2.{{ $t('login.settingsNewPassword') }}</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="$t('login.PleaseEnterPhone')" border="bottom" />
				</view>
				<view class="form-row">
					<u-input type="number" v-model="forgetForm.verifyCode" :placeholder="$t('login.PleaseEnterCode')" 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">{{ $t('login.nextStep') }}</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="$t('login.pleaseSettingsPassword')" 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="$t('login.pleaseNewPassword')" 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">{{ $t('common.confirm') }}</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'
			}
		},
		onShow(){
			this.$nextTick(()=>{
				uni.setNavigationBarTitle({
					title:this.$t('menu.forgotPassword')
				})
			})
		},
		onLoad(){
			this.codeText = this.$t('login.sendCode')
		},
		methods: {
			//验证码按钮文字状态
			verifyCodeCountDown() {
				const _this = this;
				this.readonly = true;
				this.codeText = this.$t('login.codeAfterSeconds',{number:60});
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = this.$t('login.codeAfterSeconds',{number:s});
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = this.$t('login.sendCode');
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			getVerifyCode() {
				const phoneRegular = /^1\d{10}$/;
				if (this.readonly) {
					useShowToast(this.$t('login.codeBeenSend'))
				}
				if (!this.forgetForm.phone) {
					return useShowToast(this.$t('login.PleaseEnterPhone'))
				}
				if (!phoneRegular.test(this.forgetForm.phone)) {
					return useShowToast(this.$t('login.phoneFormatFail'))
				}
				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(this.$t('login.PleaseEnterPhone'));
				if(!validateValue[1]) return uni.$u.toast(this.$t('login.PleaseEnterCode'));
				if(!phoneRegular.test(validateValue[0])) return uni.$u.toast(this.$t('login.phoneFormatFail'));
				if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast(this.$t('login.codeFormatFail'));
				this.nextStatus = true;
			},
			showPhone() {
				this.nextStatus = false;
			},
			onSubmit() {
				const validateValue = Object.values(this.forgetForm)
				if(!validateValue[2]) return uni.$u.toast(this.$t('login.pleasePassword'));
				if(!validateValue[3]) return uni.$u.toast(this.$t('login.pleasePassword'));
				if(!loginPasswordReg.test(validateValue[2])) return useShowModal(this.$t('login.passwordRule'))
				if(!loginPasswordReg.test(validateValue[3])) return useShowModal(this.$t('login.passwordRule'))
				if (validateValue[2] !== validateValue[3]) return uni.$u.toast(this.$t('login.twoPasswordFail'));
				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(this.$t('login.resetPasswordSuccess')).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>