<template>
  <div
    :style="{
      display: 'table',
      height: `${height}px`,
      width: `${width}px`,
      padding: 0,
      transform: `scale(${aspectRatio})`,
      transformOrigin: 'top left'
    }">
    <template v-for="(papers, i) in items">
      <div
        v-if="i && pageBreak"
        :key="`break-before-${i}`"
        :style="{
          pageBreakBefore: `always`
        }">
      </div>
      <div
        :id="`printer-${i+1}`"
        :key="`page-${i}`"
        :style="{
          position: 'relative',
          display: 'flex',
          flexWrap: 'wrap',
          flex: '1 1 auto',
          alignContent: 'flex-start',
          height: '100%',
          width: '100%'
        }"
        class="printer-preview__page">
        <div
          v-for="(paper, j) in papers"
          :key="`page-${i}-paper-${j}`"
          :style="{
            position: 'relative',
            height: `${innerHeight}px`,
            width: `${innerWidth}px`,
          }"
          class="printer-preview__element">
          <template v-for="(element, k) in paper.el">
            <VNodeElement
              :key="`page-${i}-paper-${j}-element-${k}`"
              :element="element"
              :item="paper.data" />
          </template>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import VNodeElement from './components/VNodeElement.vue'

export default {
  components: { VNodeElement },
  props: {
    items: {
      type: Array,
      default: () => ([])
    },
    height: {
      type: Number,
      default: 0
    },
    width: {
      type: Number,
      default: 0
    },
    innerHeight: {
      type: Number,
      default: 0
    },
    innerWidth: {
      type: Number,
      default: 0
    },
    aspectRatio: {
      type: [Number],
      default: 1
    }
  },
  computed: {
    pageBreak () {
      return this.innerHeight < this.height
    }
  }
}
</script>

<style lang="scss" scoped>
  .printer-preview {
    &__page {
      background: #ffffff;
      margin-bottom: 24px;
    }
  }
</style>
