<template>
	<view class="layout">
		<view class="first-line">请完成以下认证</view>
		<view class="sencond-line">请输入{{ phone }}收到的短信验证码</view>
		<view class="code-layout">
			<input class="input" placeholder="请输入短信验证码" placeholder-style="color:#999999;font-weight:400" v-model="code" type="number" maxlength="8" />
			<text class="vertify-code" @click="getCode()">{{ verifyCode }}</text>
		</view>
		<view :class="code.length > 0 ? 'submit1' : 'submit'" @click="submit">下一步</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: this.$store.state.userInfo.mobile.substring(0, 3) + '****' + this.$store.state.userInfo.mobile.substring(7, 11),
			verifyCode: '获取验证码',
			verifyTime: 300,
			code: ''
		};
	},
	onLoad() {
		console.log(this.$store.state.userInfo.mobile);
	},
	methods: {
		getCode() {
			if (this.verifyTime !== 300) {
				return;
			}
			this.$net
				.post('/staff/sms', { codeType: 20, mobile: this.$store.state.userInfo.mobile })
				.then(res => {
					if (res.code == 200) {
						this.toast('验证码发送成功');
						this.startTime();
					} else {
						this.toast(res.message);
					}
				})
				.catch(err => {
					this.toast(err);
					console.log(err);
				});
		},
		// 开始倒计时
		startTime() {
			if (this.verifyTime !== 300) {
				return;
			}
			this.verifyCode = this.verifyTime + 's';
			const timer = setInterval(() => {
				this.verifyTime--;
				if (this.verifyTime > 0) {
					this.verifyCode = this.verifyTime + 's';
				} else {
					this.verifyCode = '重新发送';
					this.verifyTime = 300;
					clearInterval(timer);
				}
		 }, 1000);
		},
		submit() {
			if (this.code.length != 4) {
				this.toast('请输入正确的验证码')
				return
			}
			this.$net.post('/staff/password/change', {code: this.code})
				.then(res => {
					console.log(res)
					if (res.code == 200) {
						this.$router.replaceTo('SetPwd', {randomCode: res.data.randomCode})
					} else {
						this.toast('请输入正确的验证码')
					}
				})
				.catch(err => {
					this.toast('请输入正确的验证码')
				})
		}
	}
};
</script>

<style lang="scss" scoped>
.layout {
	width: 100%;
	height: 100%;
	background: #ffffff;
	.first-line {
		font-size: 36rpx;
		font-weight: bolder;
		color: #333333;
		margin: 80rpx 49rpx 0 49rpx;
	}
	.sencond-line {
		font-size: 26rpx;
		color: #333333;
		margin: 24rpx 49rpx 0 49rpx;
	}
	.code-layout {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin: 119rpx 49rpx 0 49rpx;
		border-bottom: solid 2rpx #ff0520;
		padding-bottom: 30rpx;
		.input {
			outline: none;
			font-size: 32rpx;
			font-weight: bolder;
			flex: 1;
		}
		.vertify-code {
			font-size: 32rpx;
			color: #ff0520;
			line-height: 48rpx;
		}
	}
	.submit {
		width: 590rpx;
		height: 96rpx;
		background: #ff0520;
		opacity: 0.5;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 96rpx;
		text-align: center;
		margin: 120rpx auto;
	}
	.submit1 {
		width: 590rpx;
		height: 96rpx;
		background: #ff0520;
		border-radius: 48rpx;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 96rpx;
		text-align: center;
		margin: 120rpx auto;
	}
}
</style>
