<template>
  <view class="pdf-container">
    <web-view class="webview" :src="pdfState.pdfUrl"></web-view>
    <view class="down" @tap="downLoadPdf">
      <u-image
        src="../../static/img/download.png"
        width="50"
        height="50"
      ></u-image>
      <view style="margin-left: 10rpx">点击下载</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { zconfirm } from "@/utils/util";

const pdfState = reactive({
  title: "",
  pdfUrl: "",
  viewerUrl: "/static/pdf/web/viewer.html",
  url: "",
});

const downLoadPdf = () => {
  zconfirm("确定下载课程资料？", (result: boolean) => {
    if (result) {
      const a = document.createElement("a");
      a.href = pdfState.url;
      a.download = pdfState.title;
      a.click();
    }
  });
};

onLoad((options: any) => {
  pdfState.title = options.name;
  pdfState.url = options.url;
  pdfState.pdfUrl =
    pdfState.viewerUrl + "?file=" + encodeURIComponent(options.url);
});

onReady(() => {
  uni.setNavigationBarTitle({
    title: pdfState.title,
  });
});

onBackPress(() => {
  uni.$emit("refresh", { refresh: true });
});
</script>

<style lang="scss" scoped>
.pdf-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  .webview {
    height: 90%;
  }

  .down {
    position: absolute;
    bottom: 15%;
    z-index: 999;
    right: 0;
    background-color: #ffffff;
    padding: 10rpx;
    display: flex;
    align-items: center;
    border-radius: 10rpx 0 0 10rpx;
    color: #04a7ff;
  }
}
</style>
