<template>
	<div class="login-container">
		<div
			class="login-background"
			:style="{
				backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')',
				backgroundSize: '100% 100%',
				backgroundRepeat: 'no-repeat',
			}"
		>
			<div class="login-background-container">
				<div class="back-title">
					Wel<span>come</span>
					<p>
						<span class="back-title-point" />&gt;&gt;&gt;项目名称&lt;&lt;&lt;
					</p>
				</div>
				<img
					:src="require('../../assets/img/login.gif')"
					style="width: 90%; margin-left: 5%"
					alt=""
				/>
			</div>
		</div>
		<el-form
			ref="dataForm"
			:model="dataForm"
			:rules="dataRule"
			class="login-form"
			autocomplete="on"
			label-position="left"
		>
			<div class="title-container">
				<h3 class="title" :title="'标题'">
					<img
						src="../../assets/img/cnbm.png"
						style="width: 1em; height: 1em; position: relative; top: .15em; margin-right: 12px"
						alt=""
					/>
					<!-- {{ "title" | i18nFilter }} -->
					中建材智能自动化院
				</h3>
			</div>

			<el-form-item prop="username" style="margin: 0px 8.3%">
				<el-input
					ref="username"
					v-model="dataForm.username"
					:placeholder="'请输入用户名'"
					name="username"
					type="text"
					tabindex="1"
					autocomplete="on"
				/>
			</el-form-item>

			<el-tooltip
				v-model="capsTooltip"
				content="Caps lock is On"
				placement="right"
				manual
			>
				<el-form-item prop="password" style="margin: 8px 8.3%">
					<el-input
						:key="passwordType"
						ref="password"
						v-model="dataForm.password"
						:type="passwordType"
						:placeholder="'请输入密码'"
						name="password"
						tabindex="2"
						autocomplete="on"
						@keyup.native="checkCapslock"
						@blur="capsTooltip = false"
						@keyup.enter.native="dataFormSubmitHandle"
					/>
					<span class="show-pwd" @click="showPwd">
						<!-- <svg-icon
							:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
						/> -->
					</span>
				</el-form-item>
			</el-tooltip>

			<el-form-item prop="captcha" style="margin: 0px 8.3%">
				<el-row :gutter="20">
					<el-col :span="14">
						<el-input
							v-model="dataForm.captcha"
							:placeholder="$t('login.captcha')"
						>
							<!-- <span slot="prefix" class="el-input__icon">
								<svg class="icon-svg" aria-hidden="true">
									<use xlink:href="#icon-safetycertificate"></use>
								</svg>
							</span> -->
						</el-input>
					</el-col>
					<el-col :span="10" class="login-captcha">
						<img :src="captchaPath" @click="getCaptcha()" />
					</el-col>
				</el-row>
			</el-form-item>
			<!-- <lang-select class="login-language" /> -->

			<el-button
				:loading="loading"
				type="primary"
				style="width: 83.4%; height: 6vh; background-color: #0B58FF; margin: 0px 8.3%; margin-top: 5vh"
				@click.native.prevent="dataFormSubmitHandle"
			>
				<!-- {{ "login.logIn" | i18nFilter }} -->
				登录
			</el-button>
			<el-row class="login-footer">
				<el-row class="login-language">
					<el-col
						:span="2"
						:offset="8"
						:class="['login-language-box', language === 'zh' ? 'isActive' : '']"
						@click.native="changeLanguage('zh')"
					>
						中文
					</el-col>
					<el-col :span="1" :offset="1" style="color: #DCDFE6">|</el-col>
					<el-col
						:span="2"
						:offset="1"
						:class="['login-language-box', language === 'en' ? 'isActive' : '']"
						@click.native="changeLanguage('en')"
					>
						English
					</el-col>
				</el-row>
				<el-row class="login-copyright">
					<!-- {{ "copyright.copyright" | i18nFilter }}：{{
						"copyright.company" | i18nFilter
					}}&nbsp;&nbsp;&nbsp;&nbsp;{{ "copyright.version" | i18nFilter }}：1.0 -->
					版权所有: &copy;中建材智能自动化研究院有限公司 2023 v1.0
				</el-row>
			</el-row>
		</el-form>
	</div>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import { getUUID } from "@/utils";

