<template>
	<view class="conent">
		<view class="input-row">
			<input class="m-input" maxlength="11" type="text" clearable v-model="account" placeholder="请输入手机号" />
		</view>
		<view class="input-row">
			<input maxlength="16" type="password" clearable v-model="password" placeholder="请输入新密码" />
		</view>
		<view class="input-row">
			<input maxlength="16" type="password" clearable v-model="newpassword" placeholder="重新输入密码" />
		</view>
		<view class="input-row" >
			<view style="width: 65%;"><input maxlength="11" type="text" v-model="code" placeholder="请输入验证码" /></view>
			<view style="width: 30%;"><text v-if="codetimecode == false" style="font-size: 26upx;color: #3971E2;" @click="getCode()">获取验证码</text>
			<text v-else style="font-size: 26upx;margin-right: 20upx;color: #3971E2;" >{{countdown}}秒后重新获取</text></view>
		</view>
		<view class="forgetpsd"><button type="primary" class="primary log-btn" @click="registerck">修改密码</button></view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				account:'',
				password:'',
				newpassword:'',
				code:'',
				countdown: '60',
				timer: null,
				codetimecode: false
			}
		},
		methods:{
			getCode() {
				if(this.account== ''){
					uni.showToast({
						title: '手机号码不能为空',
						icon: 'none'
					});
					return false
				}
				const data = {
					phone: this.account,
					codetype: '1'
				};
				api.code( data).then(res => {
					console.log(res, 'asok')
					if(res.code == 0){
						this.sendCode()
						this.codetimecode = true
						uni.showToast({
							title:'发送成功',
							icon:'none'
						})
					}else {
						uni.showToast({
							title: res.msg,
							icon:'none'
						})
					}
				})
			},
			sendCode(){
			    this.loading();  //启动定时器
			    this.timer = setInterval(() =>{
			         //创建定时器
			        if(this.countdown === 1){
			            this.clearTimer();  //关闭定时器
			            this.skipStep();
			        }else{
			            this.loading();
			        }
			    },1000);
			},
			      loading(){
			          //启动定时器
			          this.countdown--;  //定时器减1
			        },
					 clearTimer(){
					           //清除定时器
					           clearInterval(this.timer);
					           this.timer = null;
							   this.codetimecode = false
					        },

		registerck() {
			if(this.account == ''){
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
				return false
			}
			if(this.password == ''){
				uni.showToast({
					title: '密码不能为空',
					icon: 'none'
				});
				return false
			}
			if(this.password != this.newpassword){
				uni.showToast({
					title: '2次密码输入不一致',
					icon: 'none'
				});
				return false
			}
			if(this.code == ''){
				uni.showToast({
					title: '请输入短信验证码',
					icon: 'none'
				});
				return false
			}
			if( this.newpassword == '' != this.confirmpassword == ''){
				uni.showToast({
					title: '新密码与确认密码不一致',
					icon: 'none'
				});
				return false
			}
			const data = {
				phone: this.account,
				newPassword: this.password,
				newPassword1: this.newpassword,
				code:this.code,
				codetype: '1'
			}
			this.$http.post('/route/appUser/forgetPassword', data).then(res=>{
				if(res.code == 0 ) {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					uni.redirectTo({
						url:'./success'
					})
				}else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			})
		}
		}
	}
</script>

<style scoped>
	page {
		background-color: RGBA(252, 252, 252, 1);
	}

	.conent {
		width: 100vw;
		overflow: hidden;
	}

	.input-row {
		height: 100upx;
		display: flex;
		margin: 20upx 0;
		align-items: center;
		padding: 0 20upx;
		background: #FFFFFF;
		border-bottom: 1upx solid #C8C7CC;
	}
	.input-row-password{
		height: 100upx;
		display: flex;
		justify-content: space-around;
		margin: 20upx 0;
		align-items: center;
		padding-left: 20upx;
		background: #FFFFFF;
	}
	.forgetpsd{
		margin: 40upx 20upx;
	}
	.log-btn {
		border-radius: 10upx;
		font-size: 34upx;
		box-shadow: 0px 16upx 32upx 0px rgba(2, 168, 244, 0.24);
	}
	
</style>
