<template>
  <div id="login">
		<div id="login_wrapper">
      
			<img class="login-bg" :src="$setting.login_bg" alt />
      <img class="login-icon" :src="$setting.login_logo">
			<el-form
				:model="ruleForm"
				:rules="rules"
				ref="ruleForm"
				label-position="right"
				label-width="0px"
				class="demo-ruleForm"
				id="login-container"
				@submit.native.prevent
			>
				<el-form-item>
					<span class="login-title">ETA — 让投研领先市场半步</span>
				</el-form-item>
				<el-form-item prop="account">
					<el-input
						type="text"
						v-model="ruleForm.account"
						auto-complete="off"
						placeholder="请输入用户名"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="checkPass" v-if="visible">
					<el-input
						type="password"
						v-model="ruleForm.checkPass"
						auto-complete="off"
						placeholder="请输入账号"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="checkPass" v-else>
					<el-input
						type="text"
						v-model="ruleForm.checkPass"
						auto-complete="off"
						placeholder="请输入密码"
					>
					</el-input>
				</el-form-item>
				<div class="remember-cont">
					<el-checkbox v-model="checked" class="remember"
						>保持登录状态</el-checkbox
					>
					<div class="warn-check-tip" v-show="checked">
						<i class="el-icon-warning"/>
						勾选表示信任此设备，系统将不会自动退出该设备，使用公用电脑请勿勾选！
					</div>
				</div>
				<el-form-item>
					<el-button
						type="primary"
						size="medium"
						@click.native="handleSubmit2"
						:loading="logining"
						class="submit_btn"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import { userLogin, departInterence } from "@/api/api.js";
import http from "@/api/http.js";
import md5 from "@/utils/md5.js";
export default {
  data() {
    return {
      b: new http.Base64(),
      logining: false, //登录loadding
      ruleForm: {
        account: "",
        checkPass: "",
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        checkPass: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      checked: false, //是否保持登录状态
      visible: true, //密码输入类型
    };
  },
  created() {
    this.keyupSubmit(); //回车登录
    let userAccount = localStorage.getItem("account") || null;
    let userCheckPass = localStorage.getItem("checkPass") || null;
    if (userAccount) {
      this.ruleForm.account = this.b.decode(userAccount);
      this.ruleForm.checkPass = this.b.decode(userCheckPass);
      this.checked = true;
    }
  },
  methods: {
    keyupSubmit() {
      //回车登录
      document.onkeydown = (e) => {
        let keyval = window.event.keyCode;
        if (keyval === 13) {
          this.handleSubmit2();
        }
      };
    },
    handleSubmit2() {
      //登录
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.logining = true;
          var loginParams = {
            Username: that.ruleForm.account,
            Password: md5.hex_md5(that.ruleForm.checkPass),
            IsRemember: this.checked,
          };
          userLogin(loginParams).then(async (res) => {
            if (res.Ret === 200) {
              localStorage.setItem("auth", res.Data.Authorization);
              localStorage.setItem("userName", res.Data.RealName);
              localStorage.setItem("Role", res.Data.RoleTypeCode);
              localStorage.setItem("RoleIdentity", res.Data.SysRoleTypeCode);
              localStorage.setItem("RoleType", res.Data.ProductName);
              localStorage.setItem("ManageType", res.Data.Authority);
              localStorage.setItem("AdminId", res.Data.AdminId);
              localStorage.setItem("AdminName", res.Data.AdminName);
              if (this.checked) {
                localStorage.setItem(
                  "account",
                  this.b.encode(this.ruleForm.account)
                );
                localStorage.setItem(
                  "checkPass",
                  this.b.encode(this.ruleForm.checkPass)
                );
              } else {
                localStorage.removeItem("account");
                localStorage.removeItem("checkPass");
              }

              let path = "";
              switch (res.Data.RoleTypeCode) {
                case "rai_researcher":
                case "ficc_researcher":
                case "researcher":
                  path = "/reportlist";
                  break;
                case "compliance": //合规
                  path = "/contractapprovallist";
                  break;
                case "special_researcher": //特邀研究员
                  path = "/dataList";
                  break;
                case "special_ficc_seller":
                  path = "/meetingCalendar";
                  break;
                default:
                  path = await this.getOtherRolePath("myCalendar");
              }
              this.$router.push({ path });
            }
            that.logining = false;
          });
        }
      });
    },
    changePass(value) {
      //密码输入格式切换
      this.visible = !(value === "show");
    },
    getOtherRolePath(pathVal) {
      return departInterence.getMenu().then((res) => {
        let resolvePath = "";
        if (res.Ret === 200) {
          let menuList = res.Data.List || [];
          if(!menuList.length){
						this.$message.error('该账号没有任何菜单权限,请联系管理员')
						return
					}

          // 是否已经拿到菜单信息
          sessionStorage.setItem("hasGetMenu", "true");
          sessionStorage.setItem("MenuList", JSON.stringify(menuList));
          /* 是否有数据报表权限 */
          this.$store.commit(
            "SET_DATA_AUTH",
            menuList.some((item) => item.name === "数据报表")
          );

          for (let i = 0; i < menuList.length; i++) {
            const arr=menuList[i].children||[]
						
						if(arr.some(it => it.path == pathVal)){
              resolvePath = "/" + pathVal;
              break;
            }
          }
          return resolvePath || "/" + menuList[0].children[0].path;
        }
        return "/" + pathVal;
      });
    },
  },
  destroyed() {
    document.onkeydown = null;
  },
};
</script>

