<template>
	<div class="login-page">
		<canvas id="canvas" width="1380" height="500"></canvas>
		<div id="digital-matrix"></div>
		<transition appear name="fade-in">
			<div v-if="show" class="login-body">
				<el-card class="login-form">
					<el-form class="login-form-body" ref="form" :model="formData" :rules="rules">
						<el-form-item class="form-title">
							<div class="text">用户登录</div>
						</el-form-item>
						<el-form-item prop="loginNoStr">
							<el-input placeholder="请输入账号" prefix-icon="el-icon-user" clearable
								v-model.trim="formData.loginNoStr"></el-input>
						</el-form-item>
						<el-form-item prop="loginPasswd">
							<el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-key" clearable
								v-model.trim="formData.loginPasswd"></el-input>
						</el-form-item>
						<el-form-item prop="captcha">
							<el-row :gutter="15">
								<el-col :span="16">
									<el-input type="text" placeholder="验证码" prefix-icon="el-icon-mobile-phone" clearable
										v-model.trim="formData.captcha"></el-input>
								</el-col>
								<el-col :span="8">
									<img class="code-icon" @click="getCode" :src="getCodePath" alt="" />
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item class="remenber">
							<el-checkbox class="checkbox" v-model="remenber">
								记住密码
							</el-checkbox>
							<router-link class="forget" @click.native="handleForgetPass" to="/login">
								忘记密码?
							</router-link>
						</el-form-item>
						<el-form-item>
							<el-button @click="handleSub" :loading="loading" class="sub-button" type="primary" round="">
								登录
							</el-button>
						</el-form-item>
					</el-form>
				</el-card>
				<div class="form-footer">
					<div class="text">footer</div>
				</div>
			</div>
		</transition>
	</div>
</template>

