<template>
  <el-dialog
    title="文档"
    :model-value="visible && model === 'dialog'"
    :append-to-body="appendToBody"
    @update:model-value="visible = false"
  >
    <div v-if="visible" style="height: 690px; overflow-y: auto">
      <vue-office-pdf :src="fnSrc(props.src)" style="height: 100%" @error="error" @rendered="rendered" />
    </div>
    <template #footer>
      <el-button type="primary" @click="useDownloadFile(fnSrc(props.src))">
        下载
      </el-button>
    </template>
  </el-dialog>
  <div v-if="model === 'normal'" :key="src" style="height: 690px; overflow-y: auto">
    <vue-office-pdf :src="fnSrc(props.src)" style="height: 100%" @error="error" @rendered="rendered" />
  </div>
</template>

<script setup>
import VueOfficePdf from '@vue-office/pdf'
import { ElDialog, ElButton, ElMessage } from "element-plus";
import "element-plus/es/components/dialog/style/css";
import "element-plus/es/components/button/style/css";
import { getFileUrl } from "../../utils/index.js";
import useDownloadFile from "../../hooks/useDownloadFile/index.js";

const VITE_FILE_URL = getFileUrl();
defineOptions({
  name: "AppPdf",
});
const props = defineProps({
  src: { type: String, required: true },
  model: {
    type: String,
    validator: (value) => {
      const typeList = ["dialog", "normal"];
      if (typeList.includes(value)) {
        return true;
      } else {
        throw new Error(`model必须是${typeList.join("、")}之一`);
      }
    },
    default: "dialog",
  },
  appendToBody: { type: Boolean, default: false },
});
const visible = defineModel("visible", { type: Boolean, default: false });
const emits = defineEmits(['rendered', 'error']);
const fnSrc = (src) => {
  if (!src) return;
  if (src.indexOf("http") !== -1 || src.indexOf("https") !== -1) return src;
  else return VITE_FILE_URL + src;
};
const rendered = () => {
  emits('rendered');
}
const error = () => {
  visible.value = false;
  ElMessage.error("文件加载失败");
  emits('error');
}
</script>
