<template>
  <div class="login-container">
    <div class="bg" v-if="erp"><img :src="bg" alt="" /></div>
    <div class="logo" v-if="erp">
      <img :src="logo" alt="" />
      <span class="logo_txt">东信综合安防管理系统</span>
    </div>
    <el-form
      class="login-form"
      auto-complete="on"
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      v-if="erp"
    >
      <h3 class="title">用户登录 <span>LOGIN</span></h3>
      <el-form-item prop="username" width="460px">
        <el-input
          v-model="loginForm.username"
          ref="username"
          placeholder="请输入用户名"
          name="username"
          @keyup.enter.native="login_info()"
          type="text"
          auto-complete="off"
        >
          <svg-icon
            slot="prefix"
            icon-class="user"
            class="el-input__icon input-icon"
          />
        </el-input>
      </el-form-item>

      <el-form-item prop="password" style="margin-top:15px">
        <el-input
          class="inputs"
          ref="password"
          placeholder="请输入密码"
          name="password"
          @keyup.enter.native="login_info()"
          :type="passwordtxt"
          v-model="loginForm.password"
        >
          <template #prefix>
            <svg-icon
              slot="prefix"
              icon-class="password"
              class="el-input__icon input-icon"
            />
          </template>
        </el-input>
        <div class="eyeWrap">
          <svg-icon
            slot="prefix"
            icon-class="eye"
            class="el-input__icon input-icon eye"
            style="file: currentColor"
            @click="eyeTab"
            v-show="passwordtxt == 'password'"
          />
          <svg-icon
            slot="prefix"
            icon-class="eye-open"
            class="el-input__icon input-icon eye"
            style="file: currentColor"
            @click="eyeTab"
            v-show="passwordtxt == 'text'"
          />
        </div>
      </el-form-item>
      <el-form-item prop="code" style="margin-top:-10px">
        <el-input
          v-model="loginForm.code"
          auto-complete="off"
          placeholder="验证码"
          style="width: 61%"
        >
          <svg-icon
            slot="prefix"
            icon-class="validCode"
            class="el-input__icon input-icon"
          />
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getCode" class="login-code-img" />
        </div>
        <div class="shuaxin" :class="xuan ? 'xuanz' : ''">
          <svg-icon slot="prefix" icon-class="刷新" @click="getCode" />
        </div>
      </el-form-item>
      <el-checkbox
        v-model="loginForm.rememberMe"
        style="margin: 0px 0px 25px 0px"
        @change="memory"
        >记住密码</el-checkbox
      >
      <el-button
        type="primary"
        @click.native.prevent="login_info()"
        @keyup.enter="login_info()"
      >
        <span v-if="!loading">登 录</span>
        <span v-else>登 录 中...</span></el-button
      >
    </el-form>
    <div id="loader-wrapper" v-if="ERPloading">
      <div id="loader"></div>
      <div class="loader-section section-left"></div>
      <div class="loader-section section-right"></div>
      <div class="load_title">正在加载系统资源，请耐心等待</div>
    </div>
  </div>
</template>
<script>
// import { validUsername } from "@/utils/validate";
import { getCodeImg } from "@/api/user";
import TimeMenu from "@/components/TimeMenu";
import navHeader from "../index/components/navHeader";
import $ from "jquery";
// import {Menu_List} from "../../router/index";
import bgImg from "../../assets/bg-login.png";
import logoImg from "../../assets/logo-b.png";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "../../utils/jsencrypt";
export default {
  name: "Login",
  components: {
    TimeMenu,
    navHeader,
  },
  data() {
    return {
      erp: false,
      ERPloading: true,
      loading: false,
      passwordtxt: "password",
      bg: bgImg,
      logo: logoImg,
      codeUrl: "",
      cookiePassword: "",
      show_num: [],
      // 验证码开关
      // captchaOnOff: true,
      loginForm: {
        username: "",
        password: "",
        rememberMe: true,
        code: "",
        uuid: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" },
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },
        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
      },
      xuan: false,
    };
  },
  mounted() {
    $(".el-menu").css("display", "none");
    $(".right-menu").css("display", "none");
  },
  created() {
    this.keyupEnter();
    this.getUrl();
  },
  methods: {
    getUrl() {
      let url = this.$route.query;
      if (url.username && url.password) {
        let data = { username: url.username, password: url.password };
        this.handleLoginERP(data);
      } else {
        this.getCode();
        this.getCookie();
        this.zddl(); //自动登录
      }
    },
    keyupEnter() {
      let _this = this;
      document.onkeydown = function (e) {
        var key = window.event.keyCode;
        if (key == 13) {
          _this.login_info();
        }
      };
    },
    eyeTab() {
      //密码显示开关
      if (this.passwordtxt == "password") {
        this.passwordtxt = "text";
      } else {
        this.passwordtxt = "password";
      }
    },
    getCode() {
      //获取验证码
      this.xuan = true;
      getCodeImg().then((res) => {
        this.codeUrl = "data:image/gif;base64," + res.data.img;
        this.loginForm.uuid = res.data.uuid;
        this.erp = true;
        setTimeout(() => {
          this.ERPloading = false;
        });
        this.xuan = false;
      });
    },
    getCookie() {
      //缓存数据
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get("rememberMe");
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password:
          password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    login_info() {
      //登录
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("login", this.loginForm)
            .then(() => {
              this.$router.push("/index?name=" + this.loginForm.username);

              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
              this.getCode();
            });
        }
      });
    },
    memory() {
      if (this.loginForm.rememberMe) {
        Cookies.set("username429", this.loginForm.username, { expires: 300 });
        Cookies.set("password429", encrypt(this.loginForm.password), {
          expires: 300,
        });
        Cookies.set("rememberMe429", this.loginForm.rememberMe, {
          expires: 300,
        });
      } else {
        Cookies.remove("username429");
        Cookies.remove("password429");
        Cookies.remove("rememberMe429");
      }
    },
    handleLoginERP(data) {
      //erp登录
      Cookies.set("username429", data.name);
      this.$store
        .dispatch("LoginERP", data)
        .then((res) => {
          this.$router.push({ path: "/index?name=" + data.id }).catch(() => {});
        })
        .catch((err) => {
          location.href = "/#/";
        });
    },
    zddl() {
      //自动登录
      if (
        Cookies.get("vue_admin_template_token1708") &&
        localStorage.getItem("key")
      ) {
        this.$router.push("/index?name=" + localStorage.getItem("key"));
      }
    },
  },
  watch: {
    password: function () {
      this.password = this.password.replace(/[\W]/g, "");
    },
    username: function () {
      this.username = this.username.replace(/[\W]/g, "");
    },
    code: function () {
      this.code = this.code.replace(/[\W]/g, "");
    },
  },
};
</script>

