<template>
  <transition name="fade" mode="in-out">
    <div class="login_page">
      <section class="form_contianer">
        <div class="titleArea">智管青山湖驾驶舱</div>
        <div class="operation">
          <div class="sub-title">账号登录</div>
          <div class="under-line"></div>
          <el-form
            :model="loginForm"
            :rules="rules"
            ref="loginForm"
            class="loginForm"
          >
            <el-form-item prop="username" class="login-item">
              <el-input
                prefix-icon="el-icon-user-solid"
                class="area"
                type="text"
                placeholder="用户名"
                @keyup.enter.native="submitForm('loginForm')"
                v-model="loginForm.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password" class="login-item">
              <el-input
                prefix-icon="el-icon-lock"
                class="area"
                type="password"
                placeholder="密码"
                @keyup.enter.native="submitForm('loginForm')"
                v-model="loginForm.password"
              ></el-input>
            </el-form-item>
            <el-form-item class="login-item">
              <el-button type="primary" @click="submitForm" class="submit_btn"
                >登录</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </section>
    </div>
  </transition>
</template>

<script>
import { login } from "@/api/api.js";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      localStorage.clear();
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          let params = {
            username: this.loginForm.username,
            // password: this.$md5(this.loginForm.password),
            password: this.loginForm.password,
          };
          login(params).then((res) => {
            console.log(res);
            if (res.code === 200) {
              localStorage.setItem("accountInfo", JSON.stringify(res.data.Authorization));
              this.$router.push("/index");
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.login_page {
  position: absolute;
  width: 1920px;
  height: 1080px;
  background: url('../assets/login/login_bg.png') no-repeat center center;
  background-size: 1920px 1080px;
  overflow: hidden;

  .form_contianer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .titleArea {
      display: flex;
      justify-content: center;
      align-items: center;
      text-transform: uppercase;
      width: 100%;
      padding-bottom: 50px;
      line-height: 68px;
      letter-spacing: 2px;
      font-family: YouSheBiaoTiHei;
      font-size: 58px;
      font-weight: 500;
      color: #fff;
    }

    .operation {
      width: 580px;
      height: 391px;
      padding-top: 40px;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-image: url('~@/assets/login/login_div_bg.png');
      background-size: 100% 100%;

      .sub-title {
        text-align: center;
        line-height: 42px;
        color: #fff;
        font-size: 30px;
        font-family: PingFangSC-Regular, PingFang SC;
      }

      .under-line {
        width: 120px;
        height: 4px;
        margin-top: 10px;
        background: #54E3FD;
        border-radius: 3px;
      }

      .loginForm {
        width: 450px;

        .login-item {
          margin-top: 40px;

          .submit_btn {
            width: 100%;
            padding: 13px 0;
            font-size: 16px;
          }
        }
      }
    }
  }

  .logo {
    position: fixed;
    bottom: 60px;
    right: 60px;
  }
}

.fade-enter {
  opacity: 0;
}

.fade-leave {
  opacity: 1;
}

.fade-enter-active {
  transition: opacity 0.5s;
}

.fade-leave-active {
  opacity: 0;
  transition: opacity 0.5s;
}
</style>