<style lang="scss" scoped>
#login {
	width: 100%;
	height: 100%;
	background: #fff;
	position: relative;
	overflow: hidden;
	#login_wrapper {
		width: 100%;
		height: 100%;
		background-color: #fff;
		position: relative;

		.login-bg {
			position: absolute;
			left: 2%;
			top: 50%;
			object-fit: cover;
			transform: translateY(-50%);
			width: 46%;
			height: 90%;
		}

		.login-icon {
			position: absolute;
      top: 40px;
			right: 40px;
		}
		.login-title {
			color: #333;
			font-size: 30px;
			display: block;
      text-align: center;
			margin-bottom: 30px;
		}

		#login-container {
			box-sizing: border-box;
			border-radius: 10px;
			position: absolute;
			top: 31%;
			right: 12%;
			z-index: 100;
			input::-webkit-input-placeholder {
				color: #595959 !important;
			}
			.remember {
				margin: 0px 0 20px;
			}
			.submit_btn {
				width: 100%;
				height: 60px;
				background: #3654C1;
				font-size: 20px;
				border-radius: 5px;
			}
			.el-input input {
				width: 100%;
				height: 40px;
				color: #333333;
				font-size: 16px;
			}
			.el-input-group__append,
			.el-input-group__prepend {
				background-color: rgba(255, 255, 255, 0.8);
				color: rgb(51, 51, 51);
				border: none;
			}
			.el-input.el-input-group.el-input-group--prepend input {
				background-color: rgba(255, 255, 255, 0.8);
				color: rgb(51, 51, 51);
				border: none;
			}
			.el-checkbox__label {
				color: rgb(51, 51, 51);
				font-size: 14px;
			}
			.el-checkbox__input.is-checked + .el-checkbox__label {
				color: rgb(51, 51, 51);
				font-size: 14px;
			}
			.el-form-item__content .el-input-group,
			.el-form-item__label,
			.el-tag .el-icon-close {
				padding-bottom: 5px;
				vertical-align: middle;
				border-bottom: 1px solid #eaeaea;
			}
			.el-button--primary {
				background: #3654C1 !important;
				border: none;
			}
			.el-form-item__content {
				padding-bottom: 5px;
			}
			.el-form-item {
				margin-bottom: 30px;
			}
		}

		@media screen and (min-width: 1201px){ 
			.login-bg{ 
				display: block;
			}
			#login-container {
				width: 31%;
			}
		}
		@media screen and (max-width: 1200px){
			.login-bg{ 
				display: none; 
			}
			#login-container {
				width: 70%;
			}
		}
	}
	.remember-cont {
		position: relative;
		margin-bottom: 35px;
		.warn-check-tip {
			position: absolute;
			min-width: 300px;
			left: 130px;
			top: 0;
			padding: 2px 10px;
			border: 1px solid #D1433A;
			background: #FFEAE9;
			color: #B72E18;
			font-size: 14px;
		}
	}
}
</style>
