<template>
  <div>
    <b-row v-if="getCurrentValue">
      <b-col md='12'>

        <b-row>

<b-form-group class="col-md-2 col-sm-12">
            <select-input title="Campanha" 
            v-model="getCurrentValue.campaign_id" :submit="submit" 
           
            :options="campaignsComputed" />
          </b-form-group>

 <b-form-group class="col-md-2 col-sm-12">
            <text-input
              title="Setor"
              :submit="submit"
              place-holder="106"
              v-model="getCurrentValue.sector_name"
            
            />
          </b-form-group>
        </b-row>
      </b-col>
      
      <b-col md="6">
        <h2 class="text-left">Dados Pessoais</h2>
        <b-row>
          <b-form-group class="col-md-12 col-sm-12">
            <text-input
              title="Nome Completo*"
              :submit="submit"
              place-holder="Lucia Matias"
              v-model="getCurrentValue.name"
            />
          </b-form-group>

          <b-form-group class="col-md-12 col-sm-12">
            <cpf title="CPF*" v-model="getCurrentValue.cpf" :submit="submit" :disabled="true" />
          </b-form-group>

          <b-form-group class="col-md-12">
            <date-input title="Nascimento*" v-model="getCurrentValue.birth_date" />
            <div class="text-left" v-show="submit && !getCurrentValue.birthDateIsValid()">
              <small class="pt-2 text-danger">Cadastro aceito apenas para maiores de idade</small>
            </div>
          </b-form-group>

          <b-form-group class="col-md-12">
            <phone-number
              :disabled="true"
              title="Celular*"
              :phoneNumber="getCurrentValue.phone"
              :submit="submit"
              v-model="getCurrentValue.phone"
            />
          </b-form-group>

          <b-form-group class="col-md-12 col-sm-12">
            <email title="E-mail*" email v-model="getCurrentValue.email" :submit="submit" :disabled="true" />
          </b-form-group>

           <b-form-group class="col-md-12 col-sm-12">
            <select-input title="Documento de Identificação" 
            v-model="getCurrentValue.document_identification_type" :submit="submit" 
           
            :options="[
            { value: 'RG', text: 'RG' },
            { value: 'CNH', text: 'CNH' },
             { value: 'CT', text: 'Cartirea de Trabalho' },
            ]" />
          </b-form-group>
        </b-row>
      </b-col>

      <b-col md="6" v-if="getCurrentValue">
        <h2 class="text-left">Endereço de entrega</h2>

        <form-address v-model="getCurrentValue.shipping_address" :submit="submit" />

        <div v-if="hasBillingAddress">
          <hr class="col-md-6" />
          <br>
 <h2 class="text-left">Endereço de cobrança</h2>
          <form-address v-model="getCurrentValue.billing_address" :submit="submit" />
        </div>

        <b-row>
          <b-col md="6">
            <p
              class="link-hasBillingAddres text-danger"
              v-if="!hasBillingAddress"
              @click="showBilliAddress(true)"
            >
              + Se você quiser um outro endereço
              para cobrança - clique aqui!
            </p>

            <p
              class="link-hasBillingAddres text-danger"
              v-if="hasBillingAddress"
              @click="showBilliAddress(false)"
            >- Clique aqui para remover o endereço de Cobrança!</p>
          </b-col>
        </b-row>
      </b-col>
    </b-row>

    

<div>
  
           
            <h4>Anexos</h4>

            <b-row class="images" v-viewer.rebuild="viewerOptions">
              <b-col md="2">
                <file-input
                  v-if="selfSignUp"
                  :fileInit="getCurrentValue.document_identification_selfie_url"
                  :disabled="!editing"
                  label="Selfie"
                  v-model="getCurrentValue.document_identification_selfie"
                />
              </b-col>

              <b-col md="2">
                <fileInput
                  v-if="selfSignUp"
                  :disabled="!editing"
                  :label="'Frente. ('+getCurrentValue.document_identification_type+')'"
                  :fileInit="getCurrentValue.document_identification_photo_front_url"
                  v-model="getCurrentValue.document_identification_photo_front"
                />
              </b-col>

              <b-col md="2">
                <file-input
                  v-if="selfSignUp"
                  :disabled="!editing"
                   :label="'Verso. ('+getCurrentValue.document_identification_type+')'"
                  :fileInit="getCurrentValue.document_identification_photo_back_url"
                  v-model="getCurrentValue.document_identification_photo_back"
                />
              </b-col>

              <b-col md="2">
                <file-input
                  v-if="selfSignUp && selfSignUp.shipping_address"
                  :fileInit="getCurrentValue.shipping_address.proof_url"
                  :disabled="!editing"
                  label="End. Entrega"
                  v-model="getCurrentValue.shipping_address.proof"
                />
              </b-col>

