<template>
  <div>
    <div class="login">
      <div class="login-box">
        <h3>注册新用户</h3>
        <!--          <p>Baotou Unified Identity Verification Platform</p>-->
        <div class="yz-code-box">
          <input class="yz-code" v-model="registerInfo.username" placeholder="请输入手机号" autocomplete="off">
          <button class="get-code" @click="onGetCode" v-if="restTime >= 120 && !isSendCode">获取验证码</button>
          <button class="get-code got" v-else>{{ restTime }}</button>
        </div>
        <input type="text" v-model="registerInfo.code" placeholder="请输入验证码" autocomplete="off">
        <input type="password" v-model="registerInfo.password" placeholder="请输入密码">
        <input type="password" v-model="registerInfo.passwordSame" placeholder="请再次输入密码">
        <button @click="submitRegister">注册</button>
        <router-link to="/" class="back">返回首页</router-link>
        <div class="info">
          <p>主办：包头市应急管理局</p>
          <p>如有问题，咨询电话: 0472-5222813</p>
        </div>
      </div>
      <div class="bottom-text">Copyright:2012-2020包头市应急管理局 All Rights Reserved建议使用90以上版本浏觉器1024*768以上分辨率</div>
    </div>
    <div class="loading" v-if="isLoading">
      <img src="@/assets/images/loading.gif" alt="">
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import url from '@/assets/public/url'

export default {
  name: 'Register',
  components: {},
  data() {
    return {
      url: url.registerUrl,
      restTime: 120,
      isSendCode: false,
      registerInfo: {
        username: '',
        code: '',
        password: '',
        passwordSame: ''
      },
      isLoading: false
    }
  },
  methods: {
    onGetCode: function () {
      if (!this.registerInfo.username) {
        this.$layer.msg('请输入手机号')
        return
      }
      var self = this
      self.isSendCode = true
      self.restTime--
      var timer = setInterval(function () {
        self.restTime--
        if (self.restTime < 0) {
          clearInterval(timer)
          self.restTime = 120
        }
      }, 1000)
      axios.get(self.url + 'app/sms/verify-code/' + self.registerInfo.username).then(function (res) {
        self.$layer.msg('验证码发送成功，请注意查收')
      }).catch(function (error) {
        self.$layer.msg(error.response.data.msg)
      }).finally(() => {
        self.isSendCode = false
      })
    },
    submitRegister: function () {
      var self = this
      if(self.isLoading) {
        return
      }
      var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      var pwdReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/;
      if (!self.isLoading) {
        if (!self.registerInfo.username) {
          self.$layer.msg('手机号不能为空')
          return
        }
        if (!reg.test(self.registerInfo.username)) {
          self.$layer.msg('手机号码格式错误')
          return
        }
        if (!self.registerInfo.code) {
          self.$layer.msg('验证码不能为空')
          return
        }
        if (!self.registerInfo.password) {
          self.$layer.msg('密码不能为空')
          return
        }
        if (!self.registerInfo.passwordSame) {
          self.$layer.msg('请再次输入密码')
          return
        }
        if (self.registerInfo.password != self.registerInfo.passwordSame) {
          self.$layer.msg('两次输入的密码不一致')
          return
        }
        if (!pwdReg.test(self.registerInfo.password)) {
          self.$layer.msg('密码长度至少为6-16位，包含数字、字母、特殊字符，其中的任意两种')
          return
        }
        if (self.registerInfo.username && self.registerInfo.password && self.registerInfo.passwordSame) {
          self.isLoading = true
          axios.post(self.url + 'app/register/phone-password', {
            phone: self.registerInfo.username,
            verifyCode: self.registerInfo.code,
            password: self.registerInfo.password,
            passwordSame: self.registerInfo.passwordSame
          }).then(function (res) {
            self.isLoading = false
            self.$layer.msg('注册成功')
            setTimeout(function () {
              self.$router.push('/login')
            }, 1000)
          }).catch(function (error) {
            self.$layer.msg(error.response.data.msg)
            self.isLoading = false
          })
        } else {
          self.$layer.msg('用户名或密码不能为空')
        }
      }
    }
  },
  mounted: function () {
    var self = this

  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background rgba(255,255,255,0.6)
  padding 30px
  border-radius 10px
  box-shadow 0 0 17px #DEDEDE
.login
  //position fixed
  //top 0
  //right 0
  //left 0
  //bottom 0
  background url("~@/assets/images/login-bg.jpg") no-repeat center
  background-size 100% 100%
  overflow hidden
  .login-box
    width 460px
    height 720px
    padding 80px 55px 180px 45px
    box-sizing border-box
    //position absolute
    //top 50%
    //left 54%
    //margin-top -360px
    background #fff url("~@/assets/images/login-box-bg1.png") no-repeat left bottom
    background-size 100% auto
    margin-top 100px
    margin-bottom 70px
    margin-left 54%
    h3
      font-size 20px
      text-align center
      color #0d1c28
      font-weight normal
      margin-bottom 70px
    p
      font-size 12px
      color #999
      text-align center
      margin-bottom 70px
    input
      width 100%
      height 45px
      border 1px solid #c4c4c4
      padding 0 10px
      box-sizing border-box
      margin-bottom 25px
      font-size 16px
    button
      cursor pointer
      width 100%
      height 45px
      color #fff
      font-size 16px
      background #1561af
      border none
      outline none
      border-radius 3px
      margin-bottom 20px
    a
      color #4293f4
    .link
      margin-bottom 25px
      overflow hidden
      a
        font-size 16px
        color #4293f4
        &.register
          float right
        &.back
          float left
    .info
      text-align center
      margin-top 25px
      p
        line-height 20px
        font-size 12px
        margin-bottom 0
        color #999
    .yz-code-box
      display flex
      .get-code
        width 180px
      .got
        background-color #B9B9B9
        
  .bottom-text
    text-align center
    color #fff
    font-size 14px
    margin-bottom 30px
</style>
