<template>
  <b-modal id="attachment-fullscreen" :no-close-on-backdrop="true" size="lg">
    <template v-slot:modal-header="{  }">
      <b-container>
        <b-row class="d-flex justify-content-between mb-2 mt-1">
          <b-col class="d-flex modal-text-color ml-2" cols="8">
            <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
              <font-awesome-icon icon="exclamation-circle" class="align-self-center" />
            </div>
            <div class="pt-1">
              <div class="akkurat-bold max-header-text">{{ attachment.attachment.description }}</div>
            </div>
          </b-col>
          <b-col class="d-flex justify-content-end mr-2 mt-1">
            <span class="close-icon" @click="closeModal">
              <font-awesome-icon icon="times" class="align-self-center" />
            </span>
          </b-col>
        </b-row>
      </b-container>
    </template>

    <b-container>
      <b-row class="justify-content-center mb-2">
        <b-col cols="6">
          <template v-if="attachment.extension == 'pdf'">
            <img src="@/assets/pdf-icon.png" class="img-fluid" />
            
              <b-row class="justify-content-center">
                <a href="javascript:void(0);" 
                @click="openNewWindowPdf(attachment.path)"
                    class="mr-2 btn shadow-none border-0 btn-default btn-info"
                  >
                    Visualizar PDF
                </a>
              </b-row>
          </template>
          <template v-else>
            <div style="height: 370px;" class="d-flex justify-content-center align-items-center">
            <img :src="'data:image/jpeg;base64,' + attachment.path" class="img-fluid" :style="{height: '200px', transform: 'rotate('+ (rotation * 90) % 360 +'deg)'}" />
            </div>
            <b-row class="justify-content-center">
              <b-button
                  class="mr-2 btn shadow-none border-0 btn-default btn-theme"
                  @click="rotation++"
                >
                <font-awesome-icon icon="sync-alt" class="align-self-center" />

              </b-button>
            </b-row>
          </template>
        </b-col>
        
        <b-col cols="6" v-if="!isDisable">

          <b-col cols="12" class="mb-5">
            <label>Observações:</label>
            <b-form-textarea no-resize v-model="description">
            </b-form-textarea>
          </b-col>
       
        <b-col cols="12">
          <b-row class="justify-content-center">
            <h5>Outros anexos</h5>
          </b-row>
          <b-carousel
            id="carousel-1"
            v-model="slide"
            :interval="4000"
            controls
            indicators
            background="#fff"
            img-width="1024"
            img-height="200"
            style="text-shadow: 1px 1px 2px #333;"
            @sliding-start="onSlideStart"
            @sliding-end="onSlideEnd"
          >
            <b-carousel-slide v-for="item in attachments" :caption="item.attachment.description " class="wrap-item" >

              <template v-slot:img >
                  <img
                  @click="openNewWindowImage(item.path)"
                    v-if="item.extension != 'pdf'"
                    class="d-block img-fluid w-100" 
                    height="200"
                    :src="'data:image/jpeg;base64,' + item.path"
                    alt="image slot"
                  />
                  <img
                  @click="openNewWindowPdf(item.path)"
                    v-else
                    class="d-block img-fluid w-100"
                    height="200"
                    src="@/assets/pdf-icon.png"
                    alt="image slot"
                  />
              </template>
            </b-carousel-slide>
          </b-carousel>
        </b-col>

         </b-col>
      </b-row>
    </b-container>

    <template v-slot:modal-footer="{  }">
      <b-container>
        <b-row>
          <b-col cols="12" class="d-flex justify-content-center my-3 px-3">
            <b-button
                v-if="!isDisable"
                class="mr-2 btn shadow-none border-0 btn-default btn-red"
                @click="done(true)"
              >
                Reprovar
            </b-button>
            
            <b-button
              v-if="!isDisable"
              class="mr-2 btn shadow-none border-0 btn-default"
              @click="done(false)"
            >
              Aprovar
            </b-button>

            <b-button
              v-if="isDisable"
              class="mr-2 btn shadow-none border-0 btn-default"
              @click="closeModal"
            >
              Fechar
            </b-button>
          </b-col>
        </b-row>
      </b-container>
    </template>

  </b-modal>
</template>

<script>
import SalesConsultantStatusService from "@/services/resources/SalesConsultantStatusService";

const service = SalesConsultantStatusService.build();

export default {
  name: 'accept-credit-card',
  props:{
    isDisable:{
      type: Boolean
    },
    attachment:{
      type: Object
    },
    attachments:{
      type: Array
    },
    sales_consultant_id:{
      type: Number
    },
    sales_consultant_status_id:{
      type: Number
    }
  },
  data: () => ({
    image_fullscreen: null,
    description: '',
    rotation: 0,
    slide: 0,
    sliding: null
  }),
  methods: {
    onSlideStart(slide) {
      this.sliding = true
    },
    onSlideEnd(slide) {
      this.sliding = false
    },
    openNewWindowImage(path){
      let data = 'data:image/png;base64,' + path;
      let w = window.open('about:blank', '_blank', "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=600");
      let image = new Image();
      image.src = data;
      setTimeout(function(){
        w.document.write(image.outerHTML);
      }, 0);
    },
    openNewWindowPdf(path){
      var type = 'application/pdf';
      let blob = null;
      const blobURL = URL.createObjectURL( this.pdfBlobConversion(path, 'application/pdf'));
      const theWindow = window.open(blobURL, '_blank', "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=600,height=600");
      const theDoc = theWindow.document;
      const theScript = document.createElement('script');
      function injectThis() {
          window.print();
      }
      theScript.innerHTML = 'window.onload = ${injectThis.toString()};';
      theDoc.body.appendChild(theScript);
                  
    },
    pdfBlobConversion(b64Data, contentType) {
      contentType = contentType || '';
      var sliceSize = 512;
      b64Data = b64Data.replace(/^[^,]+,/, '');
      b64Data = b64Data.replace(/\s/g, '');
      var byteCharacters = window.atob(b64Data);
      var byteArrays = [];

      for ( var offset = 0; offset < byteCharacters.length; offset = offset + sliceSize ) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
      }

      var blob = new Blob(byteArrays, { type: contentType });
      return blob;
    },
    closeModal() {
      this.description = '';
      this.$bvModal.hide('attachment-fullscreen');
      this.rotation = 0;
      this.$emit('result');

    },
     done(pending){

        let data = {
          sales_consultant_id: this.sales_consultant_id,
          sales_consultant_status_id: this.sales_consultant_status_id,
          attachment_id: this.attachment.id,
          status: pending ? 'ATTACHMENT_PENDING' : 'ATTACHMENT_APPROVED',
          description: this.description
        };
        this.description = '';
        this.$bvModal.hide('attachment-fullscreen');
        this.rotation = 0;
        this.$emit('result', data);

    }
  }
};
</script>

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


.item-attachment{
  height: 150px;
  overflow: hidden;
  cursor: pointer;
}

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}


.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 100%;
  max-width: 192px;
  height: 35px;
  background: #278937;
}

.btn-red {
  background: #CB2D2D;
}

.btn-theme{
  background: $theme-color-blue;
}

.wrap-item{
  height: 200px; 
  overflow: hidden;
  cursor: pointer;
}


</style>
