<template>
	<view class="login">
		<view class="status_bar">
		</view>
		<view class="top">
			<text class="title">获取验证码</text>
		</view>
		<view class="middle">
			<view class="hint-text">验证码已发送至 +86 {{phone}}</view>
			<view class="account-block">
				<u-message-input :breathe="false" :focus="true" :bold='false' :maxlength="6" :value="code"
					@finish="finish"></u-message-input>
			</view>
		</view>
		<view class="bottom">
			<text class="btn-text" :class="{ 'btn-disabled': isCaptchaDisabled }"
				@click="fnGetCaptcha">{{smsText}}{{ isCaptchaDisabled ? "s" : "" }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				code: '',
				loginType: 'password',
				disabled: false,
				timmer: null,
				count: 60,
				smsText: "重新发送验证码",
				isCaptchaDisabled: false
			}
		},
		computed: {
			loginWayText() {
				return this.loginType === 'phone' ? '密码登录' : '手机号登录'
			},
		},
		watch: {
			phone: {
				handler: function(val) {
					if (this.loginType === 'password') {
						this.disabled = false
						return
					}
					if (/^1\d{10}$/.test(val)) {
						this.disabled = false
					} else {
						this.disabled = true
					}
				},
				immediate: true
			}
		},
		onLoad(option) {
			console.log('option',option)
			this.phone = option.phone
			this.loginType = option.loginType
		},
		methods: {
			finish(e) {
				console.log('输入结束，当前值为：' + e);
				if(this.loginType === 'phone'){
					uni.navigateTo({
						url: `/pages/login/login?loginType="phone"&code=${e}`
					});
				}else{
					uni.navigateTo({
						url: `/pages/forgetpassword/set-newpassword?code=${e}&phone=${this.phone}`,
					})
				}
			},
			fnGetCaptcha() {
				if (this.isCaptchaDisabled) {
					return
				}
				this.timmer = setInterval(() => {
					if (this.count != 0) {
						this.smsText = this.count;
						this.isCaptchaDisabled = true;
						this.count--;
					} else {
						this.count = 60;
						this.smsText = "重新发送验证码";
						this.isCaptchaDisabled = false;
						clearInterval(this.timmer);
					}
				}, 1000);
			},
			// 登录
			async goLogin() {
				const ispass = await this.validate();
				if (!ispass) return;
				uni.switchTab({
					url: '/pages/home/home'
				});
			},
			// 校验input
			validate() {
				return new Promise((resolve, reject) => {
					let flag = true;
					if (this.account == "") {
						flag = false;
						uni.showToast({
							title: '输入账户不规范',
							icon: 'none',
							duration: 1500
						});
					} else if (this.password == '') {
						flag = false;
						uni.showToast({
							title: '输入密码不规范',
							icon: 'none',
							duration: 1500
						});
					}

					resolve(flag);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
	}

	.top {
		padding-left: 24rpx;
		margin-top: 96rpx;
	}

	.title {
		font-size: 24px;
		color: $text-base-color;
	}

	.middle {
		display: flex;
		flex-direction: column;
		margin: 0 0 56rpx;
		padding-left: 24rpx;
	}

	::v-deep .placeholder-text {
		font-size: 34rpx;
		color: $wly-palcehold-color;
	}

	.account-block {
		height: 100rpx;
	}

	.hint-text {
		color: $text-base-color;
		font-size: 14px;
		margin: 16rpx 0 32rpx;
	}


	.bottom {
		display: flex;
		justify-content: center;
	}

	.btn-text {
		color: #3596f3;
		font-size: 14px;
		font-weight: 400;
		letter-spacing: 0.17px;
	}

	.btn-disabled {
		color: #ccc;
	}
</style>
