<template>
  <modal-template size="xl" :is-footer-hide="true">
    <div slot="title" ref="title">
      {{ title }}
    </div>
    <div slot="body">
      <div v-if="pdfLink === ''" class="vh-75 d-flex justify-content-center align-items-center">
        <icon name="spinner" pulse class="px-3 text-center text-light icon-size-5 py-3" />
      </div>
      <embed v-else class="vh-75 w-100" :src="pdfUrl" />
    </div>
  </modal-template>
</template>

<script>
import modalTemplate from '@/elements/common/components/modalTemplate'
import { mapActions } from 'vuex'
export default {
  name: 'PdfViewerModal',
  components: { modalTemplate },
  props: {
    title: { type: String, required: true },
    pdfLink: { type: String, default: '' },
  },
  methods: {
    ...mapActions(['isMobile']),
    show() {
      this.isMobile().then(mobile => {
        if (mobile) {
          window.open(this.pdfLink, '_blank')
        } else {
          this.$bvModal.show('modal')
        }
      })
    },
  },
  computed: {
    pdfUrl() {
      return this.pdfLink + `?hash=${(+new Date()).toString(36)}`
    },
  },
}
</script>

<style scoped></style>
