<template>
	<div class="container">
		<el-row>
			<el-col :span="13">
				&nbsp;
			</el-col>
			<el-col :span="11">
				<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 ref="zhanghao" 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 ref="mima" placeholder="请输入密码" maxlength="16" type="password" v-model="ruleForm.upass" prefix-icon="el-icon-login-pass"
								@keyup.enter.native="submitForm('ruleForm')">
							</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 < 4) {
						callback(new Error('账号长度不小于4位'));
					} else {
						callback();
					}
				}, 30);
			};
			var validatePass = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (value === '') {
					return callback(new Error('请输入密码'));
				}

				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('密码长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			return {
				ruleForm: {
					uname: '',
					upass: ''
				},
				rules: {
					uname: [{
						validator: checkName
					}],
					upass: [{
						validator: validatePass
					}]
				}
			};
		},
		methods: {
			submitForm(formName) {
				let _this = this;
				let params = {
					number: '',
					password: ''
				}
				var username = String(_this.ruleForm.uname).trim()
				var userpass = String(_this.ruleForm.upass).trim()

				if (username && userpass) {
					params.number = username
					params.password = userpass
				} else {
					_this.$message.warning('请输入账号和密码！')
					if (!username)
						_this.$refs['zhanghao'].focus()
					else
						_this.$refs['mima'].focus()
					return
				}

				_this.$refs[formName].validate((valid) => {
					if (valid) {
						_this.$axios.get('/jxch-smartmp/HotWaters/userlog.action', {
								params: params
							})
							.then(res => {
								// console.log(res.data);
								if (typeof(res.data.msg) != 'undefined' && res.data.msg != '' && JSON.stringify(res
										.data) != '{}') {
									// console.log(typeof(res.data.msg));
									if (res.data.state == 0 && typeof res.data.access_token == 'undefined') {
										_this.$message.error(res.data.msg);
										return
									}
									_this.$message.success(res.data.msg);
									sessionStorage.setItem('uname', username);
									sessionStorage.setItem('level', res.data.level);
									// 请求头部携带token
									_this.$axios.defaults.headers['token'] = res.data.access_token;
									// console.log(_this.$axios.defaults);
									if (typeof(res.data.name) == 'undefined') {
										sessionStorage.setItem('unic', '未设置昵称');
									} else {
										sessionStorage.setItem('unic', res.data.name);
									}
									_this.$router.replace('/index'); //跳转到首页
								} else {
									_this.$message({
										showClose: true,
										message: "登陆异常：" + res.data.msg,
										type: 'error'
									});
								}
							})
							.catch(err => {
								// console.log(err);
								_this.$message.error('捕捉异常：' + err)
							})
					}
				});
			}
		}
	}
</script>

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