<template>
  <div>
    <div v-for="(item,index) in value" :key="'document_component_'+index" :class="{ 'document-block': ! item.fixed, 'document-block-fixed': item.fixed }">
      <slot v-if="item.type === 'slot'"/>
      <component v-else :is="item.type" :style="item.style" @input="e => handleInput(index, e)" :value="item.value" :contenteditable="!item.fixed">
        {{item.value}}
      </component>
    </div>
    <VueHtml2pdf
      :enable-download="true"
      :paginate-elements-by-height="1400"
      :pdf-quality="2"
      :manual-pagination="false"
      pdf-format="a4"
      pdf-orientation="landscape"
      pdf-content-width="750px"
      :html-to-pdf-options="{ margin: 5, filename: 'document' }"
      ref="html2Pdf"
    >
      <section slot="pdf-content">
        <!-- PDF Content Here -->
        <div v-for="(item,index) in value" :key="'document_component_pdf_'+index" >
          <slot v-if="item.type === 'slot'"/>
          <component v-else :is="item.type" :style="item.style" @input="e => handleInput(index, e)" :value="item.value" :contenteditable="!item.fixed">
            {{item.value}}
          </component>
        </div>
      </section>
    </VueHtml2pdf>
    <div class="my-2 d-flex justify-content-center d-print-none hidden-print">
      <button class="btn btn-secondary" @click="print">
        <i class="mdi mdi-printer" />
        Print
      </button>
    </div>
  </div>
</template>
<script>
import VueHtml2pdf from 'vue-html2pdf'
import { signature, inputText } from '../..';
export default {
  components: {
    signature,
    inputText,
    VueHtml2pdf
  },
  props: {
    value: Array,
    printPage: Boolean
  },
  methods: {
    handleInput(index, e) {
      let value = e;
      if (typeof value === 'object' && value.target && value.target.innerText) {
        return;
      }
      const valueCopy = [...this.value];
      valueCopy[index].value = value;
      this.$emit('input', valueCopy);
    },
    print() {
      if(!this.printPage) {
        this.$refs.html2Pdf.generatePdf()
      } else {
        window.print()
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .document-block {
    border-radius: .25rem;
    transition: background-color 0.2s ease;

    &:hover {
      background-color: #00000011;
    }
  }
</style>