<template>
	<view class="container">
		<navseat :opacity='false' title="忘记密码" :titleshow='true' :namecolor='"#fff"' iconcolor='#fff'></navseat>
		<view class="top_box">
			<view class="top_box_one">
				<text class="top_box_one_text">手机号码</text>
				<input type="number" v-model="form.account" placeholder="请输入手机号码" />
			</view>
			<view class="top_box_one">
				<text class="top_box_one_text">密码</text>
				<input type="text" v-model="form.password" placeholder="请输入密码" :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="text" v-model="form.payPassword" placeholder="请再次输入密码" :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="number" v-model="form.captcha" 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>
</template>

<script>
	import navseat from '@/components/navseat.vue'
	export default {
		components: {
			navseat
		},
		data() {
			return {
				radioChangeItem: false, //单选框
				h: null,
				showPassword: false,
				// 注册定时器   初始值
				second: 60,
				showText: true,
				Recapture: '发送验证码',
				form: {
					account: '',
					password: '',
					payPassword: '',
					captcha: '',
					source: 'promoter'
				}
			};
		},
		mounted() {},
		onLoad() {},
		methods: {
			async CodeRegister() {
				if (this.form.password == null || this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				if (this.form.payPassword == null || this.form.payPassword == '') {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					});
					return false;
				}
				if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
					uni.showToast({
						title: "请输入密码长度为6-24",
						icon: "none"
					})
					return false;
				}
				if (this.form.payPassword != this.form.password) {
					uni.showToast({
						title: '密码和确认密码不一致',
						icon: 'none'
					});
					return false;
				}
				//发起验证码
				const res = await this.api.smssend({
					mobile: this.form.account,
					event: 'forgetpwd'
				});
				if (res.code == 1) {
					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.account.length != 11) {
					uni.showToast({
						title: '手机号必须是11位',
						icon: 'none'
					});
					return false;
				}
				if (this.form.password == null || this.form.password == '') {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return false;
				}
				if (this.form.payPassword == null || this.form.payPassword == '') {
					uni.showToast({
						title: '请输入确认密码',
						icon: 'none'
					});
					return false;
				}
				if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
					uni.showToast({
						title: "请输入密码长度为6-24",
						icon: "none"
					})
					return false;
				}
				if (this.form.payPassword != this.form.password) {
					uni.showToast({
						title: '密码和确认密码不一致',
						icon: 'none'
					});
					return false;
				}
				if (!uni.$u.test.rangeLength(this.form.password, [6, 24])) {
					uni.showToast({
						title: "请输入密码长度为6-24",
						icon: "none"
					})
					return false;
				}
				if (this.form.captcha == null || this.form.captcha == '') {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.userforgetpwd({
					account: this.form.account,
					password: this.form.password,
					captcha: this.form.captcha
				});
				if (res.code == 1) {
					uni.showToast({
						title: '修改成功',
						icon: 'none',
						success: () => {
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);
						}
					});
				}

			}
		}
	};
</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::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: 120rpx;
			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;
					z-index: 99;
					bottom: 26rpx;
					right: 0;
					width: 25rpx;
					height: 17rpx;
				}

				.repeats {
					z-index: 99;
					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>