<template>
	<view class="code-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="f__login">
			<view class="loginPhone">
				<view class="phone-main" style="margin-top: 173rpx;">
					<text class="text" style="">手机验证码登录</text>
					<view class="circleStyle"></view>
				</view>
				<view class="form-row">
					<input class="input" type="number" v-model="phone" placeholder="请输入手机号码"
						placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
				</view>
				<view class="form-row">
					<input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
						placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
					<view  class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
				</view>
				<button class="submit" size="default" @click="onSubmit">
					<text class="text">登录</text>
				</button>
				<view class="u-flex account-style">
					<view class="content"  @click="openAccountFunc">账号密码登录</view>
				</view>
				<view class="circleStyleBottom"></view>
			</view>
		</view>
	</view>
</template>

<script>
	var clear;
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				readonly: false,
				codeText: '发送验证码',
				phone: '', //号码
				vCode: '', //验证码
			}
		},
		methods: {
			...mapMutations(['setUserInfo']),
			//验证码按钮文字状态
			getCodeState() {
				const _this = this;
				this.readonly = true;
				this.codeText = '60S后重新获取';
				var s = 60;
				clear = setInterval(() => {
					s--;
					_this.codeText = s + 'S后重新获取';
					if (s <= 0) {
						clearInterval(clear);
						_this.codeText = '发送验证码';
						_this.readonly = false;
					}
				}, 1000);
			},
			//获取验证码
			getVcode() {
				if (this.readonly) {
					uni.showToast({
						title: '验证码已发送~',
						icon: 'none'
					});
					return;
				}
				if (this.phone == '') {
					uni.showToast({
						title: '请输入手机号~',
						icon: 'none'
					});
					return;
				}
				const phoneRegular = /^1\d{10}$/;
				if (!phoneRegular.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				// 获取验证码接口
				uni.$u.http.post(`/yt/noauth/sendLoginSmsCode/${this.phone}` ).then(res => {
				     this.getCodeState(); //开始倒计时
				})
			},
			onSubmit() {
				if(this.vCode=='')return  uni.$u.toast('请输入验证码')
				let httpData = {
					code: this.vCode,
					phoneNumber: this.phone
				}
				uni.$u.http.post('/yt/auth/code/login', httpData).then(res => {
					if (res) {
						// 储存登录信息
						let resObj = {
							refreshToken: res.refreshToken,
							isToken: res.token
						};
						let userInfo = {
							...resObj,
							token: true //token用于判断是否登录
						};
						if (userInfo.token) {
							this.setUserInfo(userInfo);
						}
						uni.showToast({
							title: '登录成功~',
							icon: 'none'
						});
						this.saveUserInfo();
						setTimeout(() => {
							uni.navigateBack({
								delta:2
							})
						}, 500);
					}
				});
			},
			saveUserInfo() {
				//储存个人信息
				uni.$u.http.get('/yt/user/me/info').then(res => {
					if (res) {
						this.setUserInfo(res);
					}
				});
			},
			openAccountFunc(){
				uni.navigateTo({
					url:"./login"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './static/code.scss';
</style>