<script src="../../store/getters.js"></script>
<template>
  <div class="login-body">
    <div class="login-box">
      <div class="one"></div>
      <div class="two">
        <div class="welcome">
          制管理后台
        </div>
        <el-form ref="ruleForm" :model="ruleForm" status-icon :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label prop="account">
            <el-input v-model.number="ruleForm.account" style="width: 270px; position: relative; left: -50px"
              class="input-item mrb" autocomplete="off" prefix-icon="el-icon-user" placeholder="请输入 登录账号" />
          </el-form-item>
          <el-form-item label prop="password">
            <el-input v-model="ruleForm.password" style="width: 270px; position: relative; left: -50px; top: -10px"
              class="input-item" autocomplete="off" prefix-icon="el-icon-lock" type="password" show-password
              placeholder="请输入 登录密码" />
          </el-form-item>
          <el-form-item label prop="captcha">
            <div style="
                display: flex;
                height: 37px;
                position: relative;
                left: -50px;
                top: -10px;
              ">
              <el-input v-model="ruleForm.captcha" style="width: 150px" class="input-item" autocomplete="off"
                prefix-icon="el-icon-warning-outline" placeholder="请输入 验证码">
              </el-input>

              <div class="get-code" @click="refreshCode()">
                <Identify :identifyCode="identifyCode"></Identify>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <div style="position: relative; left: -57px; top: -20px">
              <el-button class="btns" type="primary" size="small" :loading="loading" @click="submitForm('ruleForm')"
                @keyup.enter.native="submitForm('ruleForm')">立 即 登 录</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import Identify from "@/views/components/Identify.vue";

export default {
  components: {
    Identify,
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入 登录账号"));
      } else {
        if (this.ruleForm.password !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入 登录密码"));
      } else {
        if (this.ruleForm.password !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };

    return {
      identifyCode: "",
      identifyCodes: "0123456789abcdefghijklmnopqrstuvwxyz",
      loading: false,
      ruleForm: {
        account: "",
        password: "",
        captcha: "",
      },
      rules: {
        account: [{ validator: checkAge }],
        password: [{ validator: validatePass }],
        captcha: [{ required: true, message: "请输入 验证码" }],
      },
    };
  },
  // 记住密码的话开始就在输入框
  created() {
    this.refreshCode();
  },
  methods: {
    submitForm(formName) {
      if (
        this.ruleForm.captcha.toUpperCase() != this.identifyCode.toUpperCase()
      ) {
        this.$message({
          message: "验证码错误",
          type: "error",
        });
        this.refreshCode();
        return;
      }


      this.$refs[formName].validate((valid) => {
        if (valid && !this.loading) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.ruleForm)
            .then(() => {
              this.$router.push({ path: "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
              this.ruleForm.captcha = "";
              this.refreshCode();
            });
        } else {
          return false;
        }
      });
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(data, len) {
      for (let i = 0; i < len; i++) {
        this.identifyCode += data[this.randomNum(0, data.length - 1)];
      }
    },
    randomNum(min, max) {
      max = max + 1;
      return Math.floor(Math.random() * (max - min) + min);
    },
  },
};
</script>
<style scoped>
.login-body {
  width: 100%;
  height: 100vh;
  background-image: url("../../../static/BG.jpg");
  background-size: 100% 100%;
}

.login-box {
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -380px;
  margin-top: -210px;
}

.one {
  background-image: url("../../../static/left.jpg");
  width: 360px;
  background-size: 100% 100%;
  height: 420px;
  display: flex;
  flex-direction: column;
  text-justify: center;
  align-items: center;
}

.one img:first-child {
  margin-bottom: 42px;
  margin-top: 88px;
  position: relative;
  top: 32px;
}

.one img:last-child {
  margin-top: 30px;
}

.two {
  width: 360px;
  height: 420px;
  background: rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.welcome {
  font-size: 22px;
  padding: 20px 0;
}

.welcome p {
  font-size: 8px;
  text-align: center;
}

.mrb {
  margin-bottom: 20px;
}

.input-item {
  width: 220px;
  display: block;
}

.input-item>>>.el-input__inner {
  border: none;
  box-shadow: none;
  background: none;
  border-bottom: 1px solid #dddddd;
}

>>>.el-checkbox__label {
  color: #666666;
}

>>>.el-checkbox__label {
  padding-left: 5px;
}

.remenber {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.remenber span {
  cursor: pointer;
}

.btns {
  width: 270px;
  height: 45px;
  line-height: 9px;
  font-size: 18px;
  margin-top: 15px;
  background: #576fff;
  box-shadow: 0px 4px 8px 0px rgba(44, 20, 180, 0.35),
    0px 1px 8px 0px rgba(21, 67, 194, 0.35);
  border-radius: 10px;
  border: none;
}

.btns:hover {
  background-color: #576fff;
}

.itemfl {
  display: flex;
}

.itemfl .el-form-item {
  margin-right: 5%;
}

.bottom div {
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 5px;
}

>>>.el-form-item__content {
  font-size: 18px;
}

a {
  margin: 6px;
}

.login-checkbox {
  color: #fff;
}

.login-checkbox>>>.el-form-item__content {
  line-height: 22px;
}

.demo-ruleForm {
  width: 360px;
  height: 420px;
}

>>>.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 68%;
  left: -28px;
}

.input-item>>>.el-input__prefix .el-input__icon {
  font-size: 18px;
}
</style>
