<template>
  <div class="backGround" v-loading="loading">
    <div class="projectName">卡车调度系统终端平台</div>
    <div class="loginBody">
      <div class="loginTitle">登录窗口</div>
      <!-- <div class="loginText">欢迎登录终端</div> -->
      <div class="loginInoputs">
        <el-form ref="loginForm" :model="loginForm">
          <el-form-item class="userInpBody">
            <div class="userIcon">
              <img src="../assets/imgs/yonghuming.png" />
            </div>
            <el-input
              v-model="loginForm.username"
              id="userInp"
              placeholder="输入用户名"
              @focus="showkey('username')"
            ></el-input>
          </el-form-item>
          <el-form-item class="passWordInpBody">
            <div class="passWordIcon">
              <img src="../assets/imgs/mima.png" />
            </div>
            <el-input
              type="password"
              v-model="loginForm.password"
              id="passWordInp"
              placeholder="输入密码"
              @focus="showkey('password')"
            ></el-input>
          </el-form-item>
        </el-form>
        <button class="loginBtn" @click="loginBeforeFn">安全登录</button>
      </div>
    </div>
    <!-- <keyboard  v-on:updatekey="GetKeyVal" class="keyboardStyle" v-show="keyboardShow"></keyboard> -->
  </div>
</template>

<script>
import { httpGet, httpPostForJson, putForJson } from "@/common/httpBean.js";
import {
  login,
  code,
  apiEquipmentQuery,
  vehicleInformationQuery,
  personalCenterInforQuery,
} from "@/axios/api.js";
import { encrypt } from "@/utils/rsaEncrypt.js";
import Cookies from "js-cookie";
import { config as appConfig } from "../config.js";
// import Keyboard from '../components/simpleKeyboard/index.vue'

