<template>
  <div v-bind:style="styleObject">
  </div>
</template>

<script>
  import { isUndefined } from 'lodash';
  export default {
    mounted: function () {
      if (isUndefined(window.PDFObject)) {
        console.error('VuePDFViewer Error: PDFObject not found. ' +
          'Get it here: https://pdfobject.com, please include js file.');
        return;
      }
      if (isUndefined(this.url)) {
        console.error('VuePDFViewer Error: no file url provided');
        return;
      }
      PDFObject.embed(this.url, this.$el);
    },
    props: [ 'height', 'url' ],
    data: function () {
      var vm = this;
      var h = '400px';
      if (!vm.height) {
        console.warn('Please specify viewer height, e.g. height="500px"');
      }
      else {
        h = vm.height;
      }
      return {
        styleObject: {
          height: h
        }
      }
    },
    watch: {
      url: function (val) {
        var vm = this;
        PDFObject.embed(val, vm.$el);
      }
    }
  }
</script>

<style>
  .pdfobject-container {
    width: 100%;
    margin: 1em 0;
  }
  .pdfobject {
    border: 1px solid #666;
  }
</style>
