<template>
		<div class="background">
			<!-- <img :src="imgSrc" /> -->
			<div class="title-center">宿舍管理可视化监控平台</div>

			<div class="center-content">
				<el-form label-width="0px" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
					class="demo-ruleForm">
					<el-form-item prop="uname" class="user-block">
						<div class="user-icon"></div>
						<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" class="pwd-block">
						<div class="pwd-icon"></div>
						<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 prop="upass" class="build-block">
						<div class="build-icon"></div>
						<el-select class="select" v-model="ruleForm.value" placeholder="请选择楼栋" @change="selectChange">
							<el-option
							v-for="item in ruleForm.options"
							:key="item.value"
							:label="item.label"
							:value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" class="login-block" @click="submitForm('ruleForm')">登 陆</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
</template>

<script>
	// import userIcon from '../assets/imageIndex/userImg.png'
	// import first from '../assets/images/firstIcon.png'
	export default {
		data() {
			var checkName = (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);
			};
			var validatePass = (rule, value, callback) => {
				// console.log(rule, value, callback);
				if (value === '') {
					callback(new Error('请输入密码'));
				}
				setTimeout(() => {
					if (value.length < 5) {
						callback(new Error('密码长度不小于5位'));
					} else {
						callback();
					}
				}, 30);
			};
			return {
				ruleForm: {
					uname: '',
					upass: '',
					options: [{
					value: '1',
					label: '1-2栋'
					}, {
					value: '2',
					label: '3-4栋'
					}, {
					value: '3',
					label: '5-6栋'
					}, {
					value: '4',
					label: '7-8栋'
					}, {
					value: '5',
					label: '9-10栋'
					},{
					value: '6',
					label: '11-12栋'
					}, {
					value: '7',
					label: '13-14栋'
					}, {
					value: '8',
					label: '15-16栋'
					}],
					value: ''
				},
				rules: {
					uname: [{
						validator: checkName,
						trigger: 'blur'
					}],
					upass: [{
						validator: validatePass,
						trigger: 'blur'
					}]
				},
				resultEncodeP: '',//加密密码
			}
		},
		// created() {
		// 	const IP = sessionStorage.getItem("ip");
		// 	// console.log('222',IP)
		// 	let ipList = [
		// 	"58.17.42.179",
		// 	"218.64.4.4",
		// 	"10.201.5.31",
		// 	"10.205.64.222",
		// 	"171.34.215.31",
		// 	"182.105.82.9",
		// 	"220.175.60.46",
		// 	"39.160.30.198",
		// 	];
		// 	let isip = ipList.includes(IP);
		// 	if (!isip) {
		// 	alert("没有访问权限");
		// 	this.closeWin();
		// 	}
		// },
		methods: {
			//修改下拉框
			selectChange(e){
				this.value=e
			},
			submitForm(formName) {
				let _this = this;
				if(_this.value==undefined){
					_this.$message({
						showClose: true,
						message: "楼栋不能为空",
						type: 'error'
					});
				}else{
					let params = {}
					var username = String(_this.ruleForm.uname).trim()
					var userpass = String(_this.ruleForm.upass).trim()

					if (username && userpass) {
						params.userName = username
						params.password = userpass
					} else {
						_this.$message.warning('请输入账号和密码！')
						if (!username)
							_this.$refs['zhanghao'].focus()
						else
							_this.$refs['mima'].focus()
						return
					}
					// 开始加密
					_this.resultEncodeP = _this.$fns.rsaEncode(userpass)
					// console.log(_this.resultEncodeP);

					_this.$axios.post(`/auto/user/login`,
						{
							'user':username,//账号
							'passWord':_this.resultEncodeP,//密码
							'build':_this.value,//楼栋
						},)
						.then(res => {
							console.log(res.data);
							if (res.data.success) {
								_this.$message.success(res.data.message);
								// sessionStorage.setItem('uname', username)
								// sessionStorage.setItem('userType', res.data.data.userType)
								sessionStorage.setItem('token', res.data.data.token)
								sessionStorage.setItem('build', res.data.data.build)
								_this.$router.replace('/index'); //跳转到首页
							} else {
								_this.$message({
									showClose: true,
									message: "登陆异常：" + res.data.message,
									type: 'error'
								});
							}
						})
						.catch(err => {
							// console.log(err);
							_this.$message.error('捕捉异常：' + err)
						})
				}
				
			},

		}
	}
</script>

