<template>
  <div class="bg">
    <div class="title">
      <span>注册开发者</span>
    </div>
    <div class="step_bg">
      <div class="step">
        <el-form :model="registerForm" :rules="rules" :label-width="formLabelWidth">
          <el-form-item label="帐号" prop="account">
            <el-input v-model="registerForm.account" style="width: 300px" placeholder="请输入帐号" minlength="8" maxlength="32" readonly onfocus="this.removeAttribute('readonly');" @blur="checkLength"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="registerForm.password" style="width: 300px" placeholder="最小长度为8，包含大小写字母和数字" type="password" minlength="8" maxlength="32" readonly onfocus="this.removeAttribute('readonly');"/>
          </el-form-item>
          <el-form-item label="账号名称" prop="name">
            <el-input v-model="registerForm.name" style="width: 300px" maxlength="32" placeholder="请输入账号名称"/>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="registerForm.phone" style="width: 300px" placeholder="请输入手机号码" type="number"/>
          </el-form-item>
          <el-form-item label="图形验证码" prop="code">
            <el-row>
              <el-row style="margin-top: 15px">
                <el-col :span="12" style="width: 140px">
                  <el-input v-model="registerForm.code" placeholder="请输入图形验证码" />
                </el-col>
                <el-col :span="12">
                  <img :src="loginCode" style="width: 155px" @click="gencode" >
                </el-col>
              </el-row>
            </el-row>
          </el-form-item>
          <el-form-item label="验证码" prop="validCode">

            <el-input v-model="registerForm.validCode" style="width: 140px" placeholder="请输入验证码" type="number"/>

            <el-button v-show="sendAuthCode" style="width: 150px" @click="getAuthCode">获取手机验证码</el-button>
            <el-button v-show="!sendAuthCode" style="width: 145px"> {{ auth_time }}秒后可重发</el-button>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="registerForm.email" style="width: 300px" placeholder="请输入邮箱"/>
          </el-form-item>
          <el-form-item label="公司名称">
            <el-input v-model="registerForm.companyName" style="width: 300px" placeholder="请输入公司名称"/>
          </el-form-item>
          <el-form-item label="公司介绍">
            <el-input
              v-model="registerForm.companyInfo"
              style="width: 300px"
              type="textarea"
              rows="3"
              placeholder="请输入公司介绍"/>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <input v-model="agreeLicense" type="checkbox">
        <span >阅读并接受</span>
        <span class="blueText" @click="userAgreementVisible = true">《xx用户协议》</span>
        <span>及</span>
        <span class="blueText" @click="userPrivateVisible = true">《xx隐私权保护声明》</span>
        <br>
        <router-link :to="{path:'/login'}" tag="a"><el-button style="width: 140px;margin-left: 15px;margin-top: 30px" type="primary">返回</el-button></router-link>
        <el-button style="width: 140px" type="primary" @click="btnSubmit">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import md5 from 'js-md5'
