<template>
    <div class="login">
      <div class="wrap-main">
        <h1 class="title">班主任注册</h1>
        <el-form :model="login" :rules="loginRules" ref="loginForm">
          <el-form-item prop="take_class_mobile">
            <el-input v-model="login.take_class_mobile" placeholder="带班手机号"></el-input>
          </el-form-item>
          <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 prop="id_number">
            <el-input  v-model="login.id_number" maxlength="18" placeholder="身份证号"></el-input>
          </el-form-item>
          <el-form-item prop="verify_code">
            <el-input  v-model="login.verify_code" placeholder="验证码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="btn" size="medium" type="success" @click="submitForm">注册</el-button>
            <el-button class="btn code" size="medium" type="primary" :disabled='disable' plain style="margin-top:20px;" @click="getCode">{{texT}}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
  import { postMobileCodeApi,postRegisterApi } 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' }
            ]
          },
          texT:"获取验证码",
          disable:false
        }
      },
      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:{
        getCode(){
          if(this.login.take_class_mobile){
            this.disable = true
            let count = 10
            postMobileCodeApi({mobile:this.login.take_class_mobile}).then(res =>{
              this.texT = '10s'
              let timeOut = setInterval(()=>{
                count--
                this.texT = count+'s'
              },1000)
              setTimeout(()=>{
                this.disable = false
                clearInterval(timeOut)
                this.texT = '获取验证码'
              },10000)
              
            })
          }else{
            this.$message('请填写手机号')
          }
        },
          // 提交
        submitForm(){
          this.$refs["loginForm"].validate((valid) => {
            if (valid) {
              let json = {
                username:this.login.username,
                password:md5(this.login.password),
                take_class_mobile:this.login.take_class_mobile,
                id_number:this.login.id_number,
                verify_code:this.login.verify_code,
              };
              // debugger
              postRegisterApi(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 = '/';
              })
            }
          })
        }
      }
    }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .el-button+.el-button{margin-left: 0;}
  .login{
    height: 100%;
    background: linear-gradient(to bottom right, #ecec7c, #787af4); /* 标准的语法（必须放在最后） */
  }
  .wrap-main{
    width: 300px;
    height: 380px;
    padding:50px 40px;
    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: 40%;
    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);
    }
    .code{
      position: absolute;
      top: -80px;
      width: 120px;
      right: 1px;
      text-align: center;
    }
  }
</style>
