<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">
        <ul class="login-form login-form-1">
          <li><span class="p-ico user-ico"></span>
            <input type="text"  v-model="username" class="ui-ipt ng-pristine ng-valid" placeholder="手机号码">
            <div class="wrong-tips ng-hide" v-show="err.loginError === 'two'">输入的用户名或者密码不正确，请确认</div>
            <div class="wrong-tips ng-hide" v-show="err.loginErrorEnter">请输入正确的用户名密码以及验证码！</div>
            <div class="wrong-tips ng-hide" v-show="err.loginError === 'one'">输入的用户名或者密码不正确，请确认</div>
          </li>

          <li>
            <span class="p-ico code-ico"></span>
            <span href="javascript:void(0)" style="cursor:pointer" class="p-ico ng-scope"></span>
            <input type="password"  v-model="password" class="ui-ipt ng-scope ng-pristine ng-valid"
              autocomplete="off" placeholder="密码">
          </li>

         <li>
            <span class="p-ico picode-ico" @click="changeCode()"></span>
            <input type="text"  v-model="code" class="ui-ipt ipt-s" placeholder="图形验证码" @click="!codeShow&&changeCode()" required="required">

            <div class="wrong-tips ng-hide" v-show="codeShow && code ==''">请输入正确的验证码，看不清？点击验证码刷新</div>

            <span class="qr-code ng-scope" @click="changeCode()">
              <img alt="验证码"  :src="codeShow" v-show="codeShow">
            </span>
          </li>

          <li class="clear mt10">
            <div class="fl">
              <label class="ui-label " :class="rememberUse?'checked':''">
                <input type="checkbox" class="checkbox  ng-valid" v-model="rememberUse">
                <a class="checkbox-a"> </a>
                <span class="ipt-txt">记住帐号和密码</span>
              </label>
            </div><a class="ag fr" @click="goReset">忘记密码？</a>
          </li>

          <li class="last">
            <button class="btn-normal btn-login lwh-disabled" @click="dologin">登 录</button>
          </li>
        </ul>
      </div>


      <div class="mt10 ng-scope" style="font-size: 10px; text-align: center;">没有学员/单位管理员帐号？
        <a @click="goRegist()" class="ao b">立即注册</a></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:''
      }
    },

    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>
