<template>
  <div class="container">
    <pdf v-for="(item, index) in pdfNumPages" :key="index" :src="pdfUrl" :page="index + 1" />
  </div>
</template>

<script>
import pdf from "vue-pdf";
import config from "@/config";
import { mapActions } from "vuex";
let CMAP_URL = "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/";

export default {
  name: "PolicyVirtualDetail",
  components: {
    pdf
  },
  data() {
    return {
      url: "",
      pdfUrl: "",
      pdfNumPages: null
    };
  },
  mounted() {
    this.setDetail();
  },
  methods: {
    ...mapActions(["setIsLoading"]),
    setDetail() {
      let { url } = this.$route.query;
      if (!url?.startsWith("http")) url = `${config.basicHost}${url}`;
      this.setIsLoading(true);
      if (!url) this.$router.back();
      this.url = url;
      this.pdfTask();
    },
    pdfTask() {
      this.pdfUrl = pdf.createLoadingTask({ url: this.url, cMapUrl: CMAP_URL, cMapPacked: true });
      this.pdfUrl.promise
        .then(pdf => {
          this.pdfNumPages = pdf.numPages;
          this.setIsLoading(false);
        })
        .catch(err => {
          console.error(err);
        });
    }
  }
};
</script>
<style lang="less" scoped></style>