export default {
	name: "Login",
	data() {
		return {
			baseImg: require("../../assets/img/login-back.png"),
			coverImgUrl: "",
			dataForm: {
				username: "admin",
				password: "admin",
				uuid: "string",
				captcha: "",
			},
			captchaPath: "",
			passwordType: "password",
			capsTooltip: false,
			loading: false,
			redirect: undefined,
			otherQuery: {},
		};
	},
	computed: {
		language() {
			return "zh";
		},
		dataRule() {
			return {
				username: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				password: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
				captcha: [
					{
						required: true,
						message: this.$t("validate.required"),
						trigger: "blur",
					},
				],
			};
		},
	},

	created() {
		this.getCaptcha();
	},

	methods: {
		// 检查大写
		checkCapslock() {},
		// 显示密码
		showPwd() {},
		// 改变语言环境
		changeLanguage(lang) {},
		// 获取验证码
		getCaptcha() {
			this.dataForm.uuid = getUUID();
			this.captchaPath = `${window.SITE_CONFIG["apiURL"]}/captcha?uuid=${this.dataForm.uuid}`;
		},
		// 表单提交
		dataFormSubmitHandle: debounce(
			function() {
				this.$refs["dataForm"].validate((valid) => {
					if (!valid) {
						return false;
					}
					this.$http
						.post("/login", this.dataForm)
						.then(({ data: res }) => {
							if (res.code !== 0) {
								this.getCaptcha();
								return this.$message.error(res.msg);
							}
							Cookies.set("token", res.data.token);
							this.$router.replace({ name: "home" });
						})
						.catch(() => {});
				});
			},
			1000,
			{ leading: true, trailing: false }
		),
	},
};
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

// $bg:#283443;
$light_gray: #fff;
$cursor: #161616;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
	.login-container .el-input input {
		color: $cursor;
		height: 6vh !important;
	}
}

/* reset element-ui css */
.login-container {
	.el-input {
		display: inline-block;
		height: 47px;
		width: 85%;

		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
		}
	}

	.el-form-item {
		border: 1px solid #d7d8d9;
		border-radius: 5px;
		color: #454545;
		height: 6vh;
		.el-form-item__content {
			height: calc(6vh - 2px);
			line-height: 6vh;
			.el-input {
				height: calc(6vh - 2px);
			}
		}
	}
}
</style>

<style lang="scss" scoped>
// $bg:#2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
$cursor: #161616;

.login-container {
	min-height: 100%;
	width: 100%;
	background-size: cover;
	// background-color: $bg;
	overflow: hidden;
	.login-background {
		position: absolute;
		width: 60%;
		top: 0;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		.login-background-container {
			width: 95%;
			.back-title {
				color: #26b9de;
				font-size: 88px;
				margin-left: 17%;
				span {
					color: #fff;
				}
				p {
					font-size: 22px;
					letter-spacing: 1px;
					.back-title-point {
						display: inline-block;
						width: 16px;
						height: 16px;
						border-radius: 8px;
						background-color: #26b9de;
						margin-right: 14px;
					}
				}
			}
		}
	}

	.login-form {
		position: absolute;
		width: 40%;
		max-width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		padding: 0 6.67%;
		margin: 0 auto;
		overflow: hidden;
		background: rgba($color: #fff, $alpha: 1);
		backdrop-filter: blur(10px);
		box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1);
		.login-footer {
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			margin-bottom: 5vh;
		}
		.login-language {
			font-size: 15px;
			text-align: center;
			color: $cursor;
			margin-bottom: 12px;
			.login-language-box {
				cursor: pointer;
			}
			.isActive {
				color: #0b58ff;
				cursor: auto;
			}
		}
		.login-copyright {
			text-align: center;
			color: #c7c7c7;
			font-size: 15px;
			line-height: 28px;
			padding: 0 16%;
		}
	}

	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;

		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}

	.svg-container {
		padding: 6px 5px 6px 15px;
		color: #000;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}

	.title-container {
		position: relative;
		margin-top: 18vh;

		.title {
			font-size: 34px;
			line-height: 6vh;
			margin: 0px auto 40px auto;
			text-align: center;
			overflow: hidden;
			text-overflow: ellipsis;
			word-break: break-all;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			letter-spacing: 2px;
		}
	}

	.show-pwd {
		position: absolute;
		right: 10px;
		top: 0;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}

	.thirdparty-button {
		position: absolute;
		right: 0;
		bottom: 6px;
	}

	@media only screen and (max-width: 470px) {
		.thirdparty-button {
			display: none;
		}
	}
}
</style>
