<template>
  <div class="main-body">
   
    <topheader title="合同预览"></topheader> 

    <div class="pdf-box" v-show="fileType === 'pdf'">
      <p class="arrow">
        <span @click="changePdfPage(0)"  :class="[currentPage==1?'grey':'','turn']">上一页</span>
        {{currentPage}} / {{pageCount}}
        <span @click="changePdfPage(1)"  :class="[currentPage==pageCount?'grey':'','turn']">下一页</span>
      </p>
       <!-- <p class="arrow">
        <van-button size="mini" round  @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">上一页</van-button>
        {{currentPage}} / {{pageCount}}
        <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">下一页</span>
      </p> -->
      <pdf
        :src="pdfSrc"
        :page="currentPage"
        @num-pages="pageCount=$event"
        @page-loaded="currentPage=$event"
        @loaded="loadPdfHandler"
      ></pdf>
      <!-- <pdf v-for="i in numPages" :key="i" :src="pdfSrc" :page="i"></pdf> -->
    </div>
     <div class="submit-wrapper">
          <!-- <div @click="onSubmit">提交</div> -->

          <van-button block  type="primary" @click="createContract" native-type="submit">生成合同</van-button>
        </div>
    <!-- <div class="download-link">
      <a href="https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf"> 
        <div>下载我的电子保单</div> 
        </a>
      </div> -->
  </div>
</template>

<script>
import pdf from "vue-pdf";
import Service from "../script/api/service";
import Topheader from "@/components/Topheader";
export default {
  metaInfo: {
    // title: "合同预览",
    meta: [
      {
        name: "viewport",
        content:
          "width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=3,user-scalable=yes"
      }
    ]
  },
  components: {
    Topheader,
    pdf
  },
  name: "pdfPreview",
  data() {
    return {
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      fileType: "pdf", // 文件类型
      pdfSrc:""
    };
  },
  computed: {},
  created() {
    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    // this.pdfSrc = pdf.createLoadingTask(this.pdfSrc);
     let pdfUrl=sessionStorage.getItem('pdfUrl');
     console.log(pdfUrl)
    this.pdfSrc = pdf.createLoadingTask(pdfUrl);
  },
  mounted() {
    // 　this.pdfSrc = pdf.createLoadingTask(this.pdfSrc);
    //   this.pdfSrc.then(pdf => {
    //   this.numPages = pdf.numPages
    // })
  },
  watch: {},
  beforeDestroy() {},
  methods: {
      createContract(){
        let contractInfo=JSON.parse(sessionStorage.getItem('contractInfo'));
       let contractParams=contractInfo;
       console.log(contractParams);
       Service.$axiosCreateContract(contractParams).then(res => {
 if (res.data.errno == "-1") {
          this.$toast(res.data.data);
        } else if (res.data.errno == "0") {
           this.$dialog
            .alert({
              message: "发送成功"
            })
            .then(() => {
              this.$router.replace('./bjdc');
            });
        }
        });
    
    },
   
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      // console.log(val)
      // console.log(this.currentPage);
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
        console.log(this.currentPage);
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
        console.log(this.currentPage);
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      console.log(e);
      this.currentPage = 1; // 加载的时候先加载第一页
      console.log(this.currentPage);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main-body {
  background: #f8f8f8;
  /* height: 100vh; */
  padding: 0.3rem;
  font-size: 0.24rem;
  color: #666;
}

.pdf-box {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 1024px;
  width: 100%;
  margin: 1.08rem auto 0;
  overflow-x: hidden;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.28rem;
}
.arrow {
  margin: 0 0 0.4rem;
}
.pdf-box span {
  width: 100%;
  margin: 0 0 0.4rem;
}
.download-link a{
  color: white;
  text-decoration: none;
}
.download-link {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(
    270deg,
    rgba(22, 169, 255, 1) 0%,
    rgba(26, 201, 255, 1) 100%
  );
  text-align: center;
}
.submit-wrapper {
  position: fixed;
  z-index:999;
  bottom:0.4rem;
  left:0.5rem;
  right:0.5rem;
}
.turn{
  color: #0EAEFC;
}
.arrow span.grey{
  color: #666;
}
</style>
