<template>
  <div class="container">
    <NavBar title="支付协议" left-arrow @click-left="goBack"/>

    <div class="content">
      <VuePdfEmbed ref="pdfRef" :source="pdfSource" :page="page" @rendered="handleDocumentRender"></VuePdfEmbed>
    </div>
  </div>
</template>

<script setup>
  import { goBack } from "@/utils/globalFun"
  import { NavBar, Toast } from "vant";
  import VuePdfEmbed from 'vue-pdf-embed'
  import { watchEffect } from 'vue'
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute();
  const router = useRouter();
  let isLoading = $ref(true)
  const page = $ref(null)
  const pdfRef = $ref('')
  let pageCount = $ref(1)
  let pdfSource = $ref('https://kflc.komatsu-fl.com.cn/appFile/agreement/kflc-payment-protocol.pdf')

  watchEffect(() => {
    if (isLoading) {
      Toast.loading({ message: '加载中...', forbidClick: true, overlay: true, duration: 0 });
    } else {
      Toast.clear()
    }
  })

  const handleDocumentRender = (args) => {
    isLoading = false
    pageCount = pdfRef.pageCount
  }
</script>

<style lang="less" scoped>
  .content {
    height: calc(100% - var(--van-nav-bar-height));
    overflow-y: auto;
  }

  .vue-pdf-embed {}
</style>
<route>
  {
  meta: {
  title: '支付协议'
  }
  }
</route>