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


<script>
	import common from '../../../common/common';
	import api from "@/api/api";
	export default {
		data() {
			return {
				form:{
					mobile: "18335619247",
					code:'',
					password:'',
				},
				
				code: '',
				countdown: '60',
				timer: null,
				codetimecode: false
			}
		},
		methods: {
			sendMessage() {
				const params = {
					mobileNo: this.form.mobile,
					type: "1"
				}
				if (common.mobileNoValid(this.form.mobile)) {
					api.verificationCode(params).then((res) => {
						console.log(res, 7788888)
						if (res['success']) {
							this.sendCode()
							this.codetimecode = true
							uni.showToast({
								title:'发送成功',
								icon:'none'
							})
						}
					})
				} else {
					common.errorDialog(2, '手机号校验错误')
				}


			},
			resetPassword(){
				const params = {
					...this.form
				}
				console.log(params)
				api.resetPassword(params).then((res)=>{
					if(res['success']){
						uni.showToast({
							title: '密码重置成功，请重新登录',
							duration: 5000,
							icon: 'none'					
						})
					uni.removeStorageSync('isLogin')
					uni.reLaunch({
						url:'/components/login/login'
					})
						//重置密码后需要密码登录
						this.form = {
							mobile:null,
							code:null,
							password:null,
						}
					}else{
						uni.showToast({
							title: res['message'],
							duration: 2000,
							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
			},


		}
	}
</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;
		justify-content: space-between;
		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;
		color: #FFFFFF;
		background: #20269B;
		box-shadow: 0px 16upx 32upx 0px rgba(2, 168, 244, 0.24);
	}
</style>
