<style lang="less">
  @import "./register.less";

</style>

<template>
  <div class="main">
    <navbar :user="user"></navbar>
    <div class="main-reg">
      <!--  -->
      <div class="m-order-process">
        <el-steps :active="active" finish-status="success">
          <el-step title="输入姓名、证件号"></el-step>
          <el-step title="确认专业信息"></el-step>
          <el-step title="完善信息"></el-step>
        </el-steps>
      </div>
      <!--  -->
      <div class="w8">
        <form name="registForm" >
         <!-- active0 -->
          <ul class="fhlist" v-if="active==0">
            <li class="mt10">
              <span class="title"><em class="fvx">*</em>真是姓名</span>
              <input type="text" name="name" v-model="name" class="ui-ipt iptform" placeholder="输入真是姓名">
            </li>

            <li class="mt10">
              <span class="title"><em class="fvx">*</em>证件类型</span>

              <el-select v-model="cardType" class="iptform">
                <el-option value="">请选择证件类型</el-option>
                <el-option value="身份证">身份证</el-option>
                <el-option value="军官证">军官证</el-option>
                <el-option value="港澳台居民居住证">港澳台居民居住证</el-option>
                <el-option value="护照">护照</el-option>
              </el-select>
            </li>

            <li class="mt10">
              <span class="title"><em class="fvx">*</em>证件号</span>
              <input type="text" name="cardId" v-model="cardId" class="ui-ipt iptform" placeholder="输入证件号">
            </li>

            <li class="m-t-20">
              <span class="title">&nbsp;</span>
              <input class="ui-btn btn-r" type="button" value="下一步" v-if="isOk0"  @click="active=1" >
              <input class="ui-btn btn-r" type="button" value="下一步" v-else disabled="disabled">
            </li>

          </ul>

          <ul class="fhlist" v-if="active==1">
            <li class="mt10">
              <span class="title"><em class="fvx">*</em>最高学历</span>
              <el-select v-model="education" class="iptform">
                <el-option value="">请选择最高学历</el-option>
                <el-option value="小学">小学</el-option>
                <el-option value="中学">中学</el-option>
                <el-option value="中专">中专</el-option>
                <el-option value="高中">高中</el-option>
                <el-option value="大专">大专</el-option>
                <el-option value="本科">本科</el-option>
                <el-option value="研究生">研究生</el-option>
                <el-option value="博士生">博士生</el-option>
              </el-select>
            </li>

            <li class="mt10">
              <span class="title"><em class="fvx">*</em>工作年限</span>
              <input type="number" name="years" v-model="years" class="ui-ipt iptform" placeholder="请填写工作年限">
            </li>

            <li class="mt10">
              <span class="title"><em class="fvx">*</em>学习专业</span>
              <input type="text" name="major" v-model="major" class="ui-ipt iptform" placeholder="请填写专业">
            </li>

            <li class="mt20">
              <span class="title">&nbsp;</span>
              <input class="ui-btn-3 btn-r" type="button" value="上一步"  @click="active=0" >
              <input class="ui-btn-3 btn-r" type="button" value="下一步" @click="active=2" >
            </li>
           </ul>


          <div class="fhlist w8 ma ng-scope" v-if="active==2">
            <div class="tips-box w8 tc ma mb50">亲爱的新用户，请认真填写您的真实有效信息，以确保学习成果及认证的有效性。</div>
              <ul class="fhlist">
                <li>
                  <span class="title"> <em class="fvx">*</em>性别</span>
                  <span class="sex">
                    <a href="javascript:void(0)" @click="gender='男'" :class="{'selected':gender=='男'}">
                      <span class="p-ico ico-man"></span>男
                    </a>
                    <a href="javascript:void(0)" @click="gender='女'" :class="{'selected':gender==='女'}">
                      <span class="p-ico ico-woman"> </span>女
                    </a>
                  </span>
                </li>

                <li>
                  <span class="title"><em class="fvx">*</em>手机号码</span>
                  <input type="text"
                    v-model="phone"
                    class="ui-ipt iptform ng-pristine ng-valid-pattern ng-invalid ng-invalid-required"
                    placeholder="请填写11位手机号"
                    required="required">

                    <span class="formver ng-scope" v-if="phone&&isPhoneErr()">
                      <span class="p-ico ico-formver"></span>
                      <span class="p-ico ico-worm"></span>
                      请输入正确的手机号
                    </span>
                </li>

                <li class="mb5">
                  <span class="title">
                    <em class="fvx">*</em>密码</span>
                    <input type="password"
                    v-model="password"
                    autocomplete="new-password"
                    class="ui-ipt iptform ng-pristine ng-valid-pattern ng-invalid ng-invalid-required"
                    placeholder="请填写登录密码" required="required">

                    <span class="formver ng-scope" style="width:300px;font-size: 13px;" v-if="password&&password.length<6">
                      <span class="p-ico ico-formver"></span>
                      <span class="p-ico ico-worm"></span>请输入6~18位由字母、数字组合的登录密码！
                    </span>
                </li>


                <li class="mb5">
                  <span class="title">&nbsp;</span>
                  <span class="code-case" style="float: left; margin-left: 120px;">
                    <em :class="{'c1':passwordLevel==='sick' && password,'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">低</em>
                    <em :class="{'c2':passwordLevel==='middle','c3':passwordLevel==='strong'}">中</em>
                    <em class="last" :class="{'c3':passwordLevel==='strong'}">高</em>
                  </span>
                </li>

                <li class="mb5">
                  <span class="title"><em class="fvx">*</em>确认密码</span>
                  <input type="password" name="confirmPassword" validate-password="" v-model="confirmPassword"
                    ng-required="true" class="ui-ipt iptform ng-isolate-scope ng-pristine ng-invalid ng-invalid-required"
                    placeholder="请填写登录密码" required="required">

                    <span class="formver ng-scope" v-if="confirmPassword && confirmPassword!= password">
                      <span class="p-ico ico-formver"></span>
                      <span class="p-ico ico-worm"></span>前后密码不一致！
                    </span>
                </li>

                <li class="mb5">
                  <span class="title">&nbsp;</span>
                   <span style="font-size: 10px;color: red; text-align: center;">{{err}}</span>
                 </li>

                <li class="m-t-20">
                  <span class="title">&nbsp;</span>
                  <input class="ui-btn btn-r" type="button" value="提 交" v-if="cansubmit()"  @click="submitData()" >
                  <input class="ui-btn btn-r" type="button" value="上一步" @click="active=1" v-else >

                </li>
              </ul>
          </div>

        </form>
      </div>
      <!--  -->
    </div>
  </div>
