<template>
	<div class="login-wrap">
		<div class="ms-login">
			<!-- <div class="ms-title"><img src="../assets/img/loginbg.png" alt="" /></div> -->
			<el-form :model="param" :rules="rules" ref="login" label-width="0px" class="ms-content">
				<div class="title">
					<div><img src="../assets/img/logo2.png"></div>
					<p>智慧公寓管理系统</p>
				</div>
				<el-form-item prop="username">
					<input type="text" v-model="param.username" placeholder="请输入用户名" class="dlinput" />
					<i class="iconfont httpicon-zhanghao"></i>
				</el-form-item>
				<el-form-item prop="password">
					<input type="password" v-model="param.password" placeholder="请输入密码" class="dlinput"
						@keyup.enter="submitForm()" />
					<i class="iconfont httpicon-mima"></i>
				</el-form-item>
				<el-form-item prop="code" class="fromprop">
					<input type="txt" v-model="param.code" placeholder="验证码" class="dlinput" />
					<i class="iconfont httpicon-yanzhengma"></i>
					<img :src="'data:image/png;base64,' + checkCode.image" alt="" class="codeimg" v-if="checkCode.image"
						@click="codesx" />
				</el-form-item>
				<div class="login-btn">
					<el-button class="dlbtn" type="primary" @click="submitForm()">登录</el-button>
				</div>
				<p class="login-tips"></p>
			</el-form>
		</div>
	</div>
</template>

<script>
import {
	httpPost,
	httpGet1,
	setCode,
	httpPost1,
	httpGet
} from "../api/index";
import axios from "axios"
export default {
	data() {
		return {
			param: {
				username: "",
				password: "",
				code: "",
			},
			signature: "",
			rules: {
				username: [{
					required: true,
					message: "请输入用户名",
					trigger: "blur"
				},],
				password: [{
					required: true,
					message: "请输入密码",
					trigger: "blur"
				}],
				code: [{
					required: true,
					message: "请输入验证码",
					trigger: "blur"
				}],
			},
			code: "",
			checkCode: "",
			options: [],
			value: '',
			tenantId: ''
		};
	},
	created() {
		this.$store.commit("clearTags");
		httpGet1("", "/oauth/key").then((res) => {
			this.code = res.data;
		});
		var data = {
			signature: this.signature,
		};
		httpGet1(data, this.$api.getCheckCode).then((res) => {
			this.checkCode = res.data;
			this.signature = res.data.signature;
		});
	},
	mounted() {
		document.addEventListener('keydown', this.keyDown)
	},
	methods: {
		getuserid() {
			httpGet('', this.$api.getUserid).then(res => {

			})
		},
		getConfig() {
			httpGet1('', this.$api.getConfig).then(res => {
				if (res.success) {
					this.options = res.data.list
				} else {
					this.$message.error("获取失败")
				}
			})
		},
		selectTenantId(e) {
			this.tenantId = e
			localStorage.setItem('tenantId', this.tenantId)
			this.$tenantId = e
		},
		keyDown(e) {
			//如果是回车则执行登录方法
			if (e.keyCode == 13) {
				if (this.$route.name == 'Login') {
					this.submitForm();
				}
			}
		},
		// 刷新验证码
		codesx() {
			var data = {
				signature: this.signature,
			};
			httpGet1(data, this.$api.getCheckCode).then((res) => {
				this.checkCode = res.data;
				this.signature = res.data.signature;
			});
		},
		// 回调-页面权限
		backfun(i18n, callback) {
			if (i18n.subs) {
				callback(i18n.subs[0], callback)
			} else {
				return i18n.index
			}
		},
		getChidlren(data, key, value) {
			var hasFound = false, // 表示是否有找到id值
				result = null;
			var fn = function (data) {
				if (!hasFound) { // 判断是否是数组并且没有的情况下，
					data.forEach(item => {
						if (item[key] === value) { // 数据循环每个子项，并且判断子项下边是否有id值
							result = item; // 返回的结果等于每一项
							hasFound = true; // 并且找到id值
						} else if (item.subs) {
							fn(item.subs); // 递归调用下边的子项
						}
					})
				}
			}
			fn(data); // 调用一下
			return result;
		},
		submitForm() {
			localStorage.setItem('tenantId', '')
			// if (this.tenantId == '') {
			//   this.$message.success("请选择客户");
			//   return
			// }
			const loading = this.$loading({
				lock: true,
				text: "Loading",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			const _this = this;
			var fd = new FormData();
			fd.append("client_id", "iot-client");
			fd.append("client_secret", setCode(this.code, "iot-client"));
			fd.append("grant_type", "password");
			fd.append("scope", "all");
			fd.append("username", this.param.username);
			fd.append("password", setCode(this.code, this.param.password));
			if (this.param.code == '' || this.signature == '') {
				loading.close();
				this.$message.error("请输入验证码")
				return
			}
			var datacode = {
				code: this.param.code.toUpperCase(),
				signature: this.signature,
			};
			var info = JSON.parse(localStorage.getItem('info'))
			// localStorage.setItem("ms_username", 'zw001');
			// _this.$router.push("/");
			httpPost1(datacode, this.$api.checkCodeMatches).then((res) => {
				if (res.data.pass) {
					httpPost(fd, this.$api.postLogin)
						.then((res1) => {
							if (res1.access_token) {
								// httpGet({}, '/oauth/revoke').then(res4 => { })
								_this.$message.success("登录成功");
								this.param.code = ''
								this.signature = ''
								localStorage.setItem("tokenkey", JSON.stringify(res1));
								localStorage.setItem("ms_username", _this.param.username);
								httpGet('', this.$api.userInfo).then(res3 => {
									var tenantId = res3.data.tenantId.split(',')
									// localStorage.setItem('tenantId',tenantId[0])
									localStorage.setItem('info', JSON.stringify(res3.data))
									// this.$store.commit("getselectoption")
									this.$store.commit('updateTenantId', tenantId[0])
									if (res3.data.type == 0) {
										_this.$router.push("/home");
									} else {
										// if (tenantId[0] == '300' || tenantId[0] == '200') {
										let i18n = this.$language.cn.i18n;
										let data = ''
										let authoritiesList = res3.data.authorities.filter(item => (item != 'BLUETOOTH_INPUT' && item != 'NORMALLY_OPEN_PERMISSION' && item != 'FREEZE_PERMISSION' && item != 'REMOTE_CONTROL_PERMISSION'))
										console.log(authoritiesList)
										if (authoritiesList[0] == 'BLUETOOTH_INPUT') {
											data = this.getChidlren(i18n.items, 'key', authoritiesList[1])
										} else {
											data = this.getChidlren(i18n.items, 'key', authoritiesList[0])
										}
										console.log(data)
										_this.$router.push("/" + data.index);
									}
								})
								loading.close();
							} else {
								_this.$message.error("登录失败");
							}
						})
				} else {
					loading.close();
					_this.$message.error("请输入正确验证码");
					this.checkCode = res.data;
					this.signature = res.data.signature;
				}
			});
		},
	},
};
</script>

<style scoped>
.login-wrap {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	position: relative;
	background-color: rgb(118, 218, 255);
	overflow: hidden;
}

.login-wrap::before {
	content: '';
	position: absolute;
	bottom: 15vh;
	min-width: 300vw;
	min-height: 300vw;
	border: 20px solid #eeeeee;
	opacity: 0.5;
	background-color: #ffffff;
	animation: rote 25s linear infinite;
}

.login-wrap::before {
	left: -95%;
	border-radius: 45%;
	opacity: .5;
}

.login-wrap::after {
	left: -95%;
	border-radius: 48%;
}

@keyframes rote {
	from {
		transform: rotateZ(0);
	}

	to {
		transform: rotateZ(360deg);
	}
}

/* .login-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../assets/img/beijingtu.png) no-repeat center;
	background-color: rgb(45, 136, 225);
	background-size: 100%;
} */

.ms-title {
	width: 50%;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
	/* border-bottom: 1px solid #ddd; */
}

.ms-title img {
	width: 100%;
}

.ms-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30%;
	position: absolute;
	left: 50%;
	top: 50%;
	/* margin: -190px 0 0 -175px; */
	transform: translateX(-50%) translateY(-50%);
	border-radius: 10px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 6px 41px 5px rgba(15, 98, 134, 0.15);
	/* box-shadow: 0px 6px 41px 10px rgba(15, 98, 134, 0.15); */
	overflow: hidden;
	padding: 30px;
}

.title {
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	font-size: 0.5rem;
	font-family: "黑体";
	color: rgb(45, 136, 225);
	margin-bottom: 30px;
}

.title img {
	width: 45%;
}

.ms-content {
	padding: 0 30px;
	width: 100%;
}

.login-btn {
	text-align: center;
}

.login-btn button {
	width: 100%;
	height: 36px;
	margin-bottom: 10px;
}

.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}

