<template>
  <div class="login">
    <h2 class="title">{{ title }}</h2>
    <div class="content">
      <p class="module-title">
        <span>密码登录</span>
        <router-link class="_forget" to="/forget" replace>忘记密码</router-link>
      </p>
      <a-form-model
        ref="form"
        :model="form"
        :rules="formRules"
        @keyup.enter.native="handlerLogin"
      >
        <a-form-model-item prop="userName">
          <a-input v-model="form.userName" placeholder="请输入用户名"></a-input>
        </a-form-model-item>
        <a-form-model-item prop="passWord">
          <a-input
            type="password"
            v-model="form.passWord"
            placeholder="请输入密码"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item prop="verificationCode">
          <a-input v-model="form.verificationCode" placeholder="请输入验证码">
            <img
              :src="verifyImg"
              class="verify-img"
              @click="_getVerifyImg"
              slot="addonAfter"
            />
          </a-input>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" block @click.stop="handlerLogin"
            >登录</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { title } from "@/settings";
import { downloadFile } from '@/utils/index'
export default {
  data() {
    return {
      title,
      form: {
        userName: process.env.VUE_APP_USER || "",
        passWord: process.env.VUE_APP_PWD || "",
        verificationCode: "",
      },
      formRules: {
        userName: [{ required: true, message: "请输入用户名" }],
        passWord: [{ required: true, message: "请输入密码" }],
        verificationCode: [{ required: true, message: "请输入验证码" }],
      },
      verifyImg: "",
    };
  },
  mounted() {
    this._getVerifyImg();
  },
  methods: {
    handlerLogin() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        this._login();
      });
    },
    _getVerifyImg() {
      this.$apis.GETVERIFYIMG().then((res) => {
        const { url } = downloadFile(res);
        this.verifyImg = url || "";
      });
    },
    _login() {
      this.$apis.LOGIN(this.form).then((res) => {
        if (res.returnCode === "0000") {
          this.$store.commit("common/setUserInfo", res.content);
          const path = this.$route.query && this.$route.query.redirect || "/customer";
          this.$router.replace(path);
        } else {
          this.$message.error(res.returnMsg || "出现错误");
          this.form.verificationCode = "";
          this._getVerifyImg();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  .title {
    position: absolute;
    top: 0;
    left: 50%;
    .fs(16);
    .lh(22);
    color: #fff;
    .pa(20, 17, 20, 17);
    transform: translate(-50%, -50%);
    background-color: #2b63ff;
    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      .h(62);
      .bd-t(solid, 31, transparent);
      .bd-b(solid, 31, transparent);
    }
    &::before {
      .l(-18.8);
      .bd-r(solid, 20, #2b63ff);
    }
    &::after {
      .r(-18.8);
      .bd-l(solid, 20, #2b63ff);
    }
  }
  .module-title {
    .fs(16);
    .lh(22);
    .mg-b(32);
    color: #373842;
    font-weight: bold;
    ._forget {
      float: right;
      .fs(14);
      .lh(20);
      font-weight: normal;
      color: #373842;
      opacity: 0.4;
    }
  }
  .ant-button {
    .mg-t(13);
  }
  .verify-img {
    .w(110px);
    height: 100%;
    cursor: pointer;
  }
}
</style>
