<template>
  <div>
    <div class="formulario_principal_navegacao">
      <div class="formulario_principal_navegacao_div">
        <div class="formulario_principal_navegacao_div_selecionado"></div>
        <span>Vincular Email</span>
      </div>
      <div class="formulario_principal_navegacao_div" @click="vincularTelefone">
        <div class="formulario_principal_navegacao_div_nao_selecionado"></div>
        <span>Vincular Telefone</span>
      </div>
      <div class="formulario_principal_navegacao_div" @click="alterarSenha">
        <div class="formulario_principal_navegacao_div_nao_selecionado"></div>
        <span>Alterar Senha</span>
      </div>
    </div>
    <div class="formulario_principal_corpo">
      <div class="formulario_principal_corpo_mensagem">
        <span>Clique em "Receber Código" para obter o código de verificação e complete a validação</span>
      </div>
      <div class="formulario_principal_corpo_formulario">
        <el-form
          class="formulario-email"
          :rules="regrasEmail"
          :model="dadosEmail"
          ref="formularioEmail"
        >
          <el-form-item prop="email">
            <span class="icone-email">
              ![](@/assets/img/email.png)
            </span>
            <el-input
              placeholder="Digite seu email"
              type="text"
              tabindex="1"
              v-model="dadosEmail.email"
              show-word-limit
              maxlength="20"
              ref="campoEmail"
            />
          </el-form-item>

          <el-form-item class="campo-verificacao">
            <span class="icone-verificacao">
              ![](@/assets/img/codigo_verificacao.png)
            </span>
            <el-input
              ref="campoVerificacao"
              placeholder="Digite o código de verificação"
              v-model="dadosEmail.codigo"
              type="text"
              maxlength="6"
              onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
              tabindex="2"
            />
          </el-form-item>
          <el-button
            v-show="visivel"
            class="botao-enviar"
            type="primary"
            @click="iniciarTemporizador"
          >{{textoBotao}}</el-button>
          <el-button v-show="!visivel" class="botao-enviar" type="primary">{{textoBotao}}</el-button>
        </el-form>
        <el-button type="primary" class="botao-confirmar">Confirmar</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import storage from "@/config/storage.js";
import { validarEmail, validarTelefone } from "@/components/validadores";
import configuracao from "@/config";

export default {
  data() {
    var validarCampoEmail = (regra, valor, callback) => {
      if (this.dadosEmail.email == "" || !this.dadosEmail.email.trim()) {
        callback(new Error("O email não pode estar vazio"));
      }
      if (!validarEmail(this.dadosEmail.email)) {
        callback(new Error("Por favor, insira um formato válido"));
      } else {
        callback();
      }
    };
    return {
      textoBotao: "Receber Código",
      visivel: true,
      tempoTotal: 60,
      dadosEmail: {
        email: "",
        codigo: ""
      },
      regrasEmail: {
        email: [
          { required: true, validator: validarCampoEmail, trigger: "blur" }
        ]
      },
      valorEmailArmazenado: ""
    };
  },
  mounted() {
    this.valorEmailArmazenado = storage.get("valorLogin");
  },
  methods: {
    vincularTelefone() {
      this.$router.push("/vincular/telefone");
    },
    alterarSenha() {
      this.$router.push("/alterar/senha");
    },
    iniciarTemporizador() {
      if (validarEmail(this.valorEmailArmazenado)) {
        this.$message.error({ message: "Esta conta já usa email, não é possível vincular novamente" });
      } else {
        // Realizar validação parcial do campo
        this.$refs.formularioEmail.validateField('email', (valido) => {
          if (valido) {
            return false;
          } else {
            this.visivel = false;
            this.$axios
              .get(
                configuracao.URL_BASE +
                  "/enviarCodigoEmail?" +
                  "email=" +
                  this.dadosEmail.email
              )
              .then(res => {
                if(res.data.codigo === 500){
                  this.$message.error({ message: "Este email já está registrado na plataforma" });
                  setTimeout(() => {
                    this.dadosEmail.email = '';
                  }, 1000);
                } else if(res.data.codigo === 200){
                  var temporizador = setInterval(() => {
                    this.tempoTotal--;
                    this.textoBotao = this.tempoTotal + "s para reenviar";
                    if (this.tempoTotal < 0) {
                        this.tempoTotal = 60;
                        this.visivel = true;
                        clearInterval(temporizador);
                        this.textoBotao = "Reenviar Código";
                    }
                  }, 1000);
                }
              })
              .catch(err => {
                this.$message({ message: "Erro no servidor" });
              });
          }
        });
      }
    }
  }
};
</script>

<style>
/* Estilos omitidos por brevidade */
</style>

Principais técnicas de validação:

// Método principal de validação parcial
this.$refs.formularioEmail.validateField('email', (valido) => {
  if (valido) {
    return false;
  } else {
    // Executar operações após validação
  }
});
// 'formularioEmail' é o objeto do formulário inteiro, 'email' é a regra de validação específica
// Quando a validação passa, a operação é executada, reduzindo chamadas desnecessárias

<br></br><br></br><br></br>Outra técnica útil:

Envolver o componente de upload em um <el-form-item ref= 'componenteUpload'> e usar o componante como referência. No hook on-success, chame this.$refs.componenteUpload.clearValidate(); para limpar as enformações de validação após a operação bem-sucedida.

<br></br>