<template>
  <div class="login">
    <div class="wrap-main">
      <h1 class="title">唱唱启蒙——后台管理系统</h1>
      <el-form :model="login" :rules="loginRules" ref="loginForm">
        <el-form-item prop="username">
          <el-input v-model="login.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="login.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" size="medium" type="primary" @click="submitForm">登录</el-button>
          <router-link class="fr" :to="{name:'register'}">
            班主任注册入口
          </router-link>
          <!-- <el-button class="fr" size="medium" type="success" @click="goRegister">去注册</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {loginApi} from "../../service/api";
  import md5 from "js-md5";

  export default {
    data() {
      return {
        login: {
          username: "",
          password: ""
        },
        loginRules: {
          username: [
            {required: true, message: "请输入您的用户名", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入您的密码", trigger: "blur"}
          ]
        }
      };
    },
    mounted() {
      let that = this;
      document.onkeydown = keyDownSearch;

      function keyDownSearch(e) {
        // 兼容FF和IE和Opera
        let theEvent = e || window.event;
        let code = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (code === 13 && that.$route.name === "login") {
          that.submitForm(); //具体处理函数
          return false;
        }
        return true;
      }
    },
    methods: {
      // 提交
      submitForm() {
        this.$refs["loginForm"].validate(valid => {
          if (valid) {
            let json = {
              username: this.login.username,
              password: md5(this.login.password)
            };
            // debugger
            loginApi(json).then(res => {
              if (res.teacher_info) {
                let data = JSON.stringify(res.teacher_info)
                localStorage.setItem("phoneNum", data)
              } else {
                localStorage.setItem("phoneNum", "")
              }
              this.$store.dispatch('setToken', res.token);
              this.$store.dispatch('setUserName', res.desc);
              this.$store.dispatch('setPermission', JSON.parse(res.roles.menu_ids));
              // debugger
              window.location.href = '/';

            })
          }
        });
      },
      goRegister() {
        this.$router.push({
          name: "register"
        })
      }
    }
  };
</script>

<style scoped lang="less">
  @import "../../util/public";

  .login {
    height: 100%;
    background: linear-gradient(to bottom right,
    #ecec7c,
    #787af4); /* 标准的语法（必须放在最后） */
  }

  .wrap-main {
    width: 300px;
    height: 180px;
    padding: 50px 20px;
    border-radius: 5px;
    box-shadow: 8px 8px 15px rgba(49, 49, 49, 0.5);
    position: fixed;
    line-height: 50px;
    background-color: rgba(255, 255, 255, 0.3);
    top: 50%;
    left: 50%;
    margin-left: -200px;
    margin-top: -200px;

    .btn {
      display: block;
      width: 100%;
    }

    .title {
      position: absolute;
      top: -100px;
      width: 100%;
      text-align: center;
      left: 0;
      color: white;
      font-size: 26px;
      text-shadow: 6px 6px 3px rgba(49, 49, 49, 0.5);
    }

    .fr {
      float: right;
      margin-top: 10px;
    }
  }
</style>