<style lang="scss" scoped>
.code-verify {
  top: 3px;
  position: absolute;
  right: -108px;
  width: 82px;
}
.bg {
  width: 100% !important;
  height:100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  img{
    width: 100% !important;
    height:100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
}
.logo {
  width: 100%;
  position: fixed;
  top: 0;
  img {
    width: 152px;
    margin: 10px 20px 0 20px;
    vertical-align: middle;
  }
  .logo_txt {
    font-size: 20px;
    color: #fff;
    vertical-align: middle;
    letter-spacing: 4px;
  }
}
.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 456px;
  padding: 48px;
  position: absolute;
  top: 25%;
  left: 50%;
  margin-left: -228px;
  .title {
    margin: 0px auto 30px auto;
    text-align: left;
    color: #000000;
    font-size: 20px;
    font-weight: 700;
    span {
      margin-left: 10px;
      opacity: 0.25;
    }
  }
  .el-input {
    height: 40px;
    input {
      height: 100%;
      padding: 10px 0;
      display: inline-block;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.el-form-item__content {
  height: 40px;
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 30%;
  height: 36px;
  display: inline-block;
  margin: 10px 0 0 10px !important;
  img {
    vertical-align: middle;
    height: 36px;
    margin-top: -4px;
    width:auto;
  }
}

.shuaxin {
  font-size: 20px;
  float: right;
  margin-top: 10px;
  cursor: pointer;
}
.xuanz {
  animation: mymove 2s 1;
  -webkit-animation: mymove 2s 1; /* Safari and Chrome */
}
@keyframes mymove {
  100% {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes mymove {
  /* Safari and Chrome */

  100% {
    transform: rotate(360deg);
  }
}
.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}
.login-code-img {
  height: 36px;
  width: 100%;
}

.el-button--primary {
  width: 100%;
  margin-top: 10px;
  color: #fff;
  background-color: #1890ff;
  border-color: #1890ff;
  border-radius: 4px;
}
body,
html {
  width: 100%;
  height: 100%;
  background: #7171c6;
}
::v-deep .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}

#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 2s linear infinite;
  -ms-animation: spin 2s linear infinite;
  -moz-animation: spin 2s linear infinite;
  -o-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  z-index: 1001;
}

#loader:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  -webkit-animation: spin 3s linear infinite;
  -moz-animation: spin 3s linear infinite;
  -o-animation: spin 3s linear infinite;
  -ms-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}

#loader:after {
  content: "";
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #fff;
  -moz-animation: spin 1.5s linear infinite;
  -o-animation: spin 1.5s linear infinite;
  -ms-animation: spin 1.5s linear infinite;
  -webkit-animation: spin 1.5s linear infinite;
  animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #7171c6;
  z-index: 1000;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}

.loaded #loader-wrapper .loader-section.section-left {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader-wrapper .loader-section.section-right {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.loaded #loader {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.loaded #loader-wrapper {
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: all 0.3s 1s ease-out;
  transition: all 0.3s 1s ease-out;
}

.no-js #loader-wrapper {
  display: none;
}

.no-js h1 {
  color: #222222;
}

#loader-wrapper .load_title {
  font-family: "Open Sans";
  color: #fff;
  font-size: 19px;
  width: 100%;
  text-align: center;
  z-index: 9999999999999;
  position: absolute;
  top: 60%;
  opacity: 1;
  line-height: 30px;
}

#loader-wrapper .load_title span {
  font-weight: normal;
  font-style: italic;
  font-size: 13px;
  color: #fff;
  opacity: 0.5;
}
.eyeWrap {
  position: relative;
}
.eye {
  position: absolute;
  right: 10px;
  top: -40px;
  fill: #ccc;
}
</style>
<style>
.el-input__inner {
  height: 40px;
}

</style>
