<template>
  <b-row>
    <b-col md="6" class="col-left">
      <div class="col-md-8 offset-md-2">
        <p class="text-justify">Faça um upload do seu documento de Identificação {{ selfSignup.document_identification_type}}.</p>

        <p class="text-justify">
          Certifique-se de que o documento
          esteja legível e com boa iluminação.
        </p>
        <p class="text-justify">
          O arquivo deve ter formato imagem
          (PNG, JPEG ou JPG) e ter no máximo
          10 mb.)
        </p>

        <b-row>
          <b-col md="6">
            <image-input v-model="document_identification_photo_front" />Frente ({{ selfSignup.document_identification_type === "CT"?  "Carteira de Trabalho" : selfSignup.document_identification_type }})
          </b-col>

          <b-col md="6">
            <image-input v-model="document_identification_photo_back" />Verso ({{ selfSignup.document_identification_type === "CT"?  "Carteira de Trabalho" : selfSignup.document_identification_type }})
          </b-col>
        </b-row>
      </div>
    </b-col>

    <b-col md="6" class="d-none d-sm-none d-md-block">
      <b-row>
        <b-col md="6" class="col-right">
          <img class="img-fluid" src="@/assets/sel-signup/cadastro_rg_frente.png" />
        </b-col>

        <b-col md="6" class="col-right">
          <img class="img-fluid" src="@/assets/sel-signup/cadastro_rg_verso.png" />
        </b-col>
      </b-row>
    </b-col>

    <b-col md="6" offset="6">
      <p style="line-height: 5em;" class="text-right text-middle">
        <b-button variant="warning" class="col-md-6" size="larger" :disabled="loading" @click="storeDocuments">
          <b-spinner small type="grow" v-show="loading"></b-spinner>
          FINALIZAR
          </b-button>
      </p>
    </b-col>

    <message-modal :message="alertMessage" />
  </b-row>
</template>

<script>
import ImageInput from "@/components/shared-components/UploadImageThumb";
import { objectToFormData } from "@/utils/convert.js";
import MessageModal from "@/components/modals/MessageModal.vue";
import SelfSignUp from "@/services/resources/SelfSignUpService";

const service = SelfSignUp.build();
export default {
 props:{
    id:{
      default(){
        return 0;
      }
    },
    token:{
      default(){
        return "";
      }
    },
    cpf:{
      default(){
        return "";
      },
    },
        selfSignup:{
  
        }
   
  },
  model:{
    prop: 'selfSignup'
  },
  components: {
    ImageInput,
    MessageModal
  },
  data: () => {
    return {
      document_identification_photo_front: "",
      document_identification_photo_back: "",
      alertMessage: "",
      loading: false
    };
  },
  methods: {
    storeDocuments(file) {
      if (
        this.document_identification_photo_front == "" ||
        this.document_identification_photo_back == ""
      ) {
        this.alertMessage =
          "Por favor, faça um upload do seu documento de Identificação. ";
        this.$bvModal.show("message-modal");
        return;
      }

      let formToSend = {
        token: this.token,
        id: this.id,
        cpf: this.cpf,
        document_identification_photo_front: this.document_identification_photo_front,
        document_identification_photo_back: this.document_identification_photo_back
      };

      let formData = objectToFormData(formToSend);

      this.store(formData);
    },
    store(form) {
      var vm = this;
      this.loading = true;
      form.append("_method", "PUT");
      service
        .update(form)
        .then(response => {
          vm.$emit("next", { token: vm.token, id: vm.id, cpf: vm.cpf });
          vm.loading = false;
        })
        .catch(err => {
          console.log(err);
          let resp = JSON.parse(err.response.data);
          vm.alertMessage = resp.msg;
          vm.$bvModal.show("message-modal");
          vm.loading = false;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.col-left {
  padding-top: 70px;
}
.col-right {
  margin: 0px;
  padding: 0px;
  img {
    max-height: 400px;
  }
}
</style>