<template>
  <div class="login-wrap">
    <h2 class="title" style="color:#fff">任职资格管理系统{{titleName}}</h2>

    <el-form label-position="left" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px"
      class="demo-ruleForm login-container" v-if="loginFlag">
      <h3 class="title">用户登录</h3>
      <el-form-item prop="userNo">
        <el-input type="text" v-model="ruleForm.userNo" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input   :type="flag ? 'password' : 'text'" v-model="ruleForm.password" auto-complete="off"
         placeholder="密码"   @keyup.native.enter="submitForm('ruleForm')">
          <template #suffix>
              <img class="yanjing" :src="flag ? icon2:icon1" alt=""  @click="checkEye">
            </template>
         </el-input>
      </el-form-item>
      <el-form-item prop="orgCode">
        <el-select  v-model="ruleForm.orgCode" placeholder="请选择部门" style="width:100%">
          <el-option  v-for="item in deptList" :key="item.code" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-checkbox class="remember" v-model="rememberpwd">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submitForm('ruleForm')"
          :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>
import {
  titleName,
  getDeptList,
  login
} from "../api/userMG";
  import {
    setCookie,
    getCookie,
    delCookie
  } from "../utils/utils";
  export default {
    name: "login",
    data() {
      return {
        titleName: titleName,
        icon1:require('../assets/yanjing.png'),
        icon2:require('../assets/yanjing-yincang.png'),
        yijiangtPCD: {},
        orgCode: "",
        deptList: [],
        logining: false,
        rememberpwd: false,
        loginFlag:true,
        forgeFlag:false,
        ruleForm: {
          userNo: "",
          password: ""
        },
        editForm: {
          userNo: "",
          password: ""
        },
        rules: {
          userNo: [{
            required: true,
            message: "请输入账号",
            trigger: "blur"
          }],
          password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }]
        },
             flag: true,

      };
    },
    created() {
      // 获取存在本地的用户名密码
      this.getuserpwd();
      this.getDataFun();
      // 获取部门列表
      this.getDeptList();
    },
    methods: {
          // 切换显示密码的事件
      checkEye() {
          this.flag = !this.flag
      },
      getDeptList() {
        getDeptList().then(res => {
          if (res.code == 200) {
            this.deptList = res.data
          }
          console.log("获取部门列表");
        });
      },
      getDataFun() {
        if (document.URL.indexOf("?") < 0) return; //获取当前url地址,如果没参数.直接返回
        const str = document.URL.split("?")[1];
        const obj = {};
        let arr;
        //当有多个参数时
        arr = str.split("&");
        let arr1;
        for (var i = 0; i < arr.length; i++) {
          arr1 = arr[i].split("=");
          obj[arr1[0]] = arr1[1];
        }
        this.yijiangtPCD = obj
      this.ruleForm.userNo = this.yijiangtPCD.userNo
     this.ruleForm.password = this.yijiangtPCD.password
      },
      // 获取用户名密码
      getuserpwd() {
        // 如果缓存里面有记录，就直接获取登录
        if (getCookie("user") != "" && getCookie("pwd") != "") {
          this.ruleForm.userNo = getCookie("user");
          this.ruleForm.password = getCookie("pwd");
          this.rememberpwd = true;
        }
      },

      // 登录方法封装
    //   async loginFun() {
    //     const res = await login(this.ruleForm);
    //     console.log(res, "res登录");
    //     if (res.code == 200) {
    //       if (this.rememberpwd == true) {
    //         //保存帐号到cookie，有效期7天
    //         setCookie("user", this.ruleForm.userNo, 7);
    //         //保存密码到cookie，有效期7天
    //         setCookie("pwd", this.ruleForm.password, 7);
    //       } else {
    //         delCookie("user");
    //         delCookie("pwd");
    //       }
    //       setTimeout(() => {
    //         this.logining = false;
    //         // 缓存用户个人信息
    //         localStorage.setItem("userdata", JSON.stringify(res.data));
    //         this.$store.commit("login", "true");
    //         if (res.data.roleName == '公司管理员') {
    //           this.$router.push("/home/index");
    //         }
    //         else {
    //           this.$router.push("/accountManagement/companyGroup");
    //         }
    //         // 弹出登录成功
    //         this.$message({
    //           message: "登录成功",
    //           type: "success"
    //         });
    //       }, 1000);
    //     } else {
    //       this.$message.error(res.msg);
    //       this.logining = false;
    //       return false;
    //     }
    //   },
      // 结束

      //获取info列表
      submitForm(ruleForm) {
        this.$refs[ruleForm].validate(valid => {
          if (valid) {
            this.logining = true;
            login(this.ruleForm).then(res => {
              console.log(res, "res登录");
              if (res.code == 200) {
                if (this.rememberpwd == true) {
                  //保存帐号到cookie，有效期7天
                  setCookie("user", this.ruleForm.userNo, 7);
                  //保存密码到cookie，有效期7天
                  setCookie("pwd", this.ruleForm.password, 7);

                } else {
                  delCookie("user");
                  delCookie("pwd");

                }
                //如果请求成功就让他2秒跳转路由
                setTimeout(() => {
                  this.logining = false;
                  // 缓存token
                  console.log(res.data.token)
                  localStorage.setItem('logintoken', res.data.token)
                  // 缓存用户个人信息
                  localStorage.setItem("userdata", JSON.stringify(res.data));
                  localStorage.setItem("showTip", res.data.showTip);

                  this.$store.commit("login", "true");
                  this.$router.push({ path: "/qualification/jobApplication" });
                  // 弹出登录成功
                  this.$message({
                    message: "登录成功",
                    type: "success"
                  });
                }, 1000);
              } else {
                this.$message.error(res.msg);
                this.logining = false;
                return false;
              }
            });
            // 调用登录接口
            // this.loginFun();
          } else {
            this.$message.error("请输入用户名密码！");
            this.logining = false;
            return false;
          }
        });
      },
      // enter注册
    //   loginIn() {
    //     let keyCode = window.event.keyCode;
    //     console.log(this.$route.path, "登录path")
    //     if (keyCode == 13 && this.$route.path == "/login") {
    //       this.$refs.ruleForm.validate(valid => {
    //         if (valid) {
    //           this.logining = true;
    //           this.loginFun();
    //         } else {
    //           this.$message.error("请输入用户名密码！");
    //           this.logining = false;
    //           return false;
    //         }
    //       });
    //     } else {
    //       return;
    //     }
    //   },
      //忘记密码
      editPwd() {
        this.loginFlag = false
        this.forgeFlag = true
      },
      //切换登录
      loginChange() {
        this.loginFlag = true
        this.forgeFlag = false
      }
    },
    // mounted() {
    //   window.addEventListener('keydown', this.loginIn);
    // },
    // destroyed() {
    //   window.removeEventListener('keydown', this.loginIn, false);
    // }

  };
</script>

<style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-image: url("../assets/bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .code-box {
    text-align: right;
  }

  .el-button--primary {
    color: #FFF;
    background-color: #C72C2C;
    border-color: #C72C2C;
  }

  .copyright {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 14px;
  }
  .yanjing{
      width: 30px;
      height: 20px
      ;
  }
  ::v-deep .el-input__suffix{
      top: 5px !important
  }
</style>
