<template>
	<view class="container login">
		<!-- 手机修改 -->
		<view class="content">
			<view class="login-form clearfix">
				<view class="login-input">
					<input
						type="number"
						v-model="phoneParams.mobileOrEmail"
						maxlength="11"
						class="input"
						placeholder="请输入手机号"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="login-form clearfix">
				<view class="login-input code">
					<input
						type="number"
						v-model="phoneParams.smsCode"
						maxlength="6"
						class="input"
						placeholder="请输入短信验证码"
						placeholder-class="placeholder"
					/>
				</view>
				<view class="login-input btn" :class="[isMobileDisabled ? 'disabled' : '']">
					<button type="button" @click.stop="getMobileCodeFn" :disabled="isMobileDisabled" class="input">
						{{ mobileCodeText }}
					</button>
				</view>
			</view>
			<view class="login-form clearfix">
				<view class="login-input pwd">
					<input
						type="text"
						v-model="phoneParams.password"
						maxlength="16"
						class="input"
						placeholder="密码必须为8-16位字母数字组合"
						autocomplete="new-password"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="login-form clearfix">
				<view class="login-input pwd">
					<input
						type="text"
						v-model="phoneParams.passwordConfirm"
						maxlength="16"
						class="input"
						placeholder="请确认密码"
						autocomplete="new-password"
						placeholder-class="placeholder"
					/>
				</view>
			</view>
			<view class="login-form clearfix" style="border: 0;">
				<button class="login-btn" :disabled="disabled" :class="disabled ? 'disabled' : ''" @click="confirmPassword">
					修改密码
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'

export default {
	data() {
		return {
			isMobileDisabled: false, //获取手机短信按钮
			count: '', //倒计时
			mobileCodeText: '获取验证码',
			codeTime: null,
			phoneParams: {
				mobileOrEmail: '',
				smsCode:'',
				password: '',
				passwordConfirm: '',
			}
		}
	},
	onLoad(option) {},
	computed: {
		disabled() {
			return !(
				this.phoneParams.mobileOrEmail!= '' &&
				this.phoneParams.smsCode!= '' &&
				this.phoneParams.password!= '' &&
				this.phoneParams.passwordConfirm!= ''
			)
		}
	},
	methods: {
		confirmPassword() {
			//手机号修改
			if (this.phoneParams.mobileOrEmail == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.phoneParams.mobileOrEmail)) {
				this.$util.msg('手机格式不正确', 2000)
				return
			}
			if (this.phoneParams.smsCode == '') {
				this.$util.msg('请输入手机验证码', 2000)
				return
			}
			if (!this.$reg.isMobileCode(this.phoneParams.smsCode)) {
				this.$util.msg('验证码格式不正确', 2000)
				return
			}
			if (this.phoneParams.password == '') {
				this.$util.msg('请输入密码', 2000)
				return
			}
			if (!this.$reg.checkPwd(this.phoneParams.password)) {
				this.$util.msg('密码必须为8-16位字母数字的组合', 2000)
				return
			}
			if (this.phoneParams.passwordConfirm == '') {
				this.$util.msg('请再次确认密码', 2000)
				return
			}
			if (this.phoneParams.passwordConfirm !== this.phoneParams.password) {
				this.$util.msg('两次输入的密码不一致', 2000)
				return
			}
			this.ModifyMobilePassword(this.phoneParams)
		},
		//调用
		async ModifyMobilePassword(phoneParams) {
			try {
				const res = this.UserService.ModifyMobilePassword(phoneParams)
				this.$util.msg(res.msg, 2000, true, 'success')
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			} catch (error) {
				//TODO handle the exception
				this.$util.msg(error.msg, 2000)
			}
		},
		getMobileCodeFn() {
			//获取手机验证码
			if (this.phoneParams.mobileOrEmail == '') {
				this.$util.msg('请输入手机号', 2000)
				return
			}
			if (!this.$reg.isMobile(this.phoneParams.mobileOrEmail)) {
				this.$util.msg('请输入正确的手机号', 2000)
				return
			}
			this.isMobileDisabled = true
			this.getMobileCode(this.phoneParams)
		},
		//获取短信
		async getMobileCode(params) {
			try {
				const res = this.PublicService.GetRegisterMobileCode(params)
				this.$util.msg('验证短信已发送', 2000)
				const TIME_COUNT = 60
				if (!this.codeTime) {
					this.count = TIME_COUNT
					this.isMobileDisabled = true
					this.codeTime = setInterval(() => {
						if (this.count > 1 && this.count <= TIME_COUNT) {
							this.count--
							this.mobileCodeText = this.count + 's重新发送'
						} else {
							this.isMobileDisabled = false
							clearInterval(this.codeTime)
							this.codeTime = null
							this.mobileCodeText = '获取验证码'
						}
					}, 1000)
				}
			} catch (e) {
				//TODO handle the exception
				this.$util.msg(error.msg, 2000)
				this.isMobileDisabled = false
			}
		}
	}
}
</script>

