<template>
	<view class="find-password-page">
		<public-module></public-module>
		<view class="top u-flex" style="justify-content: space-between;flex-direction: row;align-items: center;">
			<view @click="showPhone" :style="{color:!nextStatus?'#0079fe':''}" class="item">1.验证手机号码</view>
			<view :style="{color:!nextStatus?'':'#0079fe'}" class="item">2.设置新密码</view>
		</view>
		<view v-if="!nextStatus" style="margin-top: 40rpx;" class="f__login">
			<view class="loginPhone">
				<view class="form-row">
					<input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
						placeholder-style="font-weight:normal"></input>
				</view>
				<view style="height: 25rpx;"></view>
				<view class="form-row">
					<input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码"
						placeholder-style="font-weight:normal"></input>
					<view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
				</view>
				<button class="submit" size="default" @click="onNextSubmit">
					<text style="color:#fff">下一步</text>
				</button>
			</view>
		</view>
		<view v-else style="margin-top: 40rpx;" class="f__login">
			<view class="loginPhone">
				<view class="form-row">
					<input class="input" type="password" v-model="password" placeholder="请设置6-20位新的登录密码"
						placeholder-style="font-weight:normal"></input>
				</view>
				<view style="height: 25rpx;"></view>
				<view class="form-row">
					<input class="input" type="password" v-model="rePassword" placeholder="请再次输入新的登录密码"
						placeholder-style="font-weight:normal"></input>
				</view>
				<button class="submit" size="default" @click="onSubmit">
					<text style="color:#fff">确定</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				readonly: false,
				codeText: '发送验证码',
				phone: '', //号码
				vCode: '', //验证码
				nextStatus: false,
				password:'',
				rePassword:''
			}
		},
		methods: {
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '发送验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			getVcode() {
				console.log('getVcode')
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送~',
						icon: 'none'
					});
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					});
					return;
				}
				const phoneRegular = /^1\d{10}$/;
				if (!phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				let httpData = {}
				// 获取验证码接口
				// uni.$u.http.post('您的接口', httpData).then(res => {
				this.getCodeState(); //开始倒计时
				// })
			},
			onNextSubmit() {
				this.nextStatus = true
			},
			showPhone(){
				this.nextStatus = false
			},
			onSubmit() {}
		}
	}
</script>

<style lang="scss" scoped>
	.find-password-page{
		min-height: 100vh;
		background-color: #fff;
	}
	.top {
		width: 750rpx;
		height: 100rpx;
		border: 0.1px solid #f7f9ff;

		.item {
			width: 375rpx;
			height: 100rpx;
			border: 0.1px solid #f7f9ff;
			text-align: center;
			line-height: 90rpx;
		}
	}

	.f__login {
		padding: 0 30rpx;

		.loginPhone {
			.form-row {
				position: relative;
				border-radius: 32px;
				border: 1px solid #F7F9FF;
                background: #F7F9FF;
				.input {
					font-size: 34rpx;
					line-height: 102rpx;
					height: 94rpx;
					width: 100%;
					box-sizing: border-box;
					font-size: 30rpx;
					padding: 0 34rpx;
					font-weight: bold;
				}

				.getvcode {
					font-size: 26rpx;
					height: 80rpx;
					color: #333;
					line-height: 80rpx;
					// background: #eee;
					min-width: 188rpx;
					text-align: center;
					border-radius: 8rpx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					right: 0;
					z-index: 11;

					&.forhidden {
						// background: #eee;
						// color: #cccccc;
					}
				}
			}


			.submit {
				margin-top: 60rpx;
				width: 100%;
				background: #377DFF;
				border-radius: 48px;
			}
		}
	}
</style>