<template>
  <div class="Login">
    <div class="login-wrap">
      <div class="login-wrap_header">系统名称</div>
      <div class="login-wrap_container">
        <div class="welcome-text">欢迎登录！</div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          class="login-wrap_container-form"
        >
          <el-form-item label="账号" prop="account">
            <el-input
              v-model="form.account"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="form.password"
              placeholder="请输入密码"
              autocomplete="off"
            >
            </el-input>
          </el-form-item>
          <div class="password-remind">
            <registerForm>
              <div class="user-register">账户注册</div>
            </registerForm>
            <div class="forget-password">
              <!-- 忘记密码？ -->
            </div>
          </div>
          <div class="login-button" @click="toHome">
            {{ loading ? "登录中。。。" : "登录" }}
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from "@/api/index";
import { setToken } from "@/utils/auth";
export default {
  name: "Login",
  components: {
    loginLoading() {
      return this.$store.state.user.loginLoading;
    },
  },
  data() {
    return {
      form: {
        account: "admin",
        password: "123456",
      },
      rules: {
        account: { required: true, message: "用户名不能为空", trigger: "blur" },
        password: { required: true, message: "密码不能为空", trigger: "blur" },
      },
      loading: false,
    };
  },
  watch: {
    loginLoading(val) {
      if (!val) this.loading = false;
    },
  },
  created() {},
  mounted() {},
  methods: {
    toHome() {
      if (this.loading) return;

      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store.commit("SET_LOGIN_LOADING", true);
          this.$store
            .dispatch("Login", this.form)
            .then(() => {
              this.$router.push({ path: "/homePage" });
            })
            .catch(() => {
              this.$store.commit("SET_LOGIN_LOADING", false);
            });
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.Login {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/images/login_bg.png"); /* 替换为你的图片路径 */
  background-size: cover; /* 背景图片覆盖整个元素 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 不重复背景图片 */
  .login-wrap {
    width: 626px;
    position: absolute;
    top: 50%;
    right: 8%;
    transform: translateY(-50%);
    .login-wrap_header {
      width: 510px;
      margin: 0 auto;
      color: #5ed0fa;
      font-size: 40px;
      text-align: center;
    }
    .login-wrap_container {
      width: 100%;
      height: 520px;
      padding: 64px 67px 67px;
      box-sizing: border-box;
      background-image: url("@/assets/images/login-box-container.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      text-align: left;
      position: relative;
      .welcome-text {
        width: 392px;
        margin: 0 auto 20px;
        font-size: 20px;
        font-weight: 700;
        color: #5ed0fa;
      }
      .login-wrap_container-form {
        width: 392px;
        margin: 0 auto;
        :deep(.el-form-item__label) {
          font-size: 16px;
          font-weight: 700;
          color: #5ed0fa;
          padding: 0;
        }
        :deep(.el-input__inner) {
          background: none;
          border: none;
          border-bottom: 1px solid #5ed0fa;
          padding: 0;
          border-radius: 0;
          color: #5ed0fa;
        }
        .password-remind {
          width: 100%;
          margin-bottom: 30px;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          -webkit-box-align: center;
          align-items: center;
          justify-content: space-between;
          .user-register {
            color: #5ed0fa;
            font-weight: 700;
            cursor: pointer;
          }
          .forget-password {
            color: #5ed0fa;
            font-weight: 700;
            cursor: pointer;
          }
        }
        .login-button {
          width: 100%;
          height: 46px;
          line-height: 46px;
          text-align: center;
          background-image: url("@/assets/images/login-btn.png");
          background-size: 100%;
          background-repeat: no-repeat;
          cursor: pointer;
          color: #5ed0fa;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