<style lang="scss">
.login {
	width: 100%;
	height: auto;
	.login-form {
		width: 702rpx;
		height: auto;
		margin: auto;
		border-bottom: 2rpx solid #e1e1e1;
		.login-input {
			width: 100%;
			height: 64rpx;
			padding: 24rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			&.pwd {
				.iconfont {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 44rpx;
					color: #999999;
					z-index: 99;
					width: 96rpx;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
				}
			}
			&.code {
				width: 310rpx;
				float: left;
				margin-right: 20rpx;
			}
			&.btn {
				width: 220rpx;
				height: 64rpx;
				float: right;
				background: $btn-confirm;
				padding: 0;
				border-radius: 44rpx;
				margin-top: 20rpx;
				.input {
					width: 220rpx;
					height: 64rpx;
					line-height: 64rpx;
					padding: 0;
					color: #ffffff;
					background: $btn-confirm;
					text-align: center;
					border-radius: 44rpx;
					&.none {
						background: #f7f7f7;
					}
				}
				&.disabled {
					background: #f7f7f7;
					.input {
						background: #f7f7f7;
						color: #999999;
					}
				}
			}
			&.img-btn {
				width: 290rpx;
				height: 64rpx;
				padding: 0;
				float: right;
				background: #ffffff;
				display: block;
				margin-top: 10rpx;
				.vscodeimg {
					width: 160rpx;
					height: 64rpx;
					float: left;
					display: flex;
					flex-direction: column;
					align-items: center;
					border-radius: 6rpx;
					margin-top: 10rpx;
					image {
						width: 180rpx;
						height: 88rpx;
						border-radius: 6rpx;
					}
				}
				.vscod-refresh {
					width: 100rpx;
					float: right;
					margin-top: 25rpx;
					.icon-shuaxin {
						font-size: 36rpx;
						color: #999999;
						float: left;
					}
					.ref-text {
						font-size: 24rpx;
						color: #333333;
						float: right;
					}
				}
			}
			.input {
				width: 100%;
				height: 100%;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
				border-radius: 14rpx;
			}
		}
	}
	.login-btn {
		width: 600rpx;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: $font-size-28;
		line-height: 88rpx;
		color: #ffffff;
		margin: 0 auto;
		text-align: center;
		background: $btn-confirm;
		margin-top: 100rpx;
		&.disabled {
			background: #e2e2e2;
		}
	}
	.model-authorization {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		.authorization {
			width: 518rpx;
			height: 320rpx;
			position: absolute;
			background: rgba(255, 255, 255, 0.7);
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			.to-btn {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 70%;
				height: 88rpx;
				font-size: $font-size-28;
				line-height: 88rpx;
				color: #ffffff;
				text-align: center;
				border-radius: 44rpx;
			}
		}
	}
}
.placeholder {
	color: #b2b2b2;
}
</style>
