<template>
  <div class="login">
    <el-form ref="loginFrom" :model="addAndEditFormData" :rules="addAndEditRules" class="form">
      <h3 class="loginTitle">管理系统</h3>
      <el-form-item prop="account" label="账 号：">
        <el-input clearable v-model="addAndEditFormData.account" placeholder="请输入账号" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密  码：">
        <el-input clearable v-model="addAndEditFormData.password" placeholder="请输入密码" show-password
                  style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item prop="verification" label="验证码:">
        <el-input clearable v-model="addAndEditFormData.verification" placeholder="请输入验证码"
                  style="width: 40%"></el-input>
        <img id="img" @click="getVerification" :src="imgSrc" alt="验证码" title="点击更换验证码"/>
      </el-form-item>
      <el-checkbox class="rememberMe" v-model="rememberMe">记住我</el-checkbox>
      <el-form-item>
        <el-button type="primary" @click="handleConfirmEvent" style="width: 100%">
          <i class="el-icon-upload"></i> 登 录
        </el-button>
      </el-form-item>
      <div class="navigate">
        <span>还没有账号？<router-link to="/register">去注册</router-link></span>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      addAndEditFormData: {
        account: "",
        password: "",
        verification: ""
      },
      rememberMe: true,
      imgSrc: "/getVerify?temp=" + new Date(),
      message: "",
      addAndEditRules: {
        account: {
          required: true, message: "账号不能为空", trigger: "blur"
        },
        password: {
          required: true, message: "密码不能为空", trigger: "blur"
        },
        verification: {
          required: true, message: "验证码不能为空", trigger: "blur"
        }
      }
    };
  },
  created() {
  },
  methods: {
    getVerification() {
      this.imgSrc = "/getVerify?temp=" + +new Date();
    },
    handleConfirmEvent() {
      this.$refs.loginFrom.validate(valid => {
        if (valid) {
          let params = {
            account: this.addAndEditFormData.account,
            password: this.addAndEditFormData.password,
            verification: this.addAndEditFormData.verification
          };
          this.api.postApi("/login", params).then(e => {
            if (e.data.code === 200) {
              localStorage.setItem("Authorization", e.data.data.authorization);
              this.$store.commit("userInfo", e.data.data);
              this.$router.push({
                path: "/manager"
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.login {
  background-image: url("../assets/img/2.jpg");
  height: 100%;
}

.form {
  border-radius: 15px;
  background-clip: padding-box;
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 15px 25px;
  /*background: #e7efee;  !* 框背景颜色 *!*/
  background: #f6f6f6; /* 框背景颜色 */
  /*border: #ba0716;*/
  box-shadow: 0 0 25px #3c4242;
}

.form input {
  height: 35px;
}

.form img {
  margin-bottom: -10px;
  margin-left: 5px;
}

.loginTitle {
  margin: 0 auto 15px auto;
  text-align: center;
  color: #3c8dbc;
}

.rememberMe {
  text-align: left;
  margin-top: -5px;
  margin-bottom: 10px;
}

.navigate {
  text-align: right;
  color: #8b8989;
  font-size: small;
  margin-top: -10px;
}
</style>
