<template>
  <div class="login-container">
    <div class="title"></div>
    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" auto-complete="off" class="login-form">
      <el-form-item prop="username" style="margin-top: 80px">
        <el-input
            ref="username"
            v-model.number.trim="loginForm.username"
            auto-complete="off"
            class="form-item"
            maxlength="11"
            name="username"
            placeho
            placeholder="请输入用户名"
            size="large"
            tabindex="1"
            type="text">
          <template slot="prefix">
            <div class="form-item-icon-user"></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password" style="margin-top: 10px">
        <el-input
            ref="password"
            v-model.trim="loginForm.password"
            auto-complete="off"
            class="form-item"
            name="password"
            placeholder="请输入密码"
            size="normal"
            tabindex="2"
            type="password">
          <template slot="prefix">
            <div class="form-item-icon-lock"></div>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="identify" style="margin-top: 10px;">
        <div class="identify-container">
          <el-input
              class="identify form-item"
              v-model.trim="loginForm.identify"
              maxlength="4"
              placeholder="请输入验证码"
              tabindex="3"
              size="normal"
              @keyup.enter.native="handleLogin">
          </el-input>

          <identify class="code" :contentHeight="48" :identifyCode="identify" @onClick="randomCode"/>
        </div>
      </el-form-item>
      <el-button class="button" @click.native.prevent="handleLogin">登录</el-button>
    </el-form>
  </div>
</template>

<script>
import identify from '@/components/Identify'
import {validatePassword, validateUsername} from "@/utils/validate";
import md5 from "js-md5";

export default {
  name: 'Login',
  components: {
    identify
  },
  data() {
    let validateIdentify = (rule, value, callback) => {
      if (this.identify !== value) {
        callback(new Error('验证码错误'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: '',
        password: '',
        identify: ''
      },
      loginRules: {
        username: [{validator: validateUsername, length: 2, trigger: 'blur'}],
        password: [{validator: validatePassword, length: 6, trigger: 'blur'}],
        identify: [{validator: validateIdentify, trigger: 'blur'}]
      },
      identify: '', // 生成的验证码
      loading: false, // 登录中
      redirect: undefined, // 转发地址
      query: undefined, // 转发的参数
    }
  },
  mounted() {
    this.randomCode();
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
        delete route.query.redirect;
        this.query = route.query;
      },
      immediate: true
    }
  },
  methods: {

    // 生成一个验证码
    randomCode() {
      let code = '';
      for (let i = 0; i < 4; i++) {
        code += Math.floor(Math.random() * 10);
      }
      this.identify = code;
      if (process.env.NODE_ENV === 'development') {
        this.loginForm.identify = code;
      }
    },

    // 登录
    handleLogin() {
      this.$refs['loginForm'].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$axios.post('/v1/system/user/login', {
            username: this.loginForm.username,
            password: md5(this.loginForm.password)
          }).then((response) => {
            // 开发环境默认添加开发者权限
            if (process.env.NODE_ENV === 'development') {
              if (response.permissions) {
                response.permissions.push("developer");
              } else {
                response.permissions = ["developer"];
              }
            }
            this.$store.commit("user/SET_USER_INFO", response);
            this.$router.push({path: this.redirect || '/', query: this.query});
            this.loading = false;
            this.$message.success("登录成功");
          }).catch(() => {
            this.loading = false;
          })
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  min-width: 980px;
  min-height: 900px;
  height: 100%;
  background: rgb(29, 44, 125) url("./assert/login-bg.jpg") no-repeat center center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .title {
    background: url("./assert/login-title.png") no-repeat center center;
    background-size: auto;
    width: 621px;
    height: 97px;
    margin-bottom: 80px;
  }

  .login-form {
    width: 645px;
    height: 661px;
    background: url("./assert/login-bg-form.png") no-repeat center center;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;

    .form-item {
      width: 424px;

      ::v-deep .el-input__inner {
        width: 100%;
        height: 48px;
        background: rgba(17, 52, 121, 0.6);
        border: 1px solid #00BAFF;
        color: #fff;
        padding-left: 50px;

        &.identify-container {
          padding-left: 10px;
        }
      }

      .form-item-icon-user {
        width: 42px;
        height: 48px;
        background: url("./assert/login-form-user.png") no-repeat center center;
        background-size: auto;
      }

      .form-item-icon-lock {
        width: 42px;
        height: 48px;
        background: url("./assert/login-form-lock.png") no-repeat center center;
        background-size: auto;
      }
    }

    .identify-container {
      display: flex;
      align-items: center;
      width: 423px;

      .identify {
        flex: 1;
      }

      .code {
        margin: -1px -1px -1px 0;
        overflow: hidden;
      }

      ::v-deep .el-input__inner {
        padding-left: 20px;
      }
    }

    .button {
      width: 424px;
      height: 43px;
      background: linear-gradient(0deg, #27C5FF, #D8F8FF);
      font-size: 16px;
      color: #091A54;
      margin-top: 30px;
      text-align: center;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
</style>
