<template>
  <el-button
    v-if="contentType === 'button'"
    :type="btnType"
    :link="isLink"
    icon="el-icon-view"
    @click="showPdf"
  >
    {{ btnText }}
  </el-button>
  <VuePdfEmbed
    v-else
    :source="pdfSource"
    :page="pageNumber"
    annotation-layer
    text-layer
    @click="showPdf"
  />
  <el-drawer
    v-if="needToShowPdf"
    v-model="visible"
    :footer="false"
    :header="false"
    :show-close="false"
    destroy-on-close
    direction="rtl"
    :append-to-body="true"
    size="972px"
  >
    <VuePdfEmbed
      :source="{
        url: pdfSource,
        cMapUrl: '/cmaps/',
        cMapPacked: true,
      }"
      :page="showPdfNumber"
      annotation-layer
      text-layer
    />
  </el-drawer>
</template>

<script lang="ts" setup>
import VuePdfEmbed from "vue-pdf-embed";
// essential styles
import "vue-pdf-embed/dist/style/index.css";

// optional styles
import "vue-pdf-embed/dist/style/annotationLayer.css";
import "vue-pdf-embed/dist/style/textLayer.css";

// either URL, Base64, binary, or document proxy
const props = defineProps({
  pdfSource: {
    type: String,
    required: true,
  },
  pageNumber: {
    type: Number,
    default: 0,
  },
  needToShowPdf: {
    type: Boolean,
    default: false,
  },
  contentType: {
    type: String as PropType<"button" | "pdf">,
    default: "pdf",
  },
  btnText: {
    type: String,
    default: "预览",
  },
  btnType: {
    type: String,
    default: "primary",
  },
  isLink: {
    type: Boolean,
    default: false,
  },
  showPdfNumber: {
    type: Number,
    default: 0,
  },
});

const visible = ref(false);

const showPdf = () => {
  visible.value = true;
};
</script>

<style lang="scss" scoped></style>
