<template>
  <div id="pdfDetail" class="app">
    <van-sticky :offset-top="0" v-if="$pageParams">
      <van-nav-bar
        left-arrow
        @click-left="onClickLeft"
        :title="$pageParams.name"
      />
    </van-sticky>
    <pdf
      v-for="i in numPages"
      :key="i"
      :src="pdfLink"
      :page="i"
      style="width: 100%"
    ></pdf>
  </div>
</template>

<script>
import pdf from "vue-pdf";
import { currentUrlToParams } from "@/utils/common.js";

import { NavBar as vanNavBar, Sticky as vanSticky } from "vant";
import "vant/lib/sticky/style";
import "vant/lib/nav-bar/style";
const vuePdf = pdf.createLoadingTask(
  "https://zhihui-dangjian.oss-cn-chengdu.aliyuncs.com/pdf/%E4%B8%AD%E5%8D%8E%E9%AD%82%E6%99%BA%E6%85%A7%E5%85%9A%E5%BB%BA%E5%B9%B3%E5%8F%B0.pdf"
);
export default {
  name: "app",
  data: function() {
    return {
      loadingPdf: true,
      pdfLink: vuePdf,
      numPages: undefined,
      user: {}
    };
  },
  methods: {
    onClickLeft() {
      history.go(-1);
    }
  },
  mounted() {
    this.$pageParams = currentUrlToParams();
    console.log(this.$pageParams.name);
    this.pdfLink.promise.then(p => {
      console.log(p);
      this.loadingPdf = false;
      this.numPages = p.numPages;
    });
  },
  beforeDestroy: function() {},
  components: {
    pdf,
    vanNavBar,
    vanSticky
  }
};
</script>
<style lang="scss">
.app {
}
</style>
