<template>
  <div class="self-sign-up-main">
    <steps @click="changeStep" :active="stepActive" />

    <p class="text-center">
      Complete o cadastro com todas a informações solicitadas.
      <br />É muito importante que o seu cadastro esteja completo.
    </p>

    <component v-if="selfSignup" :is="currentComponent" :id="id" :token="token" :cpf="cpf" @next="next" v-model="selfSignup"/>
  
  
  </div>
</template>

<script>
import steps from "./steps";
import personData from "./personData";
import vAddress from "./address";
import documentAttachments from "./documentAttachment";
import attachments from "./attachments";
import SelfSignupModel from "@/models/SelfSignupModel.js";
import talkto from './talkTo'

export default {
  components: {
    steps,
    personData,
    vAddress,
    documentAttachments,
    attachments
  },
  data() {
    return {
      stepActive: 1,
      id: 0,
      token: "",
      cpf: "",
      selfSignup: new SelfSignupModel()
    };
  },
  computed: {
    currentComponent() {
      switch (this.stepActive) {
        case 1:
          return "personData";
          break;
        case 2:
          return "vAddress";
          break;
        case 3:
          return "attachments";
          break;
        case 4:
          return "documentAttachments";
          break;
        default: {
          return "personData";
        }
      }
    }
  },
  methods: {
    changeStep(step) {
      // this.stepActive = step;
    },
    next(payload) {
      this.id = payload.id;
      this.token = payload.token;
      this.cpf = payload.cpf;

      localStorage.setItem(
        "self-signup",
        JSON.stringify({
          id: payload.id,
          token: payload.token,
          cpf: payload.cpf,
          stepActive: this.stepActive
        })
      );

      if (this.stepActive < 4) {
        this.stepActive++;
        return;
      }

      this.$router.push("/obrigado-por-se-registrar");
    }
  },
 
};
</script>
<style lang="scss">
.self-sign-up-main {
  margin-top: 80px;
  padding-bottom: 40px;
}

input {
  text-transform: uppercase;
}

.btn-primary {
  background-color: #ff9b64;
  border-color: #ff9b64;

  &:hover {
    background-color: #e07438;
    border-color: #e07438;
  }
}
.text-primary {
  color: #ff9b64 !important;
}
</style>
