<template>
  <div class="login">
    <div class="main">
      <!-- logo -->
      <img src="../../assets/logo/logo.png" alt class="img1" />
      <!-- 中间插图 -->
      <img src="../../assets/img/img2.png" alt class="img2" />
      <!-- 标题 -->
      <h5>创新示范和绩效评价数智应用</h5>
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <h2 class="title">欢迎登录</h2>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            type="text"
            auto-complete="off"
            @focus="isUsername = true"
            @blur="isUsername = false"
            placeholder="用户名"
          >
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @focus="isPassword = true"
            @blur="isPassword = false"
            @keyup.enter.native="handleLogin"
          >
          </el-input>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-checkbox
          v-model="loginForm.rememberMe"
          style="margin: 0px 0px 35px 0px"
          >记住密码</el-checkbox
        >
        <el-form-item style="width: 100%">
          <el-button
            :loading="loading"
            size="medium"
            type="primary"
            style="width: 100%"
            @click="handleLogin"
          >
            {{ loading ? "登 录 中..." : "登 录" }}
          </el-button>
          <el-button
            size="medium"
            style="width: 100%; margin-left: 0px"
            @click="wstLogin"
          >
            统一身份登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import singleLogin from "@/utils/singleLogin/index";
import { TOKEN_KEY } from "@/utils/enum/token";
import { defineComponent } from "vue";
import { getToken, login } from "./service";
import { DataCenterRouter } from "@/route/dataCenter";

export default defineComponent({
  name: "Login",
  data() {
    return {
      wstLoading: false,
      isUsername: false,
      isPassword: false,
      loginForm: {
        username: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
        type: 1,
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        code: [
          { required: true, trigger: "change", message: "验证码不能为空" },
        ],
      },
      loading: false,
    };
  },
  watch: {},
  created() {
    localStorage.removeItem(TOKEN_KEY);
  },
  methods: {
    wstLogin() {
      this.wstLoading = true;

      singleLogin()
        .then(async (res) => {
          const { data } = res;
          localStorage.setItem(TOKEN_KEY, data);

          this.$router.push(DataCenterRouter.DATA_MAP);
        })
        .catch(() => {
          this.$message.error("身份验证失败");
        })
        .finally(() => {
          this.wstLoading = false;
        });
    },
    handleLogin() {
      const loginForm = this.loginForm;
      login(loginForm.username, loginForm.password)
        .then(async (res) => {
          const { data } = res;
          localStorage.setItem(TOKEN_KEY, data);

          this.$router.push(DataCenterRouter.DATA_MAP);
        })
        .catch((err) => {
          this.$message.error("用户名或密码错误!");
        });
    },
  },
});
</script>

<style lang="scss" scoped>
.login {
  background-image: url("../../assets/img/login_bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  min-height: 810px;
  min-width: 1050px;
  font-size: 0.16rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .main {
    position: relative;
    width: 940px;
    height: 495px;
    background: #407ef2;
    border-radius: 12px;
    box-shadow: 0px 2px 12px 0px rgba(80, 15, 180, 1);
    color: rgba(255, 255, 255, 1);
    .img1 {
      position: absolute;
      top: 54px;
      left: 80px;
      width: 26px;
    }
    .img2 {
      position: absolute;
      top: 138px;
      left: 86px;
      width: 384px;
      height: 335px;
    }
    h3 {
      margin-left: 52px;
      margin-top: 383px;
      margin-bottom: 0;
      font-size: 32px;
    }
    h5 {
      margin-left: 115px;
      margin-top: 52px;
      font-size: 24px;
      font-weight: 600;
    }
    .login-form {
      position: absolute;
      right: 0;
      top: 0;
      border-radius: 6px;
      background: #ffffff;
      width: 299px;
      height: 404px;
      padding: 58px 33px 33px 33px;
      .title {
        width: 85px;
        font-size: 20px;
        margin: 12px auto 56px auto;
        border-bottom: 3px #1790ff ridge;
        border-radius: 2px;
        text-align: center;
        color: #333333;
        padding-bottom: 8px;
      }
      .el-input {
        height: 32px;
        input:focus {
          color: rgba(6, 104, 185, 1);
        }
        input {
          outline: none;
          height: 38px;
          border-top: 0;
          border-left: 0;
          border-right: 0;
          border-radius: 0;
        }
      }
      .color-class {
        color: rgba(6, 104, 185, 1);
      }
      .input-icon {
        height: 39px;
        width: 19px;
        margin-left: 2px;
      }
    }
  }
}
</style>
