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

</style>
<style lang="less" scoped>
.form{
  .formver {
    position: absolute;
    left: 0;
    bottom: -24px;
    color: red;
    height: 28px;
    line-height: 28px;
    font-size: 0.8rem;
  }
  .code-case {
    background: #e6e6e6;
    height: 14px;
    line-height: 14px;
    width: 311px;
    color: #666;
    overflow: hidden;

    em {
      display: inline-block;
      width: 103px;
      height: 14px;
      text-align: center;
      font-size: 12px;
      line-height: 14px;
      font-style: normal;
      float: left;
      color: #666;
      border-right: 1px solid #fff;
    }
  }
  .code-case .last {
    border-right: 0;
  }
  .code-case .c1 {
    background: #ff6633;
    color: #fff;
  }
  .code-case .c2 {
    background: #ffcc33;
    color: #fff;
  }
  .code-case .c3 {
    background: #3290d4;
    color: #fff;
  }
}
</style>

<template>
  <div class="main">
    <navbar :user="user"></navbar>
    <div class="main-reg">
      <el-form class="w-2/4 m-auto my-12 form" label-width="100px">
        <div class="text-center text-2xl mb-4 text-blue">账号注册</div>
        <el-form-item label="手机号" required>
          <el-input  v-model="phone" ></el-input>
          <span class="formver ng-scope" v-if="phone && phone.length!=11">
            请输入合法手机
          </span>
        </el-form-item>
        <el-form-item label="校验码" required>
          <div class="flex">
            <el-input class="flex-auto mr-2" v-model="code" ></el-input>
            <el-button class="auth-code flex-none" type="primary" @click="getCode()"  :disabled="phone.length!=11 || count">{{ !count ?  '校验码' : `${count}s`}}</el-button>
          </div>
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input  v-model="name" placeholder="请输入真实姓名" ></el-input>
        </el-form-item>
        <el-form-item label="身份证" required>
          <el-input  v-model="cardId" placeholder="请输入证件号" ></el-input>
          <span class="formver ng-scope" v-if="cardId && !is_ok_card(cardId)">
            请输入18位身份证号
          </span>
        </el-form-item>
        <el-form-item label="学历" required>
          <el-input  v-model="education" placeholder="请输入学历" ></el-input>
        </el-form-item>
        <el-form-item label="工作单位" required>
          <el-input  v-model="company" placeholder="请输入工作单位" ></el-input>
        </el-form-item>
        <el-form-item label="账户密码" required>
          <div style="line-height:0;">
            <el-input  type="password" v-model="password" placeholder="请输入账户密码" ></el-input>
            <span class="code-case">
              <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>
            <span class="formver ng-scope" style="width:300px;font-size: 13px;" v-if="password&&password.length<6">
              请输入6~18位由字母、数字组合的登录密码！
            </span>
          </div>
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input  type="password" v-model="confirmPassword" placeholder="确认登录密码"></el-input>
          <span class="formver ng-scope" v-if="confirmPassword && confirmPassword!= password">
              前后密码不一致！
            </span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="!cansubmit()" @click="submitData()">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  import data from "@/components/data/data.js";
  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 {
        user: {
          nickname: ''
        },
        count: 0,
        name: '',
        passwordLevel: 'sick',
        password: '',
        education: '',
        company: '',
        confirmPassword: '',
        phone: '',
        code: "",
        err: '',
        cardId: '',
        timer: false,
        rules: data.rulesData(this.validatePass)
      };
    },
    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';
        }
      }
    },
    methods: {
      submitData() {
        let that = this
        let param = {
          name: this.name,
          phone: this.phone,
          code: this.code,
          company: this.company,
          education: this.education,
          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;
          }

        })

      },
      checkPhone() {
        let phone = this.phone;
        if (!/^1[3456789]\d{9}$/.test(phone)) {
          this.$message.error("请填写正确的手机号");
          return false;
        }
        return true
      },
      validatePass(rule, value, callback) {
        if (value == this.password) {
          callback();
        } else {
          callback(new Error("两次密码不服"));
        }
      },
      getCode() {
        if (!this.checkPhone()) return;
        let phone = this.phone

        httpServer("Auth.getCode", {
          phone
        }).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("发送成功", 1)
            this.startTimer()
          }
        })
      },
      startTimer() {
        const TIME_COUNT = 60; //更改倒计时时间
        if (this.timer) clearInterval(this.timer);
        this.count = TIME_COUNT;
        this.timer = setInterval(() => {
          if (this.count > 0) {
            this.count--;
          } else {
            clearInterval(this.timer); // 清除定时器
            this.timer = null;
            this.count = 0;
          }
        }, 1000)
      },
      is_ok_card( cardId ){
        if( !cardId ) return false;
        if( cardId.indexOf('H')>-1 || cardId.indexOf('W') >-1){
            return cardId.length==9 || cardId.length ==11;
        }
        return cardId.length ==18;

      },
      cansubmit() {
        if (this.isPhoneErr()) return false;
        if (!this.is_ok_card(this.cardId)) return false;
        if (!this.name) return false;
        if (!this.password || this.password != this.confirmPassword) return false;
        if (this.password.length < 6) return false;
        if (this.code.length < 4) return false;
        return true;
      },
      isPhoneErr() {
        return !/^[\d]{11}$/.test(this.phone);
      }
    }
  }
</script>
