<template>
  <div class="login-container">
    <el-card class="box-card box">
      <div slot="header" class="clearfix">
        <span>系统登录</span>
      </div>
      <div>
        <el-form ref="form" @keyup.enter.native="submitForm('form')" :model="form" label-width="0px">
          <el-form-item
            label
            prop="username"
            :rules="{
                    required: true, message: '用户名不能为空', trigger: 'blur'
                  }"
          >
            <el-input
              placeholder="输入用户名"
              clearable
              prefix-icon="el-icon-user-solid"
              v-model="form.username"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="password"
            label
            :rules="{
                    required: true, message: '密码不能为空', trigger: 'blur'
                  }"
          >
            <el-input
              placeholder="输入密码"
              clearable
              show-password
              prefix-icon="el-icon-s-goods"
              type="password"
              v-model="form.password"
            ></el-input>
          </el-form-item>
          <el-form-item
            label
            prop="captcha"
            :rules="{
                    required: true, message: '验证码不能为空', trigger: 'blur'
                  }"
          >
            <div style="display: flex">
              <el-input
                placeholder="输入验证码"
                style="width: 150px"
                clearable
                prefix-icon="el-icon-key"
                v-model="form.captcha"
              ></el-input>
              <img :src="captchaImage" alt class="captcha" @click="getCaptcha" />
            </div>
          </el-form-item>
          <el-button
            :loading="loginLoading"
            @click="submitForm('form')"
            style="width: 100%"
            type="primary"
          >登录</el-button>
        </el-form>
      </div>
    </el-card>
    <div class="foot-text">
      <a data-v-42b89d7e="" href="http://www.beian.miit.gov.cn" target="_blank">@2019-2021-拓恒航空 -苏ICP备19054947号-2 版权所有 @南京拓恒航空科技有限公司</a>
    </div>
  </div>
</template>

<script>
import api from "@/api/user/user";
import Cookies from "js-cookie";

export default {
  name: "Login",
  data() {
    return {
      loginLoading: false,
      form: {
        username: "",
        password: "",
        captcha: "",
        key: ""
      },
      captchaImage: ""
    };
  },
  mounted() {
    this.getCaptcha();
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loginLoading = true;
          api
            .login(this.form)
            .then(res => {
              const { token } = res.data;
              Cookies.set(location.host+'-token', token);
              let redirect = this.$route.query.redirect;
              if (redirect) {
                this.$router.push({ path: redirect });
              } else {
                this.$router.push({ path: "/" });
              }
              this.loginLoading = false;
            })
            .catch(e => {
              this.loginLoading = false;
            });
        }
      });
    },
    getCaptcha() {
      api
        .captcha({})
        .then(res => {
          const { url, key } = res.data;
          this.form.key = key;
          this.captchaImage = url;
        })
        .catch(e => {
          this.form.key = "";
          this.captchaImage = "";
        });
    }
  }
};
</script>

<style lang="less">
.login-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-position: center center;
  background-size: cover;
  background-image: url(../../assets/img/login.png);
  .foot-text {
    line-height: 45px;
    text-align: center;
    background-color: #333;
    position: absolute;
    bottom: 0px;
    z-index: 1;
    width: 100%;
    >a{
      font-size: 14px;
      color: #999;
    }
  }
  .box {
    width: 350px;
    position: absolute;
    right: 20%;
    top: 30%;
  }
}
</style>