<b-col md="2">
                <file-input
                   v-if="selfSignUp &&  hasBillingAddress"
                  :fileInit="getCurrentValue.billing_address.proof_url"
                  :disabled="!editing"
                  label="End. Cobrança"
                  v-model="getCurrentValue.billing_address.proof"
                />
              </b-col>

            </b-row>
          
</div>

 

    <!-- #################### Modals #################### -->

    <message-modal :message="alertMessage" />
  </div>
</template>

<script>
import TextInput from "@/components/shared-components/inputs/TextInput.vue";
import Cpf from "@/components/shared-components/inputs/Cpf.vue";
import PhoneNumber from "@/components/shared-components/inputs/PhoneNumber.vue";
import NumberInput from "@/components/shared-components/inputs/NumberInput.vue";
import Email from "@/components/shared-components/inputs/Email.vue";
import DateInput from "@/components/shared-components/inputs/DateInput.vue";
import SelectInput from "@/components/shared-components/inputs/SelectInput.vue";
import fileInput from "@/components/shared-components/FileInput";
import SelfSignUp from "@/services/resources/SelfSignUpService";
import CampaignService from "@/services/resources/CampaignService";
import AddressModel from "@/models/AddressModel.js";
import MessageModal from "@/components/modals/MessageModal.vue";

import moment from "moment";
import SelfSignupModel from "@/models/SelfSignupModel.js";


import formAddress from "@/components/shared-components/forms/address";

const service = SelfSignUp.build();
const campaignService = CampaignService.build();
const viewerOptions = {
  inline: false,
  button: true,
  navbar: false,
  title: false,
  toolbar: true,
  tooltip: false,
  movable: true,
  zoomable: true,
  rotatable: true,
  scalable: false,
  transition: true,
  fullscreen: true,
  keyboard: true,
  url: "data-source"
};

export default {
 props:{
        selfSignUp:{
            required: true,
            type: SelfSignupModel
        },
        submit:{
          type: Boolean,
          default: false
        },
        hasBillingAddress:{
            type: Boolean,
            default: false
        }
    },
    model:{
        prop: 'selfSignUp',
        event: 'change'
    },
  components: {
    TextInput,
    Cpf,
    Email,
    PhoneNumber,
    NumberInput,
    DateInput,
    MessageModal,
    formAddress,
    SelectInput,
    fileInput
  },
  data() {
    return {

      alertMessage: "",
      id: 11,
      token: "",
      loading: false,
      viewerOptions: viewerOptions,
      editing: true,
      campaigns: []
    };
  },
  computed:{
         getCurrentValue: {
      get() {
        return this.selfSignUp;
      },
      set(value) {
        this.$emit('change', value);
      },
    },
    campaignsComputed(){
      var computed = [];

computed.push({
        value:null,
        text: "----"
      });

      this.campaigns.forEach(campaign =>{
        computed.push({
          value: campaign.id,
          text: campaign.name
        });
      });
  return computed;
    }
    },
  methods: {
    update() {
      this.submit = true;

    if(this.form.isValid() && this.formAddress){

    }

      return this.form.isValid();
    },

    updateSelfSignup() {
      var vm = this;
      let formToSend = {
        token: this.token,
        id: this.id,
        _method: "PUT"
      };

      Object.assign(formToSend, this.form);
      this.loading = true;
      service
        .update(formToSend)
        .then(response => {
          vm.$emit("next", { token: vm.token, id: vm.id, cpf: vm.form.cpf });
          vm.loading = false;
        })
        .catch(err => {
          let resp = JSON.parse(err.response.data);
          vm.alertMessage = resp.msg;
          vm.$bvModal.show("message-modal");
          vm.loading = false;
        });
    },
    showBilliAddress(hasBillingAddress) {
      this.$emit('hasBillingAddress',hasBillingAddress);
    },
    loadCampaign(){
var vm = this;
this.loading = true;
campaignService
.search({
  interval_end_date_start: moment().add('months',1).format('YYYY-MM-DD'),
  limit: 10,
  order_by: 'start',
  order: 'DESC'
})
        .then(response => {
        console.log(response);
          vm.campaigns = response
          vm.loading = false;

        })
        .catch(err => {
           let resp = JSON.parse(err.response.data);
          vm.$fire({
            title: "Falha ao consultar dados",
            text: resp.msg,
            type: "error"
          });
          vm.loading = false;
        });

    }
  },
  mounted(){
    this.loadCampaign();
  }
};
</script>

<style lang="scss">
.group-type-address {
  legend.col-form-label {
    padding-bottom: 0px !important;
  }
  .custom-control-label {
    &::before,
    &::after {
      opacity: 0;
    }
  }

  .custom-radio {
    padding-left: 12px;
  }
  input[type="radio"] {
    margin-left: -16px !important;
  }
}
h2 {
  font-size: 0.9em;
}
.link-hasBillingAddres {
  cursor: pointer;
  &:hover,
  &:active {
    text-decoration: underline;
  }
}
</style>
