<template>
  <div v-if="file.length === 0 && name && url">
    {{ name }}
    <el-button type="primary" size="small" class="ml-5" @click="fnPreviewPdf(url)">
      预览
    </el-button>
  </div>
  <template v-if="file.length > 0 && !name && !url">
    <div v-for="(item, index) in file" :key="index" class="mt-5">
      {{ item.name || item.fileName || item[nameKey] }}
      <el-button type="primary" size="small" class="ml-10" @click="fnPreviewPdf(item.filePath || item[urlKey])">
        预览
      </el-button>
    </div>
  </template>
  <app-pdf v-model:visible="pdfDialog.visible" :src="pdfDialog.src" />
</template>

<script setup>
import { ref } from "vue";
import { ElButton } from "element-plus";
import "element-plus/es/components/button/style/css";
import AppPdf from "../pdf/index.vue";

defineOptions({
  name: "AppPreviewPdf",
});
defineProps({
  file: { type: Array, default: () => [] },
  nameKey: { type: String, default: "" },
  urlKey: { type: String, default: "" },
  name: { type: String, default: "" },
  url: { type: String, default: "" },
});
const pdfDialog = ref({
  visible: false,
  src: "",
});
const fnPreviewPdf = (src) => {
  pdfDialog.value.visible = true;
  pdfDialog.value.src = src;
};
</script>

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