export default {
  name: "login",
  data() {
    return {
      loginForm: {
        username: "testkc",
        password: "123456",
        uuid: "",
      },
      loading: false,
      keyboardShow: false,
      keyboardShowType: "",
      //设备OAID  testkc  test999
      //testcc        deviceOAID: "test888",
      deviceOAID: "test999",
      // deviceOAID: "140945db5f9b8e04",
      //判断设备是否与车绑定
      bindingStatus: false,
      //绑定的车牌号
      bindingCar: "",
    };
  },
  created() {
    // 获取验证码
    //this.getCode();
    // 获取用户名密码等Cookie
    this.getCookie();
  },
  mounted() {
    //两种方法相互冲突，每次只需要一种，并且获取的id不一样

    //app获取设备号方法
    // this.appGetDeviceId();

    //5+app获取OAID方法
    if (window.plus) {
      this.plusReady();
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
  },
  components: {
    // Keyboard
  },
  methods: {
    //app获取设备号方法
    appGetDeviceId() {
      // let that = this;
      // let appDeviceId1 = window.Device.getDeviceId();
      // // let appDeviceId1 = window.Device.getDeviceId();
      // console.log("app设备号", window.Device);
      // if (appDeviceId1) {
      //   that.deviceOAID = appDeviceId1;
      //   //查询设备表是否存在该设备编号
      //   httpGet(apiEquipmentQuery, { name: that.deviceOAID }).then(
      //     (resSheiBei) => {
      //       if (resSheiBei.code == 200 && resSheiBei.data.totalElements != 0) {
      //         //查询车辆表中设备是否与车辆绑定
      //         httpGet(vehicleInformationQuery, {
      //           equipmentName: that.deviceOAID,
      //         }).then((resCar) => {
      //           if (resCar.code == 200 && resCar.data.totalElements != 0) {
      //             that.bindingStatus = true;
      //           } else {
      //             that.bindingStatus = false;
      //           }
      //         });
      //       } else {
      //         httpPostForJson(apiEquipmentQuery, {
      //           name: that.deviceOAID,
      //           status: "正常",
      //         }).then((res) => {
      //           that.bindingStatus = false;
      //         });
      //       }
      //     }
      //   );
      // }
    },
    //5+app获取OAID方法
    plusReady() {
      // let that = this;
      // plus.device.getOAID({
      //   success: function (e) {
      //     console.log("oaid", e.oaid);
      //     that.deviceOAID = e.oaid;
      //     //查询设备表是否存在该设备编号
      //     httpGet(apiEquipmentQuery, { name: that.deviceOAID }).then(
      //       (resSheiBei) => {
      //         if (
      //           resSheiBei.code == 200 &&
      //           resSheiBei.data.totalElements != 0
      //         ) {
      //           //查询车辆表中设备是否与车辆绑定
      //           httpGet(vehicleInformationQuery, {
      //             equipmentName: that.deviceOAID,
      //           }).then((resCar) => {
      //             if (resCar.code == 200 && resCar.data.totalElements != 0) {
      //               that.bindingStatus = true;
      //             } else {
      //               that.bindingStatus = false;
      //             }
      //           });
      //         } else {
      //           httpPostForJson(apiEquipmentQuery, {
      //             name: that.deviceOAID,
      //             status: "正常",
      //           }).then((res) => {
      //             that.bindingStatus = false;
      //           });
      //         }
      //       }
      //     );
      //   },
      //   fail: function (e) {
      //     console.log("getDeviceInfo failed: " + JSON.stringify(e));
      //     that.bindingStatus = false;
      //   },
      // });
    },
    getCode() {
      httpGet(code).then((res) => {
        this.loginForm.uuid = res.uuid;
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      let password = Cookies.get("password");
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? "" : password;
      password = password === undefined ? this.loginForm.password : password;
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
      };
    },
    //登录前操作判断
    loginBeforeFn() {
      if (!this.deviceOAID) {
        this.$message({
          message: "获取设备信息失败，请退出系统并且开启权限后重试!",
          type: "warning",
        });
        return;
      }
      httpGet(apiEquipmentQuery, { name: this.deviceOAID }).then(
        (resSheiBei) => {
          if (resSheiBei.code == 200 && resSheiBei.data.totalElements != 0) {
            //查询车辆表中设备是否与车辆绑定
            httpGet(vehicleInformationQuery, {
              equipmentName: this.deviceOAID,
            }).then((resCar) => {
              if (resCar.code == 200 && resCar.data.totalElements != 0) {
                this.bindingCar = resCar.data.content[0].number;
                this.bindingStatus = true;
                this.LoginInitiation();
              } else {
                this.$message({
                  showClose: true,
                  message:
                    "请在后台系统中将该设备与车辆绑定后再进行登录!设备号:" +
                    this.deviceOAID,
                  type: "warning",
                  duration: 0,
                });
                this.bindingStatus = false;
              }
            });
          } else {
            httpPostForJson(apiEquipmentQuery, {
              name: this.deviceOAID,
              status: "正常",
            }).then((res) => {
              this.$message({
                showClose: true,
                message:
                  "请在后台系统中将该设备与车辆绑定后再进行登录!设备号:" +
                  this.deviceOAID,
                type: "warning",
                duration: 0,
              });
              this.bindingStatus = false;
            });
          }
        }
      );
    },
    //进行登录
    LoginInitiation() {
      this.loading = true;
      if (this.loginForm.userName == "" || this.loginForm.password == "") {
        this.$message({
          message: "请输入正确的用户名或密码!",
          type: "error",
        });
      } else {
        this.$refs.loginForm.validate((valid) => {
          const user = {
            username: this.loginForm.username,
            password: this.loginForm.password,
            uuid: this.loginForm.uuid,
          };
          if (user.password !== this.cookiePass) {
            user.password = encrypt(user.password);
          }
          if (valid) {
            httpPostForJson(login, user).then((res) => {
              let that = this;
              if (res.status === 400) {
                that.$message.warning("用户名和密码错误，请重新输入");
              } else {
                localStorage.setItem(appConfig.TOKEN_KEY, res.token);
                localStorage.setItem(
                  appConfig.USER_KEY,
                  JSON.stringify(res.user)
                );
                if (user.rememberMe) {
                  Cookies.set("username", user.username, {
                    expires: Config.passCookieExpires,
                  });
                  Cookies.set("password", user.password, {
                    expires: Config.passCookieExpires,
                  });
                } else {
                  Cookies.remove("username");
                  Cookies.remove("password");
                }
                //修改人员表中绑定的车辆personalCenterInforQuery
                httpGet(personalCenterInforQuery, {
                  userName: user.username,
                }).then((respersonal) => {
                  if (
                    respersonal.code == 200 &&
                    respersonal.data.totalElements != 0
                  ) {
                    let lastpersonalData = respersonal.data.content[0];
                    lastpersonalData.car = that.bindingCar;
                    putForJson(personalCenterInforQuery, lastpersonalData).then(
                      (res) => {
                        that.$router.push({
                          path: "/MLargeScreen/index?" + user.username,
                        });
                      }
                    );
                  }
                });
              }
            });
          } else {
            this.$message({
              message: "用户名密码错误 ",
              type: "error",
            });
            return false;
          }
        });
      }
      this.loading = false;
    },
    //开启键盘
    showkey(text) {
      // this.keyboardShowType = text;
      // this.keyboardShow = true;
      // if(this.keyboardShowType == 'username'){
      //   this.loginForm.username = '';
      // }else{
      //   this.loginForm.password = '';
      // }
    },
    //关闭键盘
    closekey() {
      this.keyboardShow = false;
    },
    GetKeyVal(val, close) {
      if (close == "Enter") {
        this.keyboardShow = false;
      } else {
        if (this.keyboardShowType == "username") {
          this.loginForm.username = val;
        } else {
          this.loginForm.password = val;
        }
      }
    },
  },
};
</script>

<style>
@media screen and (max-width: 901px) {
  .backGround {
    padding-top: 2vh;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    background-image: url("../assets/imgs/bg.png");
  }
  .projectName {
    text-align: center;
    font-size: 40px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(
      bottom,
      rgb(36, 162, 254),
      rgb(255, 255, 255)
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 3px;
  }
  .loginBody {
    position: relative;
    padding-top: 9vh;
    box-sizing: border-box;
    margin: 0 auto;
    width: 70%;
    height: 90%;
    background-image: url("../assets/imgs/kuang.png");
    background-size: 100% 110%;
    margin-top: -5vh;
  }
  .loginTitle {
    margin-left: 4vw;
    text-align: center;
    font-size: 19px;
    color: rgb(47, 213, 255);
    letter-spacing: 6px;
  }
  .loginText {
    margin-top: 20px;
    margin-left: 50px;
    text-align: center;
    font-size: 30px;
    color: rgb(151, 227, 244);
    letter-spacing: 6px;
    margin-bottom: 10px;
  }
  .loginInoputs {
    margin-top: 10vh;
    position: absolute;
    right: 6vw;
  }
  .userInpBody {
    padding: 2px;
    border: 1px solid rgb(18, 70, 113);
    margin-bottom: 20px;
  }
  .el-form-item__content {
    display: flex;
    width: 25vw;
    height: 10vh;
  }
  .userIcon {
    padding: 1vh 2vh 0vh 2vh;
    box-sizing: border-box;
    width: 10vh;
    height: 10vh;
    background-color: rgb(18, 70, 113);
  }
  .userIcon > img {
    width: 5vh;
    height: 5vh;
  }
  #userInp {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    font-size: 20px;
    color: rgb(47, 213, 255);
  }
  /* .el-input input::-webkit-input-placeholder {
    color:rgb(47,213,255);
  } */
  .passWordInpBody {
    display: flex;
    padding: 2px;
    border: 1px solid rgb(18, 70, 113);
    margin-bottom: 50px;
  }
  .passWordIcon {
    padding: 1vh 2vh 0vh 2vh;
    box-sizing: border-box;
    width: 10vh;
    height: 10vh;
    background-color: rgb(18, 70, 113);
  }
  .passWordIcon > img {
    width: 5vh;
    height: 5vh;
  }
  #passWordInp {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    font-size: 20px;
    color: rgb(47, 213, 255);
  }
  .loginBtn {
    width: 100%;
    height: 10vh;
    font-size: 17px;
    background-color: rgb(24, 180, 255);
    border: 0px;
    color: white;
    letter-spacing: 10px;
    cursor: pointer;
  }
}

@media screen and (min-width: 901px) {
  .backGround {
    padding-top: 50px;
    box-sizing: border-box;
    height: 100vh;
    width: 100vw;
    background-image: url("../assets/imgs/bg.png");
  }
  .projectName {
    text-align: center;
    font-size: 70px;
    font-weight: 600;
    background-image: -webkit-linear-gradient(
      bottom,
      rgb(36, 162, 254),
      rgb(255, 255, 255)
    );
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 3px;
  }
  .loginBody {
    position: relative;
    padding-top: 9vh;
    box-sizing: border-box;
    margin: 0 auto;
    width: 75%;
    height: 90%;
    background-image: url("../assets/imgs/kuang.png");
    background-size: 100% 100%;
  }
  .loginTitle {
    margin-left: 50px;
    text-align: center;
    font-size: 25px;
    color: rgb(47, 213, 255);
    letter-spacing: 6px;
  }
  .loginText {
    margin-top: 20px;
    margin-left: 50px;
    text-align: center;
    font-size: 30px;
    color: rgb(151, 227, 244);
    letter-spacing: 6px;
    margin-bottom: 10px;
  }
  .loginInoputs {
    margin-top: 15vh;
    position: absolute;
    right: 13vh;
  }
  .userInpBody {
    padding: 2px;
    border: 1px solid rgb(18, 70, 113);
    margin-bottom: 20px;
  }
  .el-form-item__content {
    display: flex;
  }
  .userIcon {
    padding: 11px;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background-color: rgb(18, 70, 113);
  }
  #userInp {
    height: 100%;
    width: 100%;
    background: none;
    outline: none;
    border: none;
    font-size: 20px;
    color: rgb(47, 213, 255);
    letter-spacing: 2px;
  }
  /* .el-input input::-webkit-input-placeholder {
    color:rgb(47,213,255);
  } */
  .passWordInpBody {
    display: flex;
    padding: 2px;
    border: 1px solid rgb(18, 70, 113);
    margin-bottom: 50px;
  }
  .passWordIcon {
    padding: 11px;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    background-color: rgb(18, 70, 113);
  }
  #passWordInp {
    height: 100%;
    width: 80%;
    background: none;
    outline: none;
    border: none;
    font-size: 20px;
    color: rgb(47, 213, 255);
    letter-spacing: 2px;
  }
  .loginBtn {
    width: 100%;
    height: 60px;
    font-size: 26px;
    background-color: rgb(24, 180, 255);
    border: 0px;
    color: white;
    letter-spacing: 10px;
    cursor: pointer;
  }
}

* {
  margin: 0;
  padding: 0;
}
.keyboardStyle {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
</style>