<template>
	<div class="container">
		<el-row>
			<el-col :span="24">
				<div id="login_form">
					<div id="logo"></div>
					<div id="title">南昌交通学院热水端管理后台</div>
					<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
						class="demo-ruleForm">
						<el-form-item prop="uname">
							<el-input placeholder="请输入账号" maxlength="16" v-model="ruleForm.uname"
								prefix-icon="el-icon-login-user"></el-input>
						</el-form-item>
						<el-form-item prop="upass">
							<el-input placeholder="请输入密码" maxlength="16" type="password" v-model="ruleForm.upass"
								prefix-icon="el-icon-login-pass"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="submitForm('ruleForm')">登 陆</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			var checkName = (rule, value, callback) => {
				console.log(rule, value, callback);
				if (!value) {
					return callback(new Error('请输入账号'));
				}
				setTimeout(() => {
					if (value.length < 6) {
						callback(new Error('账号长度不小于6位'));
					} else {
						callback();
					}
				}, 30);
			};
			var validatePass = (rule, value, callback) => {
				console.log(rule, value, callback);
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					callback();
				}
			};
			return {
				ruleForm: {
					uname: '',
					upass: ''
				},
				rules: {
					uname: [{
						validator: checkName,
						trigger: 'blur'
					}],
					upass: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			onSubmit() {

			},
			submitForm(formName) {
				let self = this;
				this.$refs[formName].validate((valid) => {
					this.loading = true;
					requset.api_login(self.form)
						.then(resp => {
							this.loading = false;
							if (resp.data.code == 200) {
								let token = resp.data.data.token.access_token;
								//存储用户名到数据库。
								db.set("userName", resp.data.data.user.name);
								//发送登录成功的action
								this.loginAction(token);
								this.$message("验证成功!");
								this.$router.replace('/'); //跳转到首页
							} else {
								this.$message({
									showClose: true,
									message: resp.data.msg,
									type: 'error'
								});
							}

						})
				});
			}
		}
	}
</script>

<style scoped>
	@import url("./login.css");
</style>
