<template>
	<view class="code-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="login-body">
			<view class="login-phone">
				<view class="phone-main">
					<text class="text">手机验证码登录</text>
					<view class="circleStyle"></view>
				</view>
				<view class="form-row"><u-input v-model="loginForm.phone" type="number" placeholder="请输入手机号码" border="bottom"></u-input></view>
				<view class="form-row">
					<u-input type="number" v-model="loginForm.verifyCode" placeholder="请输入验证码" border="bottom">
						<template slot="suffix">
							<view @click="getVerifyCode" class="verify-code">{{ codeText }}</view>
						</template>
					</u-input>
				</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, mapActions } from 'vuex';
import { useShowToast,useNavigateTo } from '@/plugins/utils.js'
import api from '@/api'

export default {
	data() {
		return {
			loginForm:{
				phone: '',
				verifyCode: ''
			},
			readonly: false,
			codeText: '发送验证码',
		};
	},
	methods: {
		...mapMutations(['setUserInfo']),
		...mapActions(['updateBadgeTotal']),
		//验证码按钮文字状态
		codeCountdownText() {
			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);
		},
		//获取验证码
		async getVerifyCode() {
			if (this.readonly) {
				useShowToast('验证码已发送~')
			}
			if (!this.loginForm.phone) {
				useShowToast('请输入手机号~')
			}
			const phoneRegular = /^1\d{10}$/;
			if (!phoneRegular.test(this.loginForm.phone)) {
				useShowToast('手机号格式不正确~')
			}
			// 获取验证码接口
			const res = await api.loginApi.postPhoneCodeApi(this.loginForm.phone)
			if (res) {
				this.codeCountdownText(); //开始倒计时
			}
		},
		async onSubmit() {
			const phoneRegular = /^1\d{10}$/;
			const verifyCodeReg=/^\d{6}$/;
			const validateValue = Object.values(this.loginForm)
			if(!validateValue[0]) return uni.$u.toast("请输入手机号码~");
			if(!validateValue[1]) return uni.$u.toast("请输入验证码~");
			if(!phoneRegular.test(validateValue[0])) return uni.$u.toast("手机号格式不正确~");
			if(!verifyCodeReg.test(validateValue[1])) return uni.$u.toast("验证码格式不正确~");
			const res = await api.loginApi.postPhoneLoginApi(this.loginForm)
			if (res) {
				// 储存登录信息
				let tokenInfo = {
					refreshToken: res.refreshToken,
					isToken: res.token
				};
				let userInfo = {
					...tokenInfo,
					token: true, //token用于判断是否登录
					isThirdLogin: false
				};
				if (userInfo.token) {
					this.setUserInfo(userInfo);
				}
				useShowToast('登录成功~').then(async (res) => {
					this.saveUserInfo();
					await this.getAlarmTotalData();
					useReLaunch("/pages/personal/personal")
				});
			}
		},
		async getAlarmTotalData() {
			const res = await await api.loginApi.getAlarmTotalApi()
			if(!res)return
			//异步实时更新告警徽标数
			this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
		},
		async saveUserInfo() {
			//储存个人信息
			const res=await api.loginApi.setUserInfoApi()
			if(!res)return
			this.setUserInfo(res);
		},
		openAccountFunc() {
			useNavigateTo('../public/login')
		}
	}
};
</script>

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