export default {
  name: 'Register',
  data() {
    return {
      rules: {
        account: [{ required: true, message: '请输入帐号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入账号名称', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入手机号码', length: 11, trigger: 'blur' }],
        validCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        code: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }]
      },
      formLabelWidth: '200px',
      agreeLicense: false,
      sendAuthCode: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
      auth_time: 0, /* 倒计时 计数器*/
      registerForm: {
        account: '',
        password: '',
        name: '',
        phone: '',
        validCode: '',
        email: '',
        companyName: '',
        companyInfo: '',
        status: '',
        code: ''
      },
      loginCode: process.env.BASE_API + '/user/gencode?=' + Math.random()
    }
  },
  created() {
    // this.startTimer()
  },
  methods: {
    startTimer() {
      console.log('start timer')
      this.timer = setInterval(this.gencode, 60000)
    },
    gencode() {
      this.loginCode = process.env.BASE_API + '/user/gencode?=' + Math.random()
    },
    getAuthCode() {
      if (this.registerForm.code === '' || this.registerForm.code === undefined) {
        this.$message.info('图形验证码不能为空')
        return
      }
      if (this.registerForm.phone === '' || this.registerForm.phone === undefined) {
        this.$message.info('手机号码不能为空')
        return
      }
      if (this.registerForm.phone.length !== 11) {
        this.$message.info('请输入正确手机号码')
        return
      }
      var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!reg.test(this.registerForm.phone)) {
        this.$message.error('手机号码格式不对')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('phone', vm.registerForm.phone)
      params.append('gcode', vm.registerForm.code)
      axios.post(process.env.BASE_API + '/user/getsms', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          // vm.$message(obj.message)
          vm.sendAuthCode = false
          vm.auth_time = 60
          var auth_timetimer = setInterval(() => {
            vm.auth_time--
            if (vm.auth_time <= 0) {
              vm.sendAuthCode = true
              clearInterval(auth_timetimer)
            }
          }, 1000)
        }
      }).catch(function(error) {
        alert(error)
      })
      vm.gencode()
    },
    checkLength() {
      var reg = /^[A-Za-z0-9-_]{8,32}$/
      if (!reg.test(this.registerForm.account)) {
        this.$message.info('请输入字母或数字组成的账号，长度8-32位')
      }
    },
    btnSubmit() {
      if (this.registerForm.account === '' || this.registerForm.account === undefined) {
        this.$message.info('请输入字母或数字组成的账号，长度8-32位')
        return
      }
      var reg = /^[A-Za-z0-9-_]{8,32}$/
      if (!reg.test(this.registerForm.account)) {
        this.$message.info('请输入字母或数字组成的账号，长度8-32位')
        return
      }
      var re = /select|update|delete|truncate|join|union|exec|insert|drop|count|sql|'|"|;|>|<|%/i
      if (re.test(this.registerForm.account)) {
        this.$message.info('请输入字母或数字组成的账号，长度8-32位')
        return
      }
      if (this.registerForm.password === '' || this.registerForm.password === undefined) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      if (this.registerForm.password.length < 8) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      // 必须包含数字、大小写字母和特殊符号
      // (?=.*[\W])   必须有特殊符号
      // (?=.*[A-Z]) 必须有小写字母
      var repw = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[1-9]).{8,}$/
      if (!repw.test(this.registerForm.password)) {
        this.$message.info('密码需是8-32位的英文大小写加数字组合')
        return
      }
      if (this.registerForm.name === '' || this.registerForm.name === undefined) {
        this.$message.info('请输入账号名称，不能为空')
        return
      }
      if (this.registerForm.name.length < 2) {
        this.$message.info('请输入两位以上的字符')
        return
      }
      if (this.registerForm.phone === '' || this.registerForm.phone === undefined) {
        this.$message.info('请输入手机号码，不能为空')
        return
      }
      if (this.registerForm.phone.length !== 11) {
        this.$message.info('请输入正确手机号码')
        return
      }
      var regPhone = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!regPhone.test(this.registerForm.phone)) {
        this.$message.info('请输入正确手机号码')
        return
      }
      if (this.registerForm.validCode === '' || this.registerForm.validCode === undefined) {
        this.$message.info('请输入验证码，不能为空')
        return
      }
      if (this.registerForm.validCode.length !== 6) {
        this.$message.info('验证码错误')
        return
      }
      if (this.registerForm.email === '' || this.registerForm.email === undefined) {
        this.$message.info('请输入email，不能为空')
        return
      }
      var regEmail = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
      if (this.registerForm.email === '') {
        this.$message.info('请输入email，不能为空')
        return
      } else if (!regEmail.test(this.registerForm.email)) {
        this.$message.info('邮箱格式不正确')
        return
      }
      if (this.agreeLicense !== true) {
        this.$message.info('未勾选阅读协议')
        return
      }
      var vm = this
      var params = new URLSearchParams()
      params.append('account', vm.registerForm.account)
      params.append('password', md5(vm.registerForm.password))
      params.append('email', vm.registerForm.email)
      params.append('name', vm.registerForm.name)
      params.append('phone', vm.registerForm.phone)
      params.append('validCode', vm.registerForm.validCode)
      params.append('companyName', vm.registerForm.companyName)
      params.append('companyInfo', vm.registerForm.companyInfo)
      axios.post(process.env.BASE_API + '/user/insert', params).then(function(response) {
        var obj = response.data
        if (obj.code !== 10000) {
          vm.$message.error(obj.message)
        } else {
          vm.$message.info(obj.message)
          vm.clearRegisterForm()
          vm.$router.push('/#/login')
        }
      }).catch(function(error) {
        alert(error)
      })
    },
    clearRegisterForm() {
      this.registerForm.account = ''
      this.registerForm.password = ''
      this.registerForm.email = ''
      this.registerForm.name = ''
      this.registerForm.phone = ''
      this.registerForm.validCode = ''
      this.registerForm.companyName = ''
      this.registerForm.companyInfo = ''
    }
  }
}
</script>

<style scoped>
  .bg {
    background-color: lightgray;
    width: 100%;
    height: 100%;
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    margin: 0px auto 40px auto;
    text-align: center;
    margin-top: 20px;
    background-color: white;
    height: 50px;
  }

  .step_bg {
    margin:0 auto;
    background-color: white;
    width: 800px;
    height: 800px;
    border:1px solid white;
  }
  .step {
    margin-top: 50px;
    margin-left: 30px;
  }
</style>
