<template>
	<div id="login">
		<img class="login-logo" src="./images/logo-login.svg" />
		<div class="login-con">
			<div class="login-title">用户登录</div>
			<div class="login-user" :class="{ 'select-border': change.user }">
				<img class="user-icon" src="./images/user.svg" />
				<div class="line-mid"></div>
				<input
					type="text"
					class="user-input"
					placeholder="请输入您的账号"
					v-model="userInfo.username"
					@focus="reduceBorder('user')"
					@blur="addBorder('user')"
				/>
				<span class="warning" v-show="warning.user">账号不能为空</span>
			</div>
			<div class="login-user user-mt" :class="{ 'select-border': change.pass }">
				<img class="user-icon" src="./images/password.svg" />
				<div class="line-mid"></div>
				<input
					type="password"
					class="user-input"
					placeholder="请输入您的密码"
					v-model="userInfo.password"
					v-show="!selectEye"
					@focus="reduceBorder('pass')"
					@blur="addBorder('pass')"
				/>
				<input
					type="text"
					class="user-input"
					placeholder="请输入您的密码"
					v-model="userInfo.password"
					v-show="selectEye"
					@focus="reduceBorder('pass')"
					@blur="addBorder('pass')"
				/>
				<img
					class="password-eye"
					src="./images/open.svg"
					@click="selectEyes"
					v-show="selectEye"
				/>
				<img
					class="password-eye"
					src="./images/close.svg"
					@click="selectEyes"
					v-show="!selectEye"
				/>
				<span class="warning" v-show="warning.pass">密码不能为空</span>
			</div>
			<div class="login-remake">
				<i
					class="icon iconfont iconfuxuan1 icon-style"
					v-show="!selectIcon"
					@click="selectRemeber"
				></i>
				<i
					class="icon iconfont iconfuxuan-xuanzhong icon-select"
					v-show="selectIcon"
					@click="selectRemeber"
				></i>
				<span class="remake_txt" @click="selectRemeber">记住账号密码</span>
			</div>
			<div class="login-btn" @click="goHome">登录</div>
		</div>
		<div class="reserved-con">
			<div class="reserved-words">版权所有：2020©某某市自然资源和规划</div>
			<div class="reserved-words line-two">
				技术支持：西安市自然资源规划局信息中心
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			selectIcon: true,
			selectEye: false,
			userInfo: {
				username: "",
				password: "",
			},
			change: {
				//边框
				user: false,
				pass: false,
			},
			warning: {
				user: false,
				pass: false,
			},
			canDo: 1,
		};
	},
	mounted() {
		this.initPage();
	},
	methods: {
		initPage() {
			let userInfo =
				localStorage.getItem("userInfo") &&
				JSON.parse(localStorage.getItem("userInfo"));
			if (userInfo) {
				this.userInfo.username = userInfo.username;
				this.userInfo.password = userInfo.password;
			}
		},
		selectRemeber() {
			this.selectIcon = !this.selectIcon;
		},
		goHome() {
			if (this.canDo) {
				this.canDo = 0;
				if (
					this.userInfo.username == "admin" &&
					this.userInfo.password == "123456"
				) {
					if (this.selectIcon) {
						localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
					} else {
						localStorage.removeItem("userInfo");
					}
					// this.$store.dispatch('user/login', this.userInfo).then(() => {
					//   this.$router.push('/home')
					// }).catch(() => {
					// })
					// this.$store.dispatch("permission_routes/getMenus");
					this.$router.push("/panel");
				} else if (!this.userInfo.username || !this.userInfo.password) {
					this.$message({
						duration: 2000,
						message: "账号或密码不能为空，请重新输入",
						type: "error",
					});
				} else {
					this.$message({
						duration: 2000,
						message: "账号或密码不正确，请重新输入",
						type: "error",
					});
				}
				setTimeout(() => {
					this.canDo = 1;
				}, 2000);
			}
		},
		selectEyes() {
			this.selectEye = !this.selectEye;
		},
		reduceBorder(type) {
			//获取焦点
			if (type == "user") {
				this.change.user = true;
			} else {
				this.change.pass = true;
			}
		},
		addBorder(type) {
			//失去焦点
			if (type == "user") {
				this.change.user = false;
				if (!this.userInfo.username) {
					this.warning.user = true;
				} else {
					this.warning.user = false;
				}
			} else {
				this.change.pass = false;
				if (!this.userInfo.password) {
					this.warning.pass = true;
				} else {
					this.warning.pass = false;
				}
			}
		},
	},
};
</script>
<style lang="less" scoped>
#login {
	width: 100vw;
	height: 100vh;
	background: url("./images/login-bg.png") center center no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	position: relative;
	.login-logo {
		display: block;
		margin: 0 auto;
		position: absolute;
		top: 11.5%;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 360px;
	}
	.login-con {
		position: absolute;
		top: 24%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.login-title {
		width: 320px;
		margin: 0 auto;
		font-size: 14px;
		font-weight: 500;
	}
	.login-user {
		width: 320px;
		height: 38px;
		border: 1px solid rgba(155, 155, 155, 1);
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: 20px;
		border-radius: 2px;
		position: relative;
		.user-icon {
			margin: 0 12px;
			float: left;
			width: 16px;
			height: 16px;
			margin-top: 11px;
		}
		.line-mid {
			width: 1px;
			height: 16px;
			background: #cbcbcb;
			float: left;
			margin-top: 11px;
			margin-right: 9px;
		}
		.user-input {
			width: 230px;
			float: left;
			font-size: 12px;
			margin-top: 11px;
			background: none;
			outline: 0;
			border: 0;
			color: #4a4a4a;
			box-shadow: inset 0 0 0 1000px #fff !important;
		}
		.password-eye {
			float: right;
			width: 16px;
			height: 16px;
			margin-right: 12px;
			margin-top: 11px;
			cursor: pointer;
		}
		.warning {
			font-size: 12px;
			color: red;
			position: absolute;
			left: 0;
			bottom: -18px;
		}
	}
	.user-mt {
		margin-top: 26px;
	}
	.select-border {
		border: 1px solid rgba(0, 113, 255, 1);
	}
	.login-remake {
		width: 320px;
		height: 14px;
		margin: 0 auto;
		margin-top: 26px;
		.icon-style {
			font-size: 12px;
			color: #5b5b5b;
			float: left;
			line-height: 14px;
			cursor: pointer;
		}
		.icon-select {
			font-size: 12px;
			color: rgba(0, 127, 255, 1);
			float: left;
			line-height: 14px;
			cursor: pointer;
		}
		.remake_txt {
			font-size: 12px;
			line-height: 14px;
			color: #5b5b5b;
			margin-left: 6px;
			float: left;
			cursor: pointer;
		}
	}
	.login-btn {
		width: 320px;
		height: 40px;
		background: rgba(0, 127, 255, 1);
		border-radius: 1px;
		margin: 0 auto;
		margin-top: 40px;
		font-size: 16px;
		line-height: 40px;
		text-align: center;
		color: #fff;
		cursor: pointer;
	}
	.reserved-con {
		position: absolute;
		bottom: 36%;
		left: 0;
		right: 0;
		margin: 0 auto;
	}
	.reserved-words {
		font-size: 12px;
		color: #b4b4b4;
		text-align: center;
	}
	.line-two {
		margin-top: 8px;
	}
}
</style>