<template>
	<div class="c-box">
		<div class="c-box-form">
			<div class="sys-logo">
				<!-- <h2 class="title">湄潭竹香米业</h2> -->
				<!-- <h3 class="sub-title">数字农业精准管理图系统</h3> -->
			</div>
			<el-main>
				<el-form ref="form" :model="form" :rules="rules">
					<h3 class="formTitle">
						<img src="../assets/images/login-logo-bg3.png">
						贵州“林产品态势图”应用平台</h3>
					<el-form-item prop="userName">
						<el-input placeholder="请输入账号" v-model="form.userName"><i slot="prefix" class="el-input__icon el-icon-user iconBlue"></i></el-input>
					</el-form-item>
					<el-form-item prop="pwd">
						<el-input placeholder="请输入密码" v-model="form.pwd" show-password><i slot="prefix" class="el-input__icon el-icon-lock iconBlue"></i></el-input>
					</el-form-item>
					<el-form-item><el-button style="width: 100%;" type="primary" native-type="submit" @click="onSubmit" :loading="loading">登录</el-button></el-form-item>
				</el-form>
			</el-main>
		</div>
	</div>
</template>

<script>
import md5 from 'md5';
export default {
	data() {
		return {
			form: {
				userName: '',
				pwd: ''
			},
			loading: false,
			fun: this.$timeFun(400)
		};
	},
	computed: {
		//需要提交的表单数据
		submitData() {
			return {
				userName: this.form.userName,
				//加密算法
				pwd: md5('b8d11ee289394be688ef3a4f6968efed'.substring(0, 8)).substring(0, 5) + btoa(this.form.pwd)
			};
		},
		//表单验证规则
		rules() {
			return {
				userName: [{ required: true, message: '请输入用户名', trigger: 'change' }, { min: 2, max: 8, message: '长度在 3 到 8 个字符', trigger: 'change' }],
				pwd: [{ pattern: /^.{6,15}$/, message: '密码必须6-15位', trigger: 'change' }]
			};
		}
	},
	methods: {
		onSubmit() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.loading = true;
					this.fun(() => {
						this.$port.login(this.submitData).then(res => {
							this.loading = false;
							if (!res.code) {
								this.$message({
									message: '登录成功',
									type: 'success',
									duration: 800
								});
								//同步数据到状态管理
								this.$store.commit('saveToken', res.accessToken || '');
								this.$store.commit('saveUser', res);
								this.$router.push('/layout');
							}
						});
					});
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less">
.iconBlue {
	color: #70BA7B;
	font-size: 18px;
}
.c-box {
	min-height: 100vh;
	background: url(../assets/images/login-bg.png) no-repeat center center;
	background-size: 100% 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	&-form {
		margin-top: -3%;
		width: 800px;
		padding: 0;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 0 15px 0 rgba(0,0,0,.3);
		border-radius: 10px;
		overflow: hidden;
		.sys-logo {
			width: 340px;
			height: 300px;
			background:url(../assets/images/login-logo-bg2.png) no-repeat left center,url(../assets/images/login-logo-bg.png) no-repeat center center;
			background-size:93% 89%, 102% 107%;
			float: left;
			text-align: center;
			margin-right: 20px;
			h2,
			h3 {
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
				text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.74);
			}
			.title {
				margin: 84px 0 5px 0;
				font-size: 30px;
			}
			.sub-title {
				font-size: 18px;
				letter-spacing: 3px;
			}
		}
		.el-main {
			padding: 20px 36px 20px 22px;
			.formTitle {
				display: flex;
				align-items: center;
				font-size: 18px;
				color: #336666;
				font-weight: 700;
				margin: 15px 0 18px 0;
				letter-spacing:4px;
				img{
					width: 42px;
					height: 38px;
					margin-right: 10px;
				}
			}
			.el-input input:focus{
				border-color: #70BA7B;
			}
		}
		.el-button {
			width: 100%;
			background: linear-gradient(180deg, #70BA7B 1%, #70BA7B 100%);
			border: none;
			box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.1);
		}
	}
}
</style>
