<template>
  <div id="Login">
    <!-- <img src="./../../static/images/Loginbj.jpg" alt id="Bj"> -->
    <!-- <img
      src="https://rd-oss-1251629614.cos.ap-chengdu.myqcloud.com/newfiber/website/bishanhaimian/Loginbj.3d435ff.jpg"
      alt
      id="Bj"
    /> -->
    <!-- <div id="CityName">重庆市璧山区海绵城市建设监测系统</div> -->
    <div id="LoginBox">
      <p class="p0">
        <!-- <img src="./../../static/images/tx_img.png" alt id="HeadIMG" /> -->
      </p>
      <p class="P1">重庆市璧山区海绵城市建设监测系统</p>
      <p class="P2">
        <!-- <img src="./../../static/images/账号.png" alt="账号" class="InputImg" /> -->
        <input type="text" id="ZH" class="Inputs" v-model="ZH" @keyup="notEmpty(ZH,'ZH')" />
      </p>
      <p class="P2">
        <!-- <img src="./../../static/images/账号密码.png" alt="密码" class="InputImg" /> -->
        <input
          type="password"
          id="MM"
          class="Inputs"
          v-model="MM"
          @keyup="notEmpty(MM,'MM')"
          @keyup.enter="handleLogin"
        />
      </p>
      <p class="P3" v-if="DLError">
        <span style="color: red;">账号密码错误</span>
      </p>
      <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.login + "?username=" + this.ZH + "&password=" + this.MM,
          {}
        )
        .then(response => {
          // setItem("login", this.loginForm);
          // 登录状态
          if (response.data.code === 200) {
            // 登录状态设置
            setSession("logins", "true");
            // 用户在线状态计时
            loginTime();
            // this.$router.push("/OneMenu");
          } 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: 5.32rem;
  height: 5.55rem;
  position: absolute;
  top: 2.4rem;
  right: 2.3rem;
  font-size: 0.16rem;
  text-align: center;
  background-color: #061829;
  opacity: 0.8;
  border: 2px solid #00ffff;
  border-radius: 0.35rem;
  text-align: center;
}
.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: 80%;
  height: 0.6rem;
  line-height: 0.6rem;
  text-decoration: none;
  margin-top: 0.18rem;
  -webkit-user-select: none;
  background: -webkit-linear-gradient(top, #6aaed1 30%, #4a85c0 100%);
  /* margin-top: 0.1rem;
     */
  border-radius: 0.3rem;
  color: #fff;
  font-size: 0.18rem;
  outline: none;
}
.InputImg {
  position: absolute;
  top: 0.25rem;
  left: 0.8rem;
}
.Inputs {
  width: 80%;
  height: 0.5rem;
  display: inline-block;
  background: rgba(220, 220, 220, 0);
  line-height: 0.5rem;
  padding-left: 0.5rem;
  border: 1px solid white;
  color: white;
  border-radius: 0.25rem;
  outline: none;
}
.P3 {
  float: right;
  padding-right: 0.46rem;
}
.P4 {
  display: inline-block;
  width: 100%;
  text-align: center;
}
</style>