<template>
	<view class="container">
		<view class="top">
			<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()"></text>
			<text>重置密码</text>
		</view>
		<view class="content">
			<view class="item">
				{{hideMoblie(usermobile)}}
			</view>
			<!-- <view class="input-row">
				<input maxlength="11" type="password" 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> -->
			<vcodeInput ref="VcodeInput" @vcodeInput="vcodeInput">
			</vcodeInput>
			<view class="send_btn" v-if="!confirmBtn">
				<text v-if="codetimecode == false"
					@click="sendMessage()">发送验证码</text>
				<text v-else style="font-size: 26upx;margin-right: 20upx;color: #fff;">
					{{countdown}}秒后重新获取
				</text>
			</view>
			<view class="send_btn" v-if="confirmBtn" @click="nextPage()">
				确定
			</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";
	import vcodeInput from "@/components/vcode-input/vcode-input";
	export default {
		data() {
			return {
				usermobile:uni.getStorageSync('user_mobile'),
				code: '',
				countdown: '60',
				timer: null,
				codetimecode: false,
				confirmBtn:false
			}
		},
		components:{
			vcodeInput
		},
		destroyed() {
			uni.hideToast();
		},
		methods: {
			//验证码输入完成
			vcodeInput(val) {
				this.code = val;
				const param = {
					mobile: this.usermobile,
					code: this.code
				}
			    api.verification(param).then((res)=>{
					if(res['success']){
						this.confirmBtn = true
					}else{
						uni.showToast({
							title:res['message'],
							icon:'none'
						})
					}
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			hideMoblie(str){
				return str.substr(0,3) + "****" + str.substr(7)
			},
			sendMessage() {
				const params = {
					mobileNo: this.usermobile,
					type: "1"
				}
				if (common.mobileNoValid(this.usermobile)) {
					api.verificationCode(params).then((res) => {
						if (res['success']) {
							this.sendCode()
							this.codetimecode = true
							uni.showToast({
								title:'发送成功',
								icon:'none'
							})
						}else{
							uni.showToast({
								title:res['message'],
								icon:'none'
							})
						}
					})
				} else {
					common.errorDialog(2, '手机号校验错误')
				}
			},
			nextPage(){
				uni.navigateTo({
					url:`/pages/personalCenter/accountoperation/confirmResetpassword?code=${this.code}`
				})
			},
			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 lang="scss" scoped>
	page {
		background-color: RGBA(252, 252, 252, 1);
	}
	.top{
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		position: relative;
		width: 100%;
		margin: 0 auto 60rpx auto;
		.zuojiantou{
			display: inline-block;
			transform: rotate(180deg);
			font-size: 30rpx;
			z-index: 1;
			position: absolute;
		}
		text:nth-child(2){
			width: 100%;
			text-align: center;
			position: absolute;
		}
	}
	// .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;
	// }
	.content{
		.item{
			text-align: center;
			font-size: 36rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 40rpx;
		}
		.send_btn{
			background: #20269B;
			color: #fff;
			height: 90rpx;
			line-height: 90rpx;
			width: 50%;
			margin: 100rpx auto;
			border-radius: 100rpx;
			text-align: center;
		}
	}
	.input-row-password {
		height: 100upx;
		display: flex;
		justify-content: space-around;
		margin: 20upx 0;
		align-items: center;
		padding-left: 20upx;
		background: #FFFFFF;
	}
</style>
