<template>
	<view class="forget">
		<view class="phone">
			手机号：	{{phoneFilter(userInfo.user_name)}}
		</view>
		<view class="codeBox">
			<jl-input type="number" v-model="code" placeholder="请输入验证码"></jl-input>
			<view v-if="action === 'can'" class="code" @click="getCode">
				获取验证码
			</view>
			<view v-else-if="action === 'wait'" class="code">
				获取验证码({{codeint}}s)
			</view>
			<view v-else-if="action === 'sending'" class="code">
				发送中...
			</view>
		</view>
		<jl-input type="number" :maxlength="maxlength" v-model="password" placeholder="请输入六位数字密码" @confirm="regPassword" showPassword clearable></jl-input>
		<jl-input type="number" :maxlength="maxlength" v-model="newPassword" placeholder="请再次输入六位数字密码" @confirm="regNewPassword" showPassword clearable></jl-input>
		<view v-if="error" class="error">两次密码输入不一致，请重新输入</view>
		<view class="btn">
			<view v-if="loading" class="bottombtn nocheck">提交中</view>
			<view v-else-if="!validate" class="bottombtn nocheck">确认</view>
			<view v-else @click="submit" class="bottombtn">确认</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	import {
		phoneFilter
	} from '@/untils/format.js'
	import jlInput from '@/components/jl-input/main.vue'
	import {sendValidate, resetPass} from '@/api/auth.js'
	import {
		forgetPW,
		accountsendValidate,
		getCaptcha,
		validateCode
	} from '@/api/forgetPW.js'
	const resendTime = 120
	export default{
		data () {
			return {
				code: '',
				password: '',
				newPassword: '',
				action: 'can',
				maxlength: 6,
				codeint: resendTime,
				loading: false,
				error: false,
				defCount:5,//默认发送短信次数
			}
		},
		onLoad(options) {
			if (options.forget) {
				uni.setNavigationBarTitle({
					title:'忘记密码'
				})
			}
		},
		components:{jlInput},
		methods: {
			phoneFilter,
			setTimer() {
				var sendCode = setInterval(() => {
					this.codeint -= 1;
					if (this.codeint <= 0) {
						this.action = 'can'
						this.codeint = resendTime;
						clearInterval(sendCode);
						return;
					}
				}, 1000)
			},
			getCode: function() {
				if (this.action !== 'can') {
					return;
				}
				this.action = 'sending';
				sendValidate(this.userInfo.user_name).then((res) => {
					if(res.data.code==200){
						let count=res.data.data;
						let diffCount=this.defCount-count;//剩余获取短信次数
						if(count>1 && count<=5){
							uni.showToast({
								title:`今日验证码已获取${count}次，还有${diffCount}次获取机会`,
								icon:'none',
								duration:3000
							})
						}
						this.action = 'wait'
						this.setTimer()
					}
					this.loading = false
				}).catch(() => {
					this.action='can'
					this.loading = false
					this.$refs.code.refushCode()
				})
			},
			submit(){
				if (this.password !== this.newPassword){
					this.error = true
					return
				}
				this.loading = true
				resetPass(this.userInfo.user_name, this.code, this.password).then(()=>{
					this.loading = false
					uni.showToast({
						title: '重置密码成功',
						icon: false
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(()=>{
					this.loading = false
				})
			},
			regPassword(){
				if(this.password.length !== 6) {
					uni.showToast({
						title: '请设置长度6位的密码',
						icon: 'none'
					});
				}
			},
			regNewPassword(){
				if(this.newPassword.length !== 6) {
					uni.showToast({
						title: '请设置长度6位的密码',
						icon: 'none'
					});
				} else if (this.password !== this.newPassword) {
					this.error = true
				}
			}
		},
		computed: {
			...mapGetters(['realName', 'userInfo']),
			validate() {
				return this.password.length ===6 && this.newPassword.length === 6 && this.code
			}
		}
	}
</script>

<style lang="scss">
	.error {
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: red;
	}
	.forget{
		padding: 90rpx 80rpx 0 80rpx;
		.phone{
			height: 50rpx;
			font-size: 36rpx;
			font-weight: 400;
			color: #000000;
			line-height: 50rpx;margin-bottom: 90rpx;
		}
	}
	.codeBox{
		position: relative;
		.code{
			z-index: 999;
			position: absolute;
			top: 20px;
			right:14px;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #1B66FF;
			line-height: 38rpx;

		}
	}
	.nocheck {
		opacity: 0.3;
	}
	.bottombtn {
		background-color: #1B66FF;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		font-family: PingFangSC-Medium;
		font-size: 32rpx;
		height: 90rpx;
		line-height: 90rpx;
	}
	
	.btn {
		background-color: #fefefe;
		padding: 70rpx 80rpx;
	}
</style>
