<script setup lang="ts">
import { computed } from "vue";

const visible = defineModel<boolean>({ required: true });

const props = defineProps<{
  docPreviewDialogImageUrl: string;
  docPreviewExcelHtml?: string;
  /** pdf 使用 iframe，图片使用 img，excel 使用 table HTML */
  previewKind?: "image" | "pdf" | "excel";
}>();

const kind = computed(() => props.previewKind || "image");
const dialogTitle = computed(() => {
  if (kind.value === "pdf") return "PDF 预览";
  if (kind.value === "excel") return "Excel 预览";
  return "图片预览";
});
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="80%"
    append-to-body
    destroy-on-close
  >
    <iframe
      v-if="docPreviewDialogImageUrl && kind === 'pdf'"
      :src="docPreviewDialogImageUrl"
      title="PDF 预览"
      class="doc-preview-pdf-frame"
    />
    <div v-else-if="kind === 'excel'" class="doc-preview-excel-container" v-html="docPreviewExcelHtml"></div>
    <div v-else-if="docPreviewDialogImageUrl" class="doc-preview-image-container">
      <img
        :src="docPreviewDialogImageUrl"
        alt="preview"
        class="doc-preview-image"
      />
    </div>
  </el-dialog>
</template>

<style scoped>
.doc-preview-pdf-frame {
  width: 100%;
  height: 75vh;
  border: none;
  display: block;
}
.doc-preview-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
}
.doc-preview-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
}
.doc-preview-excel-container {
  width: 100%;
  height: 75vh;
  overflow: auto;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.doc-preview-excel-container :deep(table) {
  border-collapse: collapse;
  width: 100%;
}
.doc-preview-excel-container :deep(th),
.doc-preview-excel-container :deep(td) {
  border: 1px solid #dcdfe6;
  padding: 8px;
  text-align: left;
}
</style>
