<template>
	<el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
		<el-form-item prop="email" style="margin-bottom: 25px;">
			<el-input v-model="form.email" prefix-icon="el-icon-message" clearable
				placeholder="邮箱号">
			</el-input>
		</el-form-item>
		<el-form-item prop="code" style="margin-bottom: 20px;">
			<div class="login-msg-yzm">
				<el-input v-model="form.code" prefix-icon="el-icon-unlock" clearable
					placeholder="验证码"></el-input>
				<el-button @click="getCode" :disabled="disabled">获取验证码<span v-if="disabled">
						({{ time }})</span></el-button>
			</div>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" style="width: 100%;" :loading="islogin" @click="login">登录
				</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	data() {
		return {
			redirect: undefined,
			form: {
				email: "",
				code: "",
			},
			rules: {
				email: [
					{ required: true, message: "请输入邮箱号" },
					{
						validator: (rule, value, callback) => {
							let reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
							if (reg.test(value)) {
								callback();
							} else {
								callback(new Error('请输入正确的邮箱号'));
							}
						}
					}
				],
				code: [
					{ required: true, message: "请输入验证码" }
				]
			},
			disabled: false,
			time: 0,
			islogin: false,
		}
	},
	mounted() {

	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect;
			},
			immediate: true,
		},
	},
	methods: {
		async getCode() {
			let that = this;
			var validate = await this.$refs.loginForm.validateField("email").catch(() => { })
			if (!validate) { return false }
			this.$API.auth.email_code.req({ email: that.form.email }).then(res => {
				this.$message.success('验证码已发送')
				this.disabled = true;
				this.time = 60
				var t = setInterval(() => {
					this.time -= 1
					if (this.time < 1) {
						clearInterval(t)
						this.disabled = false
						this.time = 0
					}
				}, 1000)
			}).catch(err => {
				this.disabled = false;
				this.$message.warning(err)
			})
		},
		async login() {
			let that = this;
			this.$refs.loginForm.validate(async (valid) => {
				if (valid) {
					this.$API.auth.login_email_code.req(that.form).then(res => {
						that.$TOOL.data.set("TOKEN", res.access);
						that.$TOOL.data.set("TOKEN_REFRESH", res.refresh);
						that.$TOOL.data.set("TOKEN_TIME", new Date().getTime());
						that.$API.auth.info.get().then(async res1 => {
							that.$TOOL.data.set("USER_INFO", res1);
							that.$TOOL.data.set("PERMISSIONS", Object.keys(res1.perms));
							let base_dashboard = this.$TOOL.data.get('BASE_INFO').base.base_dashboard;

							if (base_dashboard == null || base_dashboard == undefined || base_dashboard == '') {
								base_dashboard = '/dashboard'
							}
							if(this.$TOOL.data.get('BASE_INFO').base.base_menucate=='dynamic'){
								try{
									var res = await that.$API.system.user.routers.req({})
									this.$TOOL.data.set("MENU",res)
									console.log(res)
								} catch (err) {
								}
							}
							this.$router.replace({
								path: base_dashboard,
							});

						})
					}).catch(err => {
						this.disabled = false;
						this.$message.warning(err)
					})
				}
			})
		}
	}
}
</script>

<style></style>
