<template>
	<div class="page-login">
		<div class="svg-top">
			<!-- <?xml version="1.0" encoding="utf-8"?> -->
			<svg version="1.1" height="1337" width="1337">
				<defs>
					<path id="path-1" opacity="1" fill-rule="evenodd"
						d="M1337,668.5 C1337,1037.455193874239 1037.455193874239,1337 668.5,1337 C523.6725684305388,1337 337,1236 370.50000000000006,1094 C434.03835568300906,824.6732385973953 6.906089672974592e-14,892.6277623047779 0,668.5000000000001 C0,299.5448061257611 299.5448061257609,1.1368683772161603e-13 668.4999999999999,0 C1037.455193874239,0 1337,299.544806125761 1337,668.5Z" />
					<linearGradient id="linearGradient-2" x1="0.79" y1="0.62" x2="0.21" y2="0.86">
						<stop offset="0" stop-color="rgb(88,62,213)" stop-opacity="1" />
						<stop offset="1" stop-color="rgb(23,215,250)" stop-opacity="1" />
					</linearGradient>
				</defs>
				<g opacity="1">
					<use xlink:href="#path-1" fill="url(#linearGradient-2)" fill-opacity="1" />
				</g>
			</svg>
		</div>
		<div class="svg-bottom">
			<!-- <?xml version="1.0" encoding="utf-8"?> -->
			<svg version="1.1" height="896" width="967.8852157128662">
				<defs>
					<path id="path-2" opacity="1" fill-rule="evenodd"
						d="M896,448 C1142.6325445712241,465.5747656464056 695.2579309733121,896 448,896 C200.74206902668806,896 5.684341886080802e-14,695.2579309733121 0,448.0000000000001 C0,200.74206902668806 200.74206902668791,5.684341886080802e-14 447.99999999999994,0 C695.2579309733121,0 475,418 896,448Z" />
					<linearGradient id="linearGradient-3" x1="0.5" y1="0" x2="0.5" y2="1">
						<stop offset="0" stop-color="rgb(40,175,240)" stop-opacity="1" />
						<stop offset="1" stop-color="rgb(18,15,196)" stop-opacity="1" />
					</linearGradient>
				</defs>
				<g opacity="1">
					<use xlink:href="#path-2" fill="url(#linearGradient-3)" fill-opacity="1" />
				</g>
			</svg>
		</div>
		<section class="container">
			<section class="wrapper">
				<header>
					<div class="flex align-center">
						<div class="logo">
							<img :src="loginImg" alt="">
						</div>
						<h3>智能能效管理系统</h3> 
					</div>
					<h1>Welcome 易站</h1>
					<!-- <p>User Login</p> -->
				</header>
				<section class="main-content">
					<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="form">
					  <el-form-item prop="username">
					    <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
					      <template #prefix>
					        <el-icon>
					          <User />
					        </el-icon>
					      </template>
					    </el-input>
					  </el-form-item>
					  <el-form-item prop="password">
					    <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
					      @keyup.enter="handleLogin">
					      <template #prefix>
					        <el-icon>
					          <Lock />
					        </el-icon>
					      </template>
					    </el-input>
					  </el-form-item>
					  <el-form-item prop="code" v-if="captchaOnOff">
					    <div class="flex justify-between">
					      <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
					        @keyup.enter="handleLogin">
					        <template #prefix>
					          <svg-icon icon-class="validCode" class="el-input__icon input-icon" />
					        </template>
					      </el-input>
					      <div class="login-code">
					        <img :src="codeUrl" @click="getCode" class="login-code-img" />
					      </div>
					    </div>
					  </el-form-item>
					  <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
					  <el-form-item style="width: 100%">
					    <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin"
					      @keyup.enter.native="handleLogin">
					      <span v-if="!loading">登 录</span>
					      <span v-else>登 录 中...</span>
					    </el-button>
					    <div style="float: right" v-if="register">
					      <router-link class="link-type" :to="'/register'">立即注册</router-link>
					    </div>
					  </el-form-item>
					</el-form>
				</section>
				<!-- <footer>
					<p><a href="" title="Forgot Password">Forgot Password?</a></p>
					<p><a href="" title="Register">Register</a></p>
				</footer> -->
			</section>
		</section>

	</div>
</template>

