<template>
	<div class='login-container'>
		<el-row>

			<el-col :span="8" :offset="8">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<span>库房管理平台</span>
					</div>
					<div>
						<el-form class="login-form">
							<!-- <img src="../../../assets/图片4.png" class="login-img" /> -->

							<el-form-item>
								<el-input v-model="username" type="text" placeholder="请输入用户名" style="width: 300px">{{username}}</el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="password" type="password" placeholder="请输入密码" style="width: 300px" @keyup.enter.native="login">{{password}}</el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" style="width: 300px" @click="login()">登陆</el-button>
							</el-form-item>
						</el-form>
					</div>
				</el-card>
			</el-col>

		</el-row>

	</div>
</template>

<script>
	import axios from '@/axios';


	export default {
		data() {
			return {
				username: '',
				password: '',
			}
		},
		methods: {
			login() {
				const loading = this.$loading({
					lock: true,
					text: '正在登陆请稍后···',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				var url = 'SysLogin/login.do'
				var param = {
					username: this.username,
					password: this.password
				}

				axios.post(url, param).then(response => {

					if (response.data === 'username') {
						this.$message.error('无该用户信息');
						console.log('username')
					} else if (response.data === 'password') {
						this.$message.error('密码错误');
						console.log('password')
					} else {
						console.log('login success')
						console.log(response.data)
						//Cookies.set('token', response.data)  
						this.$store.commit('menuRouteLoaded', false)
						localStorage.setItem('userId', response.data.id)
						localStorage.setItem('belongId', response.data.belongId)
						localStorage.setItem('userName', response.data.userDesc)
						localStorage.setItem('token', response.data.token)
						this.$router.push('/home')
					}
					if (response) {
						loading.close();
					}

				});

			}
		}

	}
</script>
<style>
	.login-container {
		height: 100%;
		width: 100%;
		margin: 0px 0px 0px 0px;
		background: #606266;
		/* url(../../../assets/login.jpg) no-repeat; */
		background-size: 100% 100%;
		padding-top: 15%;
		/* padding-left: 35%; */
		text-align: center;
	}

	.login-form {
		/* position: absolute; */

	}

	.login-img {
		width: 70px;
		padding-left: 0;
		vertical-align: middle;
		display: inline-block;
		float: none;
	}


	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both
	}

	.box-card {
		width: 100%;
		text-align: center;
	}
</style>
