<script setup lang="ts">
import { Check, Delete, Document, ZoomIn } from "@element-plus/icons-vue";
import type { UploadUserFile } from "element-plus";

defineProps<{
  file: UploadUserFile;
  disabled?: boolean;
}>();

const emit = defineEmits<{
  openPreview: [file: UploadUserFile];
  removeFile: [file: UploadUserFile];
}>();

const isPdfMaterialFile = (f: UploadUserFile) => {
  const n = String(f.name || "").toLowerCase();
  const mime = String((f.raw as File | undefined)?.type || "").toLowerCase();
  return n.endsWith(".pdf") || mime === "application/pdf";
};

const IMAGE_EXT = new Set([".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp"]);

const getExtFromText = (value: string) => {
  const text = String(value || "").toLowerCase();
  const clean = text.split("?")[0].split("#")[0];
  const i = clean.lastIndexOf(".");
  return i >= 0 ? clean.slice(i) : "";
};

const isImageMaterialFile = (f: UploadUserFile) => {
  if (isPdfMaterialFile(f)) {
    return false;
  }
  const mime = String((f.raw as File | undefined)?.type || "").toLowerCase();
  if (mime.startsWith("image/")) {
    return true;
  }
  const nameExt = getExtFromText(String(f.name || ""));
  if (IMAGE_EXT.has(nameExt)) {
    return true;
  }
  const ossKeyExt = getExtFromText(String((f as UploadUserFile & { ossKey?: string }).ossKey || ""));
  if (IMAGE_EXT.has(ossKeyExt)) {
    return true;
  }
  const urlExt = getExtFromText(String(f.url || ""));
  return IMAGE_EXT.has(urlExt);
};
</script>

<template>
  <template v-if="file.status === 'uploading'">
    <el-progress type="circle" :width="70" :stroke-width="6" :percentage="Number(file.percentage ?? 0)" />
  </template>
  <template v-else>
    <img
      v-if="isImageMaterialFile(file) && file.url"
      class="el-upload-list__item-thumbnail"
      :src="file.url"
      alt=""
    />
    <div
      v-else
      class="material-picture-card-doc"
      :class="{ 'material-picture-card-doc--clickable': !disabled }"
      @click="!disabled && emit('openPreview', file)"
    >
      <el-icon class="material-picture-card-doc__icon"><Document /></el-icon>
      <span class="material-picture-card-doc__name" :title="file.name">{{ file.name }}</span>
    </div>
    <label class="el-upload-list__item-status-label">
      <el-icon><Check /></el-icon>
    </label>
    <span v-if="!disabled" class="el-upload-list__item-actions">
      <span
        class="el-upload-list__item-preview"
        @click="emit('openPreview', file)"
      >
        <el-icon><ZoomIn /></el-icon>
      </span>
      <span class="el-upload-list__item-delete" @click="emit('removeFile', file)">
        <el-icon><Delete /></el-icon>
      </span>
    </span>
  </template>
</template>

<style scoped>
.material-picture-card-doc {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  box-sizing: border-box;
  background: var(--el-fill-color-light);
}
.material-picture-card-doc--clickable {
  cursor: pointer;
}
.material-picture-card-doc__icon {
  font-size: 32px;
  color: var(--el-text-color-secondary);
}
.material-picture-card-doc__name {
  font-size: 12px;
  line-height: 1.35;
  color: var(--el-text-color-regular);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}
</style>
