<template>
  <div class="form">
    <el-form ref="elForm" hide-required-asterisk	 :model="form" :rules="rules" label-position="top" size="small">
      <el-form-item v-for="(value,key) in form" :prop="key" :label="formLabel[key]">
        <el-input v-model="form[key]"
                  clearable
                  :placeholder="'请输入'+formLabel[key]">
          <template #append v-if="key === 'mobile'">
            <el-button :disabled="isVerify" @click="sendVerify">
              {{ time ? time+'秒重新获取' : '发送验证码'}}
            </el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item style="padding-top: 10px;">
        <div style="display: flex;">
          <Button long type="primary" ghost @click="$emit('toLogin')">返回登录</Button>
          <Button :loading="isLoading" long type="primary" @click="register">确认注册</Button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { sendSms, register } from "@/api/h5";
export default {
  data() {
    return {
      form: {
        name: '',
        lianxiren: '',
        lianxidianhua: '',
        mobile: '',
        code: '',
      },
      formLabel: {
        name: '公司名称',
        lianxiren: '联系人',
        lianxidianhua: '联系电话',
        mobile: '手机号',
        code: '验证码'
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: 'blur'
          },
        ],
        lianxiren: [
          {
            required: true,
            message: '请输入联系人',
            trigger: 'blur'
          },
        ],
        lianxidianhua: [
          // {
          //   required: true,
          //   message: '请输入联系电话',
          //   trigger: 'blur'
          // },
          {
            validator:(rule, value, callback) => {
              const mobile = /^1[3456789]\d{9}$/;
              const phone = /^((0\d{2,3})-)?(\d{7,8})$/;
              if (mobile.test(value) || phone.test(value)) {
                callback()
              } else {
                callback(new Error('联系电话格式错误'))
              }
            }
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          },
          {
            validator:(rule, value, callback) => {
              const reg = /^1[3456789]\d{9}$/;
              if (reg.test(value)) {
                callback()
              } else {
                callback(new Error('手机号格式错误'))
              }
            }
          }
        ],
        code: [
          {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          },
        ]
      },
      isLoading: false,
      isVerify: false,
      timer: null,
      time: 0,
    }
  },
  methods: {
    sendVerify () {
      if (this.isVerify) return
      this.$refs['elForm'].validateField('mobile',(res) => {
        if (!res) {
          sendSms({
            mobile: this.form.mobile,
            type: 5
          }).then(res => {
            this.time = 60;
            this.isVerify = true;

            this.timer = setInterval(() => {
              this.time > 0 ? (this.time--) : (clearInterval(this.timer),this.isVerify = false)
            },1000)
          })
        }
      })
    },

    register () {
      //this.$emit('toLogin');
      this.$refs['elForm'].validate((res) => {
        if (res) {
          this.isLoading = true;

          register(this.form).then(res => {
            this.isLoading = false;

            this.$Message.success({
              content: '注册成功'
            });
            setTimeout(() => this.$emit('toLogin'),1500);
          }).catch(err => this.isLoading = false)
        }
      })
    }
  },
  computed: {},
}
</script>

<style scoped lang="scss">
::v-deep .el-form--label-top .el-form-item__label {
  line-height: 20px;
  font-size: 13px;
}
::v-deep .el-input-group__append > button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: #fff;
  transition: all .2s;

  &:not([disabled^=disabled]) {
    background: #de6d48;
  }
}
::v-deep .el-button.is-disabled {
  background: #999;
  color: #fff;
}
</style>
