<template>
  <div>
    <div>
      switch url

      <button @click="handleSwitchUrl('test1')">switch url 1</button>
      <button @click="handleSwitchUrl('test2')">switch url 2</button>
      <button @click="handleSwitchUrl('base64')">switch base64</button>
    </div>
    <div style="height: calc(100vh -  30px); width: 80%; margin: 0 auto">
      <PDFViewer :source="pdfSource" @download="handleDownload" />
    </div>
  </div>
</template>

<script>
import PDFViewer from '../src/index.js'

const TEST_URL_MAP = {
  test1:
    'https://raw.githubusercontent.com/DingRui12138/vue-pdf-viewer/master/demo/static/pdf/helloworld.pdf',
  test2:
    'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf',
  base64: `data:application/octet-stream;base64,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`,
}

export default {
  components: {
    PDFViewer,
  },
  data() {
    return {
      pdfSource: TEST_URL_MAP.test1,
    }
  },
  methods: {
    handleSwitchUrl(key) {
      this.pdfSource = TEST_URL_MAP[key]
    },
    handleDownload(source) {
      alert(`custom download file: ${source}`)
    },
  },
}
</script>

<style lang="scss">
body {
  padding: 0;
  margin: 0;
  // background-color: #ccc;
}

// canvas {
//   display: block;
//   margin: auto;
//   max-width: 800px;
//   box-shadow: 0 2px 8px 4px rgba(0, 0, 0, 0.1);
// }
</style>
