<template>
  <div class="m-login opacity-bg">
    <div ng-if="!sureUseLogin" class="ng-scope">
      <div class="tit">学员登录</div>

      <div  autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
        <div class="p-4">
          <el-form class="form">
            <el-form-item>
              <el-input placeholder="手机号|身份证" v-model="username">
                <template slot="prepend"><i class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-input placeholder="密码" v-model="password">
                <template slot="prepend"><i class="el-icon-lock"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <div  class="flex">
                <el-input class="flex-auto mr-2" placeholder="图形验证码" v-model="code">
                  <template slot="prepend"><i @click="changeCode" class="el-icon-refresh-right  cursor-pointer"></i></template>
                </el-input>
                <span class="verify-code bg-white rounded ng-scope cursor-pointer flex-none" @click="changeCode()">
                  <img alt="验证码"  :src="codeShow" v-show="codeShow">
                </span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="warning" @click="dologin">登 录</el-button>
              <div class="" style="font-size: 10px; text-align: center;">没有学员/单位管理员帐号？
                <a @click="goRegist()" class="text-yellow-300">立即注册</a>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import md5 from 'js-md5'
  export default {
    props:{
      err:{
        type: Object,
        default:()=>{
          return {
          loginError: '',
          loginErrorEnter: false,
          }
        }
      }
    },
    data() {
      return {
        rememberUse: false,
        picValidateCode: false,
        code: '',
        captchaId:'',
        username:'',
        password:'',
        codeShow:''
      }
    },
    created(){
      this.changeCode();
    },
    methods: {
      dologin() {
        let mpass = this.password.replace(/(^\s*)|(\s*$)/g, "");
        let param = {
          password:md5( mpass ),
          username: this.username,
          code: this.code,
          captchaId:this.captchaId,
        }
        console.log("dologin", param)
        this.$emit("login", param, this.changeCode )
      },
      changeCode(){
        httpServer("Auth.GetValidateCode" , {}).then( res => {
          if(res.code==200){
            this.codeShow = res.data.codeData;
            this.captchaId = res.data.captchaId;
          } else {
            this.codeShow = ''
          }
        })
      },
      goRegist(){
        this.$router.push({
           path: `/register`
        })
      },
      goReset(){
        this.$router.push({
           path: `/reset`
        })
      }
    }
  }
</script>

<style>
  @import url("./loginBase.css");
</style>
<style lang="less" scoped>
.form{
  & /deep/ .el-input{
    .el-input-group__prepend {
      padding: 0 12px;
    }
  }
  .verify-code{
    img{
      width: 90px;
      height: 40px;
    }
  }
}
</style>
