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

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

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

const kind = computed(() => props.previewKind || "image");
const dialogTitle = computed(() => (kind.value === "pdf" ? "PDF 预览" : "图片预览"));
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="60%"
    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="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;
}
</style>