</template>
<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  import navbar from "@/components/nav/navbar.vue";
  import md5 from 'js-md5'
  export default {
    components: {
      navbar
    },
    data() {
      return {
        active: 0,
        user: {
          nickname: ''
        },
        isOk0: false,
        isOk1:false,
        isOk2:false,
        name:'',
        gender:'男',
        passwordLevel: 'sick',
        password:'',
        years:1,
        confirmPassword:'',
        phone:'',
        major:'',
        err:'',
        cardId:'',
        cardType:'身份证',
        education:'大专'
      };
    },
    watch:{
      password(val){
        if( val.length < 6){
          this.passwordLevel='sick';
          return
        }
        let pattern = [/[^0-9a-zA-Z]/, /[0-9a-z]/,  /[A-Z]/];
        let patnum = 0
        for( let i = 0;i<pattern.length;i++){
          if( pattern[i].test( val)) patnum++
        }
        if(  patnum == 3) {
          this.passwordLevel='strong';
        }else if( patnum==2 ) {
          this.passwordLevel='middle';
        }else{
          this.passwordLevel='sick';
        }
      },
      phone(val){

      },
      name(){
        this.isOk0 = this.isActive0Ok();
      },
      cardId(){
        this.isOk0 = this.isActive0Ok();
      },
      confirmPassword(){
        // if( )
      }
    },
    beforeMount(){
      this.isOk0 = this.isActive0Ok()
    },
    methods: {
      submitData(){
        let that = this
        let param = {
          name: this.name,
          phone: this.phone,
          years: +this.years,
          education: this.education,
          gender: this.gender,
          cardId: this.cardId,
          password: md5( this.password)
        }
        httpServer( "Auth.register", param).then(res=>{
          if( res.code == 200){
            this.$msgbox({
              title: "注册成功",
              message: "恭喜你-注册成功",
              showCancelButton: false,
              confirmButtonText: "回到登入页面",
              beforeClose: (action, instance, done) => {
                that.$router.push('/');
                done();
              }
            })
          }else{
            this.err = res.msg;
          }

        })

      },
      isActive0Ok(){
        if(  !this.name|| !this.cardId  ) return false;
        if( this.cardId.length < 15 || this.cardId.length > 18) return false;
        return true;
      },
      cansubmit(){
        if( this.isPhoneErr() ) return false;
        if( !this.password || this.password != this.confirmPassword ) return false;
        if( this.password.length < 6) return false;
        return true;
      },
      isPhoneErr(){
        return ! /^[\d]{11}$/.test( this.phone );
      },
      next() {
        if (this.active++ > 2) this.active = 0;
      }
    }
  }
</script>
