<!-- -->
<template>
  <div class="wrapper">
    <div class="login">
      <div class="title">
        <div class="text">登 陆</div>
        <div class="close" @click="handleCloseLogin">×</div>
      </div>
      <el-form
        :model="loginForm"
        :label-position="labelPosition"
        ref="loginForm"
      >
        <el-form-item :label-width="formLabelWidth" prop="username">
          <el-input
            v-model="loginForm.username"
            autocomplete="off"
            clearable
            placeholder="用户名/手机号"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" prop="password">
          <el-input
            v-model="loginForm.password"
            autocomplete="off"
            type="password"
            clearable
            show-password
            placeholder="密码"
          ></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth">
          <el-row :gutter="10">
            <el-col :span="16">
              <el-form-item prop="captcha">
                <el-input
                  ref="captcha"
                  v-model="loginForm.captcha"
                  placeholder="请输入验证码"
                  name="captcha"
                  tabindex="3"
                  auto-complete="on"
                  @keyup.enter.native="handleLogin"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8" class="captcha">
              <img
                v-if="requestCodeSuccess"
                style="margin-top: 2px"
                :src="captchaImgSrc"
                @click="handleGetCaptcha"
              />
              <img
                v-else
                style="margin-top: 2px"
                src="@/assets/404_images/checkcode.png"
                @click="handleGetCaptcha"
              />
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="opration">
        <div class="register">
          <!-- <router-link to="/register"> 注册 </router-link> -->
          <!-- <span style="margin: 0 10px"> | </span> -->
          <!-- <router-link to="/register"> 忘记密码 </router-link> -->
        </div>
        <el-button
          round
          @click="handleLogin"
          size="small"
          :loading="loading"
          class="loginBtn"
          >登 陆</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { getVerify } from "@/api/user";
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        captcha: "",
      },
      requestCodeSuccess: false,
      captchaImgSrc: "",
      formLabelWidth: "1px",
      labelPosition: "right",
      loading: false,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入用户名" },
        ],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
        captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
      },
    };
  },
  created() {
    this.handleGetCaptcha();
  },
  mounted() {},
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              // debugger
              this.$router.push({ path: this.$route.query.redirect || "/" });
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleCloseLogin() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    // 获取验证码
    handleGetCaptcha() {
      this.currdatetime = new Date().getTime();
      // debugger
      getVerify()
        .then((res) => {
          this.requestCodeSuccess = true;
          const imgSrc = window.URL.createObjectURL(res);
          this.captchaImgSrc = imgSrc;
        })
        .catch(() => {
          this.requestCodeSuccess = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  background: url("@/assets/imgs/home/display-bg.png") no-repeat center;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
.login {
  width: 500px;
  // margin: 50px auto;
  background-color: #fff;
  border-radius: 16px;
  padding: 48px 32px;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    .text {
      font-weight: bold;
      font-size: 26px;
    }
    .close {
      font-size: 48px;
      cursor: pointer;
    }
  }
  .login-box {
    width: 500px;
    margin: auto;
  }
}
.opration {
  display: flex;
  justify-content: space-between;
  .register {
    display: flex;
    justify-content: flex-end;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;
}
.login-button,
.el-button {
  width: 100%;
  background-color: #2069c4;
  color: #fff;
  font-size: 22px;
}
</style>
