<template>
  <div id="Login">
    <img src="./../../static/img/BGIMG12.jpg" alt id="Bj" />
    <div id="LoginBox">
      <div class="topimg">
        <img class="img1" src="../../static/img/hydl_font.png" alt="" />
        <img class="img2" src="../../static/img/zst_img.png" alt="" />
      </div>
      <p class="P2">
        <input
          type="text"
          id="ZH"
          class="Inputs"
          v-model="ZH"
          placeholder="请输入账号"
          @keyup="notEmpty(ZH, 'ZH')"
        />
      </p>
      <p class="P2">
        <input
          type="password"
          id="MM"
          class="Inputs"
          v-model="MM"
          placeholder="请输入密码"
          @keyup="notEmpty(MM, 'MM')"
          @keyup.enter="handleLogin"
        />
      </p>
      <p class="P3" v-if="DLError">
        <span style="color: red;">账号密码错误</span>
      </p>
      <!-- <div class="p55">
        <input
          class="checkbox"
          id="checkbox"
          type="checkbox"
          name="jizhu"
          title="发呆"
          lay-skin="primary"
        />
        <span>记住密码</span>
      </div> -->
      <p class="P4">
        <a href="javascript:void(0)" id="DL" @click="handleLogin">登录</a>
      </p>
    </div>
  </div>
</template>
<script>
import {
  setItem,
  removeItem,
  setSession,
  loginTime,
  message,
  getItem
} from "./../util/item";
export default {
  name: "Login",
  data: function() {
    return {
      ZH: "",
      MM: "",
      DLError: false
    };
  },
  created() {
    if (this.detectZoom() >= 150) {
      this.$notify({
        type: "warning",
        title: "界面提醒",
        duration: 8000,
        message:
          "您当前屏幕的缩放比例为 : " +
          this.detectZoom() +
          "% , 为了保证您的体验 , 请将屏幕缩放比例调整至100%",
        position: "bottom-right"
      });
    }
  },
  methods: {
    detectZoom() {
      // 查看浏览器缩放比例
      var ratio = 0,
        screen = window.screen,
        ua = navigator.userAgent.toLowerCase();
      if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
      } else if (~ua.indexOf("msie")) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
          ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
      } else if (
        window.outerWidth !== undefined &&
        window.innerWidth !== undefined
      ) {
        ratio = window.outerWidth / window.innerWidth;
      }
      if (ratio) {
        ratio = Math.round(ratio * 100);
      }
      return ratio;
    },
    notEmpty(value, serial) {
      // 输入框首字母为非空
      if (value.length === 1 && value === " ") {
        this.serial = "";
        this.$message({
          type: "warning",
          message: "首字母不能为空格,请重新输入"
        });
      }
    },
    handleLogin() {
      // 登录数据提交
      //  this.$http
      this.$http
        .post(this.nozzle.sysLogin, {
          login: this.ZH,
          pwd: this.MM
        })
        .then(response => {
          // setItem("login", this.loginForm);
          // 获取用户的roleID
          // 登录状态
          if (response.data.code === 1) {
            localStorage.setItem("USERNO", response.data.data.login);
            localStorage.setItem("USERName", response.data.data.realName);
            localStorage.setItem("token", response.data.data.token);
            // 获取权限
            this.$http
              .post(this.nozzle.menuGetCurrentUserMenu)
              .then(response2 => {
                if (response2.data.code === 1) {
                  // 登录状态设置
                  setSession("logins", "true");
                  // 用户在线状态计时
                  loginTime();
                  // 保存cook

                  this.$router.push("/welcome");

                  sessionStorage.setItem("powerHandle", response2.data.data);
                } else {
                  message(response2);
                }
              });
          } else {
            message(response);
          }
        })
        .catch(response => {
          // this.refreshCode();
        });
    }
  }
};
</script>
<style>
/* 小屏幕（小于 768px） */
@media (max-width: 1400px) {
  html,
  body {
    min-width: 1366px;
  }
  body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
  }
}
@media (min-width: 1400px) {
  html,
  body {
    min-width: 1366px;
  }
  body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

#Bj {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
#LoginBox {
  width: 400px;
  height: 350px;
  position: absolute;
  top: 3.1rem;
  right: 2.3rem;
  font-size: 0.16rem;
  text-align: center;
  opacity: 0.8;
  border: 1px solid #006fff;
  text-align: center;
  box-sizing: border-box;
  padding: 28px;
}
.p0 {
  display: inline-block;
  width: 100%;
  height: 1.9rem;
}
#HeadIMG {
  width: 1.44rem;
  height: 1.44rem;
  margin-top: 0.4rem;
}
.P1 {
  display: inline-block;
  width: 100%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  color: white;
  font-size: 0.24rem;
  position: relative;
  -webkit-user-select: none;
  margin-bottom: 0.2rem;
}
.P2 {
  display: inline-block;
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  position: relative;
}
#DL {
  display: inline-block;
  width: 344px;
  height: 50px;
  line-height: 0.6rem;
  text-decoration: none;
  margin-top: 0.18rem;
  -webkit-user-select: none;
  background: #006fff;
  /* margin-top: 0.1rem;
     */
  color: #fff;
  font-size: 0.18rem;
  outline: none;
}
.InputImg {
  position: absolute;
  top: 0.25rem;
  left: 0.8rem;
}
.Inputs {
  width: 344px;
  height: 50px;
  display: inline-block;
  background: rgba(220, 220, 220, 0);
  line-height: 0.5rem;
  padding-left: 22px;
  margin-bottom: 8px;
  border: 1px solid white;
  color: white;
  outline: none;
  font-size: 20px;
}
.Inputs::placeholder {
  font-size: 20px;
}
.P3 {
  float: right;
  padding-right: 0.46rem;
}
.P4 {
  display: inline-block;
  width: 100%;
  text-align: center;
}

.topimg img {
  float: left;
  margin-bottom: 16px;
}
.checkbox {
  float: left;
  width: 20px;
  height: 20px;
}
.p55 span {
  float: left;
  margin-left: 5px;
  color: #fff;
}
</style>