<script>
	// import PMatrix from "p-digital-matrix";
	export default {
		data() {
			let checkUsername = (rule, value, callback) => {
				if (value == "" || value.trim().length == 0) {
					callback(new Error("用户名不可以为空"));
				} else {
					callback();
				}
			};
			let checkPassword = (rule, value, callback) => {
				if (value == "" || value.trim().length == 0) {
					callback(new Error("密码不可以为空"));
				} else {
					callback();
				}
			};
			let checkCode = (rule, value, callback) => {
				if (value == "" || value.trim().length == 0) {
					callback(new Error("验证码不可以为空"));
				} else {
					if (value != this.codeValue) {
						callback(new Error("验证码输入不正确"));
						return;
					}
					callback();
				}
			};
			return {
				formData: {
					loginNoStr: "",
					loginPasswd: "",
					captcha: "",
				},
				loading: false,
				rules: {
					loginNoStr: [{
						validator: checkUsername,
					}, ],
					loginPasswd: [{
						validator: checkPassword,
					}, ],
					captcha: [{
						validator: checkCode,
						trigger: "blur",
					}, ],
				},
				remenber: false,
				show: false,
				codePath: "/user/get_kaptcha_image",
				test: {},
				getCodePath: "",
				codeValue: "",
			};
		},
		created() {
			let _this = this;
			document.body.onkeyup = (e) => {
				try {
					if (e.keyCode == 13) {
						_this.handleSub();
					}
				} catch (e) {
					throw e;
				}
			};
			this.checkCookie();
		},
		mounted() {
			if (this.$route.query.agileauthtoken) {
				this.$store.commit("setToken", this.$route.query.agileauthtoken);
				window.sessionStorage.agileauthtoken = JSON.stringify(
					this.$route.query.agileauthtoken
				);
				this.getAdminMenus();
			}
			this.show = true;
			this.getCode();
		},
		methods: {
			// ...mapActions(['login']),
			checkCookie() {
				let userInfo = this.$cookie.get("u-i-p");
				if (userInfo) {
					this.formData = JSON.parse(userInfo);
					this.formData.code = "";
					this.remenber = true;
				}
			},
			async getAdminMenus() {
				await this.$http({
					url: "/sysmgr/sys/login/auth/functions",
					method: "post",
					headers: {
						"Content-Type": "application/json",
					},
					data: {},
				}).then((res) => {
					if (
						res.status == 200 &&
						res.data.functions &&
						res.data.functions.length > 0
					) {
						window.sessionStorage.childrenMenus = JSON.stringify(
							res.data.functions
						);
						this.$store.commit("setMenus", this.menu(res.data.functions, 3));
						window.sessionStorage.menus = JSON.stringify(
							this.menu(res.data.functions, 2)
						);
						this.$store.commit("setUserInfo", res.data.loginMsg);

						let userInfo = Object.assign({}, res.data.loginMsg);

						window.sessionStorage.userInfo = JSON.stringify(userInfo);
						this.menuIndex(res.data.functions);
					} else {
						global.$vm.$notify.error({
							title: "提示",
							message: "当前用户无权限登录",
						});
					}
				});
			},
			menu(data, v) {
				var arr = [];
				data.map((o) => {
					var obj1 = {};
					if (o.systemflag !== "1") {
						if (o.parentCode) {
							var cvTag = o.parentCode == "99998";
						} else {
							cvTag = false;
						}
						if (cvTag) {
							//判断是否是第一层
							obj1.systemflag = o.systemflag;
							obj1.name = o.functionName;
							obj1.rountPath = "";
							obj1.icon = o.icon || "layui-icon layui-icon-ok-circle";
							obj1.target = "_self";
							obj1.children = menuSon(o.functionCode);
							arr.push(obj1);
						}
					}
				});

				function menuSon(id) {
					var arr1 = [];
					data.map((o) => {
						var obj1 = {};
						var myId = o.functionCode;
						if (v === 2) {
							if (o.parentCode == id) {
								//找到是父亲的儿子数据
								obj1.systemflag = o.systemflag;
								obj1.name = o.functionName;
								obj1.rountPath = o.jspUrl;
								obj1.icon = o.icon;
								obj1.target = "_self";

								var tag = sonIs(myId); //判断是否有儿子
								if (tag) {
									//有儿子
									obj1.children = menuSon(myId); //调用孙生成节点函数
								} else {
									obj1.children = "";
								}
								arr1.push(obj1);
							}
						} else {
							if (o.parentCode == id && o.systemflag !== "1") {
								//找到是父亲的儿子数据
								obj1.systemflag = o.systemflag;
								obj1.name = o.functionName;
								obj1.rountPath = o.jspUrl;
								obj1.icon = o.icon;
								obj1.target = "_self";

								var tag = sonIs(myId); //判断是否有儿子
								if (tag) {
									//有儿子
									obj1.children = menuSon(myId); //调用孙生成节点函数
								} else {
									obj1.children = "";
								}
								arr1.push(obj1);
							}
						}
					});
					return arr1;
				}

				function sonIs(id) {
					//查找是否有儿子
					var tag = false;

					data.map((o) => {
						if (o.parentCode == id) {
							tag = true;
						}
					});
					return tag;
				}
				return arr;
			},
			menuIndex(data) {
				let path = "";
				for (let i = 0; i < data.length; i++) {
					if (data[i].systemflag === "2") {
						if (path === "") {
							path = data[i].jspUrl;
						}
						let params = {
							children: "",
							name: data[i].functionName,
							rountPath: data[i].jspUrl,
							target: "_self",
						};
						let set = new Set([...this.$store.state.tabList, params]);
						set.add(params);
						this.$store.commit("setTabList", Array.from(set));
					}
				}
				if (this.$route.query.url) {
					this.$router.push({
						path: this.$route.query.url,
						query: {
							id: this.$route.query.woNo,
							type: this.$route.query.type,
						},
					});
				} else {
					this.$router.push(path);
				}
			},
			async handleSub() {
				this.$refs.form.validate((res) => {
					if (res) {
						if (this.remenber) {
							this.setPassInCookie();
						} else {
							this.clearPassInCookie();
						}
						let dataForm = JSON.parse(JSON.stringify(this.formData));
						this.loading = true;
						dataForm.loginPasswd = this.Encrypt(dataForm.loginPasswd);
						dataForm.loginNoStr = this.Encrypt(dataForm.loginNoStr);
						this.$http({
								url: "/sysmgr/sys/login/auth/token",
								method: "post",
								headers: {
									"Content-Type": "application/json",
								},
								data: dataForm,
							})
							.then((res) => {
								if (res.status == 200 && res.data.result == 0) {
									document.body.onkeyup = undefined;
									this.$store.commit("setToken", res.data.token);
									window.sessionStorage.agileauthtoken = JSON.stringify(
										res.data.token
									);
									this.getAdminMenus();
								} else {
									global.$vm.$notify.error({
										title: "提示",
										message: res.data.desc,
									});
								}
								this.loading = false;
								this.getCode();
							})
							.catch(() => {
								this.loading = false;
								this.getCode();
							});
					}
				});
			},
			setPassInCookie() {
				this.$cookie.set("u-i-p", JSON.stringify(this.formData), {
					expires: 7,
				});
			},
			clearPassInCookie() {
				this.$cookie.delete("u-i-p");
			},
			getCode() {
				this.$http({
					url: "/sysmgr/sys/login/auth/captcha",
					method: "get",
					params: {
						date: Date.parse(new Date()), //加入时间戳 防止ie缓存
					},
				}).then((res) => {
					this.getCodePath = "data:image/jpeg;base64," + res.data.body;
					this.codeValue = res.data.desc;
				});
			},
			handleForgetPass() {
				this.$notify.info({
					title: "提示",
					message: "暂时无法在线找回密码，请联系超级管理员重置您的密码",
				});
			},
			Encrypt(word, key) {
				if (CryptoJS) {
					var Encryptkey = CryptoJS.enc.Utf8.parse("o7H8uIM2O5qv65l2");
					var srcs = CryptoJS.enc.Utf8.parse(word);
					var encrypted = CryptoJS.AES.encrypt(srcs, Encryptkey, {
						mode: CryptoJS.mode.ECB,
						padding: CryptoJS.pad.Pkcs7,
					});
					return encrypted.toString();
				} else {
					throw e;
				}
			},
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.fade-in-enter-active {
		transition: 0.5s;
		transition-timing-function: ease-out;
		transform: translateY(0px);
		opacity: 1;
	}

	.fade-in-enter {
		transition: 0.5s;
		transition-timing-function: ease-out;
		transform: translateY(-15%);
		opacity: 0;
	}

	.code-icon {
		width: 100%;
		height: 38px;
		cursor: pointer;
	}

	.login-page {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/login-bg.jpg);
		background-repeat: no-repeat;
		background-size: 100% 65%;
		background-color: #e5ebf2;

		#canvas {
			z-index: 7;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 65%;
		}

		#digital-matrix {
			z-index: 5;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 65%;
		}

		.login-body {
			position: relative;
			z-index: 10;
			width: 600px;
			height: 100%;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.logo {
				flex-shrink: 0;
				flex-grow: 0;
				width: auto;
				margin-bottom: 70px;
				transform: scale(1.7);
			}

			.login-form {
				width: 100%;
				border-radius: 15px;
				padding-bottom: 20px;
				// backdrop-filter: blur(10px);
				// background-color: rgba(255,255,255,.4);
				min-height: 447px;

				.login-form-body {
					width: 380px;
					margin: auto;

					.form-title {
						padding: 15px 0px;
						text-align: center;

						.text {
							font-size: 24px;
						}

						.text:after {
							display: block;
							margin: auto;
							width: 40px;
							height: 0px;
							border: 2px solid #409eff;
							content: ".";
							overflow: hidden;
						}
					}

					.sub-button {
						display: block;
						width: 100%;
					}

					.remenber {
						::v-deep.el-form-item__content {
							line-height: 14px;
						}
					}

					.checkbox {
						::v-deep.el-checkbox__inner {
							border-radius: 50%;
						}

						::v-deep.el-checkbox__label {
							padding-left: 5px;
						}
					}

					.forget {
						float: right;
						color: #409eff;
					}
				}
			}

			.form-footer {
				width: 100%;
				padding: 0px 20px;
				padding-top: 60px;
				font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #666666;
				letter-spacing: 0;

				.text {
					display: inline-block;
					text-align: center;
					width: 50%;
				}
			}
		}
	}
</style>