<style>
	.background {
		/* position: relative; */
		width: 1920px;
		height: 1080px;
		background-image: url('../assets/index/loginbg.png');
  		background-size: 100%;
	}

	.title-center {
		position: absolute;
		z-index: 2;
		top: 181px;
		width: 1920px;
		font-size: 72px;
		font-family : '优设标题黑';
		color: #FFFFFF;
		/* background-image: url(../assets/imageIndex/title.png); */
	}

	.center-content {
		position: absolute;
		z-index: 2;
		/* left: 502px; */
		top: 0px;
		width: 1920px;
		height: 1373px;
		/* background-image: url(../assets/imageIndex/centerBg.png); */
	}

	/* .user-block {
		position: absolute;
		z-index: 2;
		left: 251px;
		top: 284px;
		width: 1090px;
		height: 125px;
		background-color: #007C6F;
	}

	.pwd-block {
		position: absolute;
		z-index: 2;
		left: 251px;
		top: 512px;
		width: 1090px;
		height: 125px;
		background-color: #007C6F;
	} */

	.user-block .el-input--prefix .el-input__inner {
		position: absolute;
		z-index: 2;
		left: 381px;
		top: 284px;
		width: 1090px;
		height: 115px;
		background-color: rgba(0, 72, 91, 0.4);
		border: none;
		font-size: 36px;
		font-family: MicrosoftYaHei;
		color: rgba(255, 255, 255, 0.5);
		padding-left: 100px;
	}

	.pwd-block .el-input--prefix .el-input__inner {
		position: absolute;
		z-index: 2;
		left: 381px;
		top: 420px;
		width: 1090px;
		height: 115px;
		background-color: rgba(0, 72, 91, 0.4);
		border: none;
		font-size: 36px;
		font-family: MicrosoftYaHei;
		color: rgba(255, 255, 255, 0.5);
		padding-left: 100px;
	}
	.build-block .select{
		position: absolute;
		z-index: 2;
		left: 381px;
		top: 570px;
		width: 1090px;
		height: 115px;
		background-color: rgba(0, 72, 91, 0.4);
		border: none;
		font-size: 36px;
		font-family: MicrosoftYaHei;
		color: rgba(255, 255, 255, 0.5);
		/* padding-left: 100px; */
	}
	/* 下拉框 */
	.build-block .el-input {
		position: relative;
		font-size: 36px;
		height: 115px;
		/* background-color: rgba(0, 72, 91, 0.4); */
	}
	.build-block .el-input__inner {
		-webkit-appearance: none;
		background-color: rgba(0, 72, 91, 0.4);
		background-image: none;
		border-radius: 4px;
		/* border: 1px solid #DCDFE6; */
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		height: 100%;
		line-height: 40px;
		outline: 0;
		padding: 0 15px;
		transition: border-color .2s cubic-bezier(.645,.045,.355,1);
		width: 100%;
	}
	/* 下拉框里样式 */
	.build-block .el-select-dropdown__list .el-select-dropdown__item {
		font-size: 20px;
		padding: 0 20px;
		position: relative;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #606266;
		height: 34px;
		line-height: 34px;
		box-sizing: border-box;
		cursor: pointer;
	}

	.login-block {
		position: absolute;
		z-index: 2;
		left: 381px;
		top: 720px;
		width: 1090px;
		height: 123px;
		background: linear-gradient(0deg, #00FFC6 0%, #D8F8FF 100%);
		text-align: center;
		color: #095442;
		font-size: 46.26px !important;
		font-family: MicrosoftYaHei;
		padding-top: 20px;
	}
	::v-deep .el-button {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #FFF;
		border: 1px solid #DCDFE6;
		color: #606266;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: 0;
		margin: 0;
		transition: .1s;
		font-weight: 500;
		padding: 12px 20px;
		font-size: 46px;
		border-radius: 4px;
	}

	.el-form-item>>>.el-icon-login-user {
		/* margin-left: 22px; */
		/* background: url(../assets/imageIndex/userImg.png) center no-repeat; */
		/* background-size: contain; */
	}

	.el-form-item>>>.el-icon-login-pass {
		/* margin-left: 22px; */
		/* background: url(../assets/imageIndex/pwdImg.png) center no-repeat; */
		/* background-size: contain; */
	}

	.user-block .el-form-item__error {
		padding-left: 381px;
		padding-top: 410px;
		font-size: 36px;
	}

	.pwd-block .el-form-item__error {
		padding-left: 381px;
		padding-top: 540px;
		font-size: 36px;
	}
	
	.user-icon{
		position: absolute;
		z-index: 20;
		left: 270px;
		top: 340px;
		width: 57px;
		height: 57px;
		/* background-image: url(../assets/imageIndex/userImg.png); */
	}
	
	.pwd-icon{
		position: absolute;
		z-index: 20;
		left: 270px;
		top: 500px;
		width: 57px;
		height: 57px;
		/* background-image: url(../assets/imageIndex/pwdImg.png); */
	}
</style>
