<template>
	<view class="container">
		<u-navbar  class="top" title="忘记密码" @rightClick="leftClick" :autoBack="true" leftIconColor="#fff" :titleStyle="{color:'#FFF',}" bgColor="transparent"></u-navbar>
		<view class="top_box_xx">
			<view class="top_box">
				<view class="top_box_one">
					<text class="top_box_one_text">手机号码</text>
					<input type="text" v-model="form.phone" placeholder="请输入手机号码" data-key="mobile" />
				</view>
				<view class="top_box_one">
					<text class="top_box_one_text">密码</text>
					<input type="mobile" v-model="form.password" placeholder="8-16位密码" maxlength="16" :password="!showPassword" />
					<view class="repeat" @click="display">
						<u-icon name="eye" v-if="showPassword"></u-icon>
						<u-icon v-else name="eye-off"></u-icon>
					</view>
				</view>
				<view class="top_box_one">
					<text class="top_box_one_text">确认密码</text>
					<input type="mobile" v-model="form.confirmpassword" placeholder="请再次输入密码" maxlength="16" :password="!showPassword" />
					<view class="repeat" @click="display">
						<u-icon name="eye" v-if="showPassword"></u-icon>
						<u-icon v-else name="eye-off"></u-icon>
					</view>
				</view>
				<view class="top_box_one">
					<text class="top_box_one_text">验证码</text>
					<input type="mobile" v-model="form.checkCode" placeholder="请输入短信验证码" maxlength="6" />
					<view class="repeats">
						<view v-if="showText == true" style="padding: 8rpx 16rpx 6rpx 16rpx;background: #288EFB;  border-radius: 15rpx;" @click="CodeRegister">{{ Recapture }}</view>
						<view v-else style="color: #ccc; background-color: #f9f9f9; padding: 8rpx 16rpx 6rpx 16rpx; border-radius: 15rpx;">{{ second }}s重新发送</view>
					</view>
				</view>
				<view class="forgetPassword" @click="forgetPassword">重置密码</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			radioChangeItem: false, //单选框
			h: null,
			showPassword: false,
			// 注册定时器   初始值
			second: 60,
			showText: true,
			Recapture: '发送验证码',
			form: {
				phone: '',
				password: '',
				confirmpassword: '',
				checkCode: '',
				source: 'promoter'
			}
		};
	},
	mounted() {},
	onLoad() {},
	methods: {
		leftClick() {
			uni.navigateBack();
		},
		async CodeRegister() {
			//发起验证码
			if (this.form.phone == null || this.form.phone == '') {
				uni.showToast({
					title: '请输入电话号码',
					icon: 'none'
				});
				return false;
			}
			const res = await this.api.verifyPhoneIsExist({// post  手机验证码
				phone: this.form.phone,
			});
			if (res) {
			uni.showToast({
				title: '验证码获取成功',
				icon: 'none'
			});
			// 定时器
			this.showText = false;
			this.Recapture = '重新获取';
			var interval = setInterval(() => {
				let times = --this.second;
				this.second = times < 10 ? '0' + times : times; //小于10秒补 0
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				this.second = 60;
				this.showText = true;
			}, 60000);
			}
		},
		radioChange(n) {
			//是否同意
			console.log(n);
			this.radioChangeItem = n;
		},
		display() {
			// 切换图片显示隐藏
			this.showPassword = !this.showPassword;
		},
		Privacy(e) {
			if (e == 1) {
				//用户协议
				uni.navigateTo({
					url: '../login/Privacy'
				});
			} else {
				uni.navigateTo({
					//隐私政策
					url: '../login/Privacy'
				});
			}
		},

		async forgetPassword() {
			//注册
			if (this.form.phone == null || this.form.phone == '') {
				uni.showToast({
					title: '请输入电话号码',
					icon: 'none'
				});
				return false;
			}
			if (this.form.password == null || this.form.password == "" || uni.$u.trim(this.form.password,'all') == ''){
				uni.showToast({
					title: "请输入密码或密码不能输入空格",
					icon: "none"
				})
				return false;
			}
			if (this.form.confirmpassword == null || this.form.confirmpassword == '' || uni.$u.trim(this.form.confirmpassword,'all') == '') {
				uni.showToast({
					title: '请输入确认密码或确认密码不能输入空格',
					icon: 'none'
				});
				return false;
			}
			if (this.form.checkCode == null || this.form.checkCode == '') {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
				return false;
			}
			if (this.form.confirmpassword != this.form.password) {
				uni.showToast({
					title: '两次密码不一致',
					icon: 'none'
				});
				return false;
			}
			let res = await this.api.forgetPassword({
				phone: this.form.phone,
				password: this.form.password,
				checkCode: this.form.checkCode,
				source: 'promoter'
			});
			if (res) {
				uni.showToast({
					title: '修改成功',
					icon: 'none',
					success: () => {
						uni.navigateTo({
							url: '../login/login'
						});
					}
				});
			}
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	background: linear-gradient(104deg, #4679ff 0%, #2868e8 47%, #2a94fc 100%);
}
.container {
	padding: 0 34rpx;
	position: relative;
	.top{
		position: absolute;
		left: 64rpx;
		.u-navbar--fixed{
			top: 88rpx;
		}
	}
	.box {
		padding-left: 64rpx;
		padding-bottom: 144rpx;
		box-sizing: border-box;
		text {
			font-size: 40rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #ffffff;
		}
	}
	
	.top_box_xx {
		.top_box::after {
			content: '';
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 50rpx;
			z-index: 1;
			bottom: -20rpx;
			background: #9ec9fb;
			border-radius: 0 0 40rpx 40rpx;
		}
		.top_box::before {
			content: '';
			position: absolute;
			display: inline-block;
			width: 100%;
			height: 50rpx;
			bottom: 0rpx;
			z-index: 2;
			background: #fff;
			border-radius:  0 0 40rpx 40rpx;
		}
		.top_box {
			position: relative;
			z-index: 99;
			top: 200rpx;
			box-sizing: border-box;
			padding: 0 64rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #ffffff;
			border-radius: 40rpx;
			padding-bottom: 108rpx;
			.top_box_one {
				position: relative;
				width: 100%;
				margin-top: 64rpx;
				border-bottom: 6rpx solid #e5e5e5;
				.top_box_one_text {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #333333;
				}
				input {
					padding: 18rpx 0 20rpx 0;
				}
				.repeat {
					position: absolute;
					bottom: 26rpx;
					right: 0;
					width: 25rpx;
					height: 17rpx;
				}
				.repeats {
					position: absolute;
					bottom: 26rpx;
					right: 0;
					font-size: 24rpx;
					font-weight: 400;
					color: #ffffff;
					border-radius: 12rpx;
				}
			}
			.top_box_tow {
				width: 100%;
				text {
					margin-top: 34rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #666666;
				}
			}
			.forgetPassword {
				width: 75%;
				margin-top: 120rpx;
				padding: 10rpx 0;
				text-align: center;
				background: #288efb;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				font-size: 36rpx;
				font-weight: 400;
				color: #ffffff;
			}
			.agreement {
				margin-top: 14rpx;
				font-size: 20rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #7c8e97;
				.agreement-Item {
					color: #4ca1fc;
				}
			}
		}
	}
}
</style>
