<template>
  <div class="login">
    <div class="login_wrap">
      <div class="login_wrap_top">安全生产风险智能监测系统</div>

      <div class="login_wrap_bottom">
        <div class="title">用户登录</div>

        <el-input placeholder="用户名" v-model="username" prefix-icon="el-icon-user"></el-input>

        <br />
        <br />

        <el-input placeholder="密码" v-model="password" show-password prefix-icon="el-icon-lock"></el-input>

        <div class="bottom_line">
          <el-checkbox v-model="checkbox">记住密码</el-checkbox>
          <!-- <span>忘记密码？</span> -->
        </div>

        <el-button type="primary" @click="onLogin">登录</el-button>
      </div>
    </div>
  </div>
</template>


<script>
import { login } from "@/api";

export default {
  data() {
    return {
      username: "root",
      password: "123",
      checkbox: true
    };
  },

  mounted() {},

  methods: {
    onLogin() {
      if (this.username == "") {
        this.$message.error("用户名不为空");
        return;
      }

      if (this.password == "") {
        this.$message.error("密码不为空");
        return;
      }

      const params = {
        account: this.username,
        pwd: this.password
      };

      login(params).then(res => {
        if (res.code == 200) {
          window.localStorage.setItem("token", res.data);
          this.$router.push("/home");
        } else {
          this.$message.error(res.message);
        }
      });

    }
  }
};
</script>

<style lang="scss">
.login {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/images/login_bg.png");
  background-repeat: no-repeat;
  // background-size: 100% 100%;

  .login_wrap {
    position: absolute;
    top: 43%;
    right: 10%;
    transform: translateY(-50%);
    width: 27%;
    height: 400px;

    .login_wrap_top {
      height: 20%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2vw;
      margin-bottom: 1vw;
      font-weight: 600;
      background-image: linear-gradient(left, #009ff1 10%, #00e8cf);
      -webkit-background-clip: text;
      color: transparent;
    }

    .login_wrap_bottom {
      border: 1px solid #20a3f5;
      height: 80%;
      padding: 0 8%;

      .title {
        font-size: 1.2vw;
        height: 24%;
        letter-spacing: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #00bff4;
      }

      .el-input__inner {
        border: 2px solid #20a3f5;
        background: transparent;
        color: #fff;
      }

      .el-input__icon {
        color: #20a3f5;
      }

      .bottom_line {
        color: #fff;
        height: 18%;
        align-items: center;
        justify-content: space-between;
        display: flex;
        font-size: 14px;

        .el-checkbox__label {
          color: #fff;
        }
      }

      .el-button--primary {
        width: 100%;
      }
    }
  }
}
</style>