<template>
	<div class="zy-template">
		<div class="login">
			<div class="login__left"></div>
			<div class="login__right">
				<div class="login__right__box">
					<h1>登录您的账户</h1>
					<el-form ref="loginForm" :model="form" label-width="60px" :rules="rules">
						<el-form-item label="账号:" prop="username">
							<el-input v-model="form.username"></el-input>
						</el-form-item>
						<el-form-item label="密码:" prop="password">
							<el-input type="password" v-model="form.password"></el-input>
						</el-form-item>
						<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import TokenManager from '../../static/js/token.js'
	export default {
		data() {
			return {
				form: {
					username: "",
					password: ""
				},
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			/**
			 * 提交表单时间
			 */
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (!valid) return false;
					//提交表单
					this.$http.Post(this.$global.login, this.form).then(res => {
						TokenManager.setToken(res.data);
						this.$router.replace("/")
					})
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.zy-template {
		background-size: cover;
		background: rgb(218, 234, 251) url("./static/bg.png") no-repeat center;
		overflow: hidden;
		height: 100%;

		& .login {
			background: white;
			overflow: hidden;
			border-radius: 15px;
			margin: 5% auto;
			width: 80%;
			height: 80%;
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);

			&__left {
				float: left;
				transform: rotateY(180deg);
				width: 60%;
				height: 100%;
				background-size: 85%;
				background-repeat: no-repeat;
				background-image: url(static/satellite.png);
				background-position: center;
			}

			&__right {
				width: 40%;
				float: left;

				&__box {
					margin: 30% auto;
					box-sizing: border-box;
					width: 300px;

					& h1 {
						margin: 30px 0;
						font-size: 28px;
						font-weight: normal;
						color: #1F2533;
					}

					& .el-button {
						width: 300px;
						display: block;
						margin: 0 auto;
					}

					& .el-form-item {
						box-sizing: border-box;
						padding: 5px 0;
					}
				}
			}
		}
	}
</style>
