<template>
  <div>
    <b-row class="mb-3" >
      <b-col>
        <div class="text-left mb-1 akkurat-regular">Contatos: </div>
        <div class="profile-card px-2 pt-3 pb-0">
          <b-form>
            <b-form-row class="custom-form-row">
              <b-form-group class="col-md-6 col-sm-12">
                <email v-model="email" :submit="submit"/>
              </b-form-group>
              <b-form-group class="col-md-6 col-sm-12">
                <phone-number v-model="mobile_computed" :submit="submit" />
              </b-form-group>
            </b-form-row>

            <b-form-row class="custom-form-row">
              <b-form-group class="col-md-4 col-sm-12">
                <phone-number
                  title="Telefone"
                  v-model="telephone_computed"
                  place-holder="62 3030-3030"
                  :is_cellphone="false"
                  :submit="submit"
                />
              </b-form-group>
              <b-form-group class="col-md-4 col-sm-12">
                <phone-number
                  title="Telefone para Recado"
                  v-model="phoneToMessage"
                  place-holder="62 3131-3131"
                  :is_cellphone="false"
                />
              </b-form-group>
              <b-form-group class="col-md-4 col-sm-12">
                <text-input v-model="person" place-holder="Joana vizinha" title="Falar com:"/>
              </b-form-group>
            </b-form-row>
          </b-form>
        </div>
      </b-col>
    </b-row>
    <b-row>
      <b-col class="d-flex justify-content-center align-items-center my-2">
        <signup-button title="Voltar" icon="user-friends" btn-color="#FF9B64"
        class="align-self-center" router-name="Dados Pessoais" />
        <signup-button title="Continuar" icon="user-friends" btn-color="#278937" @clicked="done"
        class="align-self-center" />
      </b-col>
    </b-row>
  </div>
</template>

<script>
import Email from '@/components/shared-components/inputs/Email.vue';
import TextInput from '@/components/shared-components/inputs/TextInput.vue';
import PhoneNumber from '@/components/shared-components/inputs/PhoneNumber.vue';
import SignupButton from '@/components/signup/SignupButton.vue';
import SalesConsultantsWebService from "@/services/resources/SalesConsultantsWebService";

const service = SalesConsultantsWebService.build();


export default {
  name: 'signup-form',
  components: {
    Email,
    TextInput,
    PhoneNumber,
    SignupButton
  },
  data: () => ({
    email: '',
    person: '',
    mobile_component: null,
    phoneToMessage: '',
    telephone_component: null,
    code: 0,
    phoneChanged: false,
    submit: false,
    cpf: '',
    mobilePhone: '',
    residentialPhone: '',
    campaign_code: '',
    spc_restrition: '',
    name: '',
    gender: '',
    docId: '',
    govAgent: '',
    birthDate: '',
    motherName: '',
    whoIndicated:''
  }),
  computed:{
    mobile_computed:{
      get(){
        return this.mobile_component || this.mobilePhone || '';
      },
      set(new_number){
        this.mobile_component = new_number;
        this.phoneChanged = true;
      }
    },
    telephone_computed:{
      get(){
        return this.telephone_component || this.residentialPhone || '';
      },
      set(new_number){
        this.telephone_component = new_number;
      }
    }
  },
  methods:{
    done(){
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

      if((this.email.length > 0 && !re.test(this.email)) || this.mobile_computed.length == 0 || 
        this.telephone_computed.length == 0){
          this.submit = true;
          return;
      }

      if(this.mobilePhone != this.mobile_computed){
        let data = {
          step: 'verify-cellphone',
          cellphone: this.mobile_computed
        }

        service
        .create(data)
        .then(response => {
            this.goRoute();
        }).catch(err => {
          console.log(err);
        });
      }else{
        this.goRoute();
      }

    },
    goRoute(){
      
      var contacts = [];
      contacts.push({
        is_cellphone: true, 
        is_whatsapp: false,
        is_note: false,
        ddd: String(this.mobile_computed).substr(0, 2),
        number: String(this.mobile_computed).substr(2, String(this.mobile_computed).length),
        is_verified: false,
        is_principal: true        
      });

      contacts.push({
        is_cellphone: false, 
        is_whatsapp: false,
        is_note: false,
        ddd: String(this.telephone_computed).substr(0, 2),
        number: String(this.telephone_computed).substr(2, String(this.telephone_computed).length),
        is_verified: false,
        is_principal: false        
      });

      contacts.push({
        name: this.person,
        is_cellphone: false, 
        is_whatsapp: false,
        is_note: true,
        ddd: String(this.phoneToMessage).substr(0, 2),
        number: String(this.phoneToMessage).substr(2, String(this.phoneToMessage).length),
        is_verified: false,
        is_principal: false        
      });


      let data = {
        cpf: this.cpf,
        name: this.name,
        email: this.email,
        gender: this.gender,
        docId: this.docId,
        govAgent: this.govAgent,
        birthDate: this.birthDate,
        motherName: this.motherName,
        whoIndicated: this.whoIndicated,
        contacts: contacts,
        billing_address: {},
        shipping_address: {},
        campaign_code: this.campaign_code,
        spc_restrition: this.spc_restrition
      };

      localStorage.step_3 = JSON.stringify(data);


      this.$router.push({
          name: 'Endereço de Cobrança'
      });
    }
  },
  mounted(){

    if(!localStorage.step_2){
       this.$router.push({
            name: 'Documentos'
       });
    }

    if(localStorage.step_3){
      let data = JSON.parse(localStorage.step_3);

      this.email = data.email;
      this.phoneToMessage = data.contacts[2].ddd + data.contacts[2].number;
      this.person = data.contacts[2].name;
    }

    let data = JSON.parse(localStorage.step_2);
    this.cpf = data.cpf;
    this.mobilePhone = data.mobilePhone;
    this.residentialPhone = data.residentialPhone;
    this.campaign_code = data.campaign_code;
    this.spc_restrition = data.spc_restrition;
    this.name = data.name;
    this.gender = data.gender;
    this.docId = data.docId;
    this.govAgent = data.govAgent;
    this.birthDate = data.birthDate;
    this.motherName = data.motherName;
    this.whoIndicated = data.whoIndicated;
    
  }
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';

.custom-width {
  width: 25%;
}
</style>