<script setup>
	import loginImg from "@/assets/logo/logo.png";
	import {
		getCodeImg
	} from "@/api/login";
	import Cookies from "js-cookie";
	import {
		encrypt,
		decrypt
	} from "@/utils/jsencrypt";
	import {
		parseTime
	} from "@/utils/ruoyi";
	import AES from "@/utils/crypto";
	
	const store = useStore();
	const router = useRouter();
	const {
		proxy
	} = getCurrentInstance();

	const loginForm = ref({
		// username: "admin",
		// password: "admin123",
		username: "",
		password: "",
		rememberMe: false,
		code: "",
		uuid: "",
	});

	const loginRules = {
		username: [{
			required: true,
			trigger: "blur",
			message: "请输入您的账号",
		}, ],
		password: [{
			required: true,
			trigger: "blur",
			message: "请输入您的密码",
		}, ],
		code: [{
			required: true,
			trigger: "change",
			message: "请输入验证码",
		}, ],
	};

	const codeUrl = ref("");
	const loading = ref(false);
	// 验证码开关
	const captchaOnOff = ref(true);
	// 注册开关
	const register = ref(false);
	const redirect = ref(undefined);
	const route = useRoute();
	let key;

	function handleLogin() {
		proxy.$refs.loginRef.validate((valid) => {
			if (valid) {
				loading.value = true;
				// 勾选了需要记住密码设置在cookie中设置记住用户明和名命
				if (loginForm.value.rememberMe) {
					Cookies.set("username", loginForm.value.username, {
						expires: 30,
					});
					Cookies.set("password", encrypt(loginForm.value.password), {
						expires: 30,
					});
					Cookies.set("rememberMe", loginForm.value.rememberMe, {
						expires: 30,
					});
				} else {
					// 否则移除
					Cookies.remove("username");
					Cookies.remove("password");
					Cookies.remove("rememberMe");
				}
				// key = parseTime(new Date(), '{yyyy}-{mm}-{dd} {hh}hsj')

				key = "Yzkj20220512jhsj";
				// 调用action的登录方法
				store
					.dispatch("Login", {
						code: loginForm.value.code,
						password: AES.encrypt(loginForm.value.password, key),
						username: AES.encrypt(loginForm.value.username, key),
						// password: loginForm.value.password,
						// username: loginForm.value.username,
						uuid: loginForm.value.uuid,
					})
					.then(() => {
						router.push({
							path: redirect.value || "/",
						});
					})
					.catch(() => {
						loading.value = false;
						// 重新获取验证码
						if (captchaOnOff.value) {
							getCode();
						}
					});
			}
		});
	}

	function getCode() {
		getCodeImg().then((res) => {
			captchaOnOff.value =
				res.captchaOnOff === undefined ? true : res.captchaOnOff;
			if (captchaOnOff.value) {
				codeUrl.value = "data:image/gif;base64," + res.img;
				loginForm.value.uuid = res.uuid;
			}
		});
	}

	function getCookie() {
		const username = Cookies.get("username");
		const password = Cookies.get("password");
		const rememberMe = Cookies.get("rememberMe");
		loginForm.value = {
			username: username === undefined ? loginForm.value.username : username,
			password: password === undefined ? loginForm.value.password : decrypt(password),
			rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
		};
	}

	getCode();
	getCookie();
	// console.log("outer.currentRoute", route.query, route.query.redirect)
</script>

<style lang='scss' scoped>
	@import url("../assets/styles/login.css");
	.page-login {
		position: relative;
		margin: 0;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		background-color: #DBE0F9;
		font-family: 'Roboto', sans-serif;
		.svg-top {
			position: absolute;
			top: -900px;
			right: -300px;
		}
		.svg-bottom {
			position: absolute;
			bottom: -500px;
			left: -200px;
		}
	}
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		.wrapper {
			padding: 40px;
			background-color: #fff;
			border-radius: 20px;
			width: 350px;
			z-index: 1;
			header {
				margin-bottom: 40px;
				.logo {
					width: 70px;
					height: 70px;
					padding: 4px;
					border-radius: 50px;
					background-color: #6065D9;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				h1 {
					color: #6065D9;
					font-size: 35px;
					font-weight: 500;
					margin-bottom: 0;
					margin-top: 40px;
				}
				h3 {
					color: #6065D9;
					font-weight: bold;
					margin-left: 10px;
				}
			}
			.main-content {
				input {
					border: none;
					display: block;
					width: 100%;
					height: 50px;
					margin: 15px 0;
					font-size: 18px;
					color: #999;
					&::placeholder {
						color: #999;
						font-size: 18px;
						font-weight: 300;
					}
					&:focus {
						outline: none;
					}
				}
				.line {
					width: 100%;
					height: 2px;
					background-color: #99999955;
				}
				button {
					background: linear-gradient(to right, #6065D9, #17D7FA);
					border: none;
					border-radius: 50px;
					font-size: 18px;
					font-weight: 300;
					color: #fff;
					display: block;
					width: 100px;
					height: 40px;
					margin: 0 auto;
					outline: none;
					cursor: pointer;
				}
			}
			footer {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				margin-top: 60px;
				p {
					margin: 0;
					font-weight: 100;
					a {
						color: #6065D9;
						text-decoration: none;
					}
				}
			}
		}
	}
	@media (min-width: 320px) and (max-width: 768px) {
		.wrapper {
			margin: 0 10px !important;
			padding: 30px;
			header {
				h1 {
					font-size: 30px;
				}
			}
		}
	}
</style>