.fromprop {
	position: relative;
}

.fromprop .el-input {
	width: calc(100% - 120px);
	border: none;
}

.dlinput {
	border: none;
	width: 100%;
	line-height: 40px;
	height: 40px;
	outline: none;
	box-sizing: border-box;
	padding-left: 30px;
	border-bottom: 1px solid #dcdfe6;
	background: none;
}

.dlinput:focus,
.dlinput:hover {
	background: none;
}

.dlinput>.el-input__inner {
	border: none;
}

.dlinput+i {
	position: absolute;
	top: 50%;
	left: 4px;
	transform: translateY(-50%);
	z-index: 99;
	color: #333;
	font-size: 20px;
	color: #333;
}

.dlinput .el-input-group__prepend .el-button {
	border: none;
}

.codeimg {
	width: 120px;
	height: 30px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}

.login-btn .dlbtn {
	width: 50%;
	display: inline-block;
}

.el-form-item__content {
	position: relative;
}

.ms-content .iconfont {
	color: rgba(15, 98, 134, 0.15);
}

@media screen and (max-width: 1200px) {
	.titlep {
		font-size: 0.4rem;
	}
}

@media screen and (max-width: 745px) {
	.ms-title {
		display: none;
	}

	.ms-content {
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.ms-login {
		width: 88%;
	}
}

.thirdParty {
	text-align: center;
}

.titlep {
	font-size: 12px;
	color: #666;
	margin: 20px auto;
	position: relative;
	display: inline-block;
}

.titlep::before {
	content: "";
	position: absolute;
	width: 50px;
	height: 0.5px;
	background: #f2f2f2;
	transform: translateY(-50%);
	top: 50%;
	left: -100%;
}

.titlep::after {
	content: "";
	position: absolute;
	width: 50px;
	height: 0.5px;
	background: #f2f2f2;
	transform: translateY(-50%);
	top: 50%;
	right: -100%;
}

.thirdicon .iconfont {
	font-size: 30px;
	cursor: pointer;
}

.thirdicon span:nth-child(1) .iconfont {
	color: #1ED76D;
}

.thirdicon span:nth-child(2) .iconfont {
	color: #1FA0FE;
}

.thirdicon span:nth-child(3) .iconfont {
	color: #E43F32;
}</style>
