<template>
  <div class="login">
    <div class="color-model"></div>
    <div class="background-border"></div>
    <img class="login-text" src="../assets/images/login-text.svg" alt="" />
    <img class="login-logo" src="../assets/images/login-logo.svg" alt="" />
    <el-form
      v-loading="loading"
      element-loading-text="正在跳转，请稍等"
      ref="loginForm"
      class="login-form"
      label-width="80px"
    >
      <h3 class="mini-title">欢迎登录</h3>
      <h3 class="title">移动安全保卫管理平台项目</h3>
      <el-result v-if="!loading" :icon="icon" :title="title" :subTitle="errMessage">
    </el-result>
    </el-form>
    <!--  底部  -->
    <div class="el-login-footer">
      <!--      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>-->
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
import { tokenLogin } from "@/api/login.js";
export default {
  data() {    
    return {
      icon: null,
      title: null,
      errMessage: null,
      loading: true,
    };
  },
  created() {},
  mounted() {
    // this.loading = this.$loading({
    //   lock: true,
    //   text: "Loading",
    //   spinner: "el-icon-loading",
    //   background: "rgba(0, 0, 0, 0.7)",
    // });
    let { query } = this.$route;
    if (!query) {
      this.loading = false;
      this.icon = "error";
      this.title = "错误";
      this.errMessage = "缺少token";
    } else {
      let { token } = query;
      if (!token) {
        this.icon = "warning";
        this.loading = false;
        this.errMessage = "缺少token";
      } else {
        this.$store.dispatch("TokenLogin",token)
          .then((r) => {
            this.loading = false;
            this.$router.push({ path: "/home" }).catch(() => {});
          })
          .catch((e) => {
            this.icon = "error";
            this.title = "错误";
            this.errMessage = "请求错误";
            this.loading = false;
          });
      }
    }
  },
};
</script>
<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: right;
  align-items: center;
  height: 100%;
  background: rgba(0, 140, 214, 1) url("../assets/images/login-background.png")
    no-repeat;
  background-size: cover;
  position: relative;
}
.color-model {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 140, 214, 0.5);
}
.background-border {
  position: absolute;
  width: 100%;
  height: 342px;
  background-color: #fff;
  opacity: 0.2;
  z-index: 0;
  display: flex;
}
.login-logo {
  position: absolute;
  left: 118px;
  top: 77px;
  width: 245px;
  height: 69px;
}
.login-text {
  position: absolute;
  left: 23%;
  align-items: center;
  width: 510px;
  height: 190px;
}
.mini-title {
  font-size: 16px;
  text-align: center;
  color: #999;
}
.title {
  font-size: 32px;
  margin: 0 auto 50px auto;
  text-align: center;
  color: #333;
}
.login-form {
  margin-right: 15%;
  border-radius: 6px;
  background: #ffffff;
  width: 544px;
  height: 488px;
  padding: 25px 60px 50px 60px;
  z-index: 2;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }
}
.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.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: 38px;
}
</style>
