SadmMontime/src/components/admin/BusinessImageUpload.vue

<template>
  <div class="space-y-3">
    <label class="block text-sm font-medium text-muted">تصاویر کسب‌وکار</label>
    <p class="text-xs text-muted">حداکثر ۱۰ تصویر — هر کدام تا ۵ مگابایت (JPG, PNG, WebP)</p>

    <div v-if="existing.length" class="grid grid-cols-3 gap-2">
      <div
        v-for="img in existing"
        :key="img.id"
        class="relative aspect-square overflow-hidden rounded-xl border border-border bg-surface-3"
      >
        <img :src="uploadUrl(img.url)" :alt="img.originalName ?? ''" class="h-full w-full object-cover" />
        <span
          v-if="img.isCover"
          class="absolute left-1 top-1 rounded bg-brand-600/90 px-1.5 py-0.5 text-[10px] text-white"
        >
          کاور
        </span>
        <button
          type="button"
          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
          :disabled="deletingId === img.id"
          @click="emit('remove-existing', img.id)"
        >
          حذف
        </button>
      </div>
    </div>

    <div v-if="pendingPreviews.length" class="grid grid-cols-3 gap-2">
      <div
        v-for="(src, idx) in pendingPreviews"
        :key="idx"
        class="relative aspect-square overflow-hidden rounded-xl border border-dashed border-brand-500/50"
      >
        <img :src="src" alt="" class="h-full w-full object-cover" />
        <button
          type="button"
          class="absolute bottom-1 left-1 right-1 rounded-lg bg-black/60 py-1 text-xs text-white"
          @click="removePending(idx)"
        >
          حذف
        </button>
      </div>
    </div>

    <label
      class="flex cursor-pointer flex-col items-center justify-center rounded-xl border border-dashed border-border bg-surface-3 px-4 py-6 text-sm text-muted transition hover:border-brand-500/50 hover:bg-brand-500/5"
    >
      <span class="text-2xl">📷</span>
      <span class="mt-2">افزودن تصویر</span>
      <input
        type="file"
        accept="image/jpeg,image/png,image/webp,image/gif"
        multiple
        class="hidden"
        @change="onPick"
      />
    </label>
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from 'vue';
import type { BusinessImage } from '@/api/types';
import { uploadUrl } from '@/utils/media';

const props = defineProps<{
  existing: BusinessImage[];
  deletingId?: string | null;
}>();

const emit = defineEmits<{
  'remove-existing': [imageId: string];
  'pending-change': [files: File[]];
}>();

const pendingFiles = ref<File[]>([]);
const pendingPreviews = ref<string[]>([]);

function revokeAll() {
  for (const url of pendingPreviews.value) {
    URL.revokeObjectURL(url);
  }
}

function syncPending() {
  emit('pending-change', [...pendingFiles.value]);
}

function onPick(e: Event) {
  const input = e.target as HTMLInputElement;
  const picked = Array.from(input.files ?? []);
  input.value = '';
  if (!picked.length) return;

  const total = props.existing.length + pendingFiles.value.length + picked.length;
  if (total > 10) {
    alert('حداکثر ۱۰ تصویر مجاز است.');
    return;
  }

  for (const file of picked) {
    pendingFiles.value.push(file);
    pendingPreviews.value.push(URL.createObjectURL(file));
  }
  syncPending();
}

function removePending(index: number) {
  URL.revokeObjectURL(pendingPreviews.value[index]);
  pendingFiles.value.splice(index, 1);
  pendingPreviews.value.splice(index, 1);
  syncPending();
}

watch(
  () => props.existing.length,
  () => syncPending(),
);

onBeforeUnmount(revokeAll);

defineExpose({
  clearPending() {
    revokeAll();
    pendingFiles.value = [];
    pendingPreviews.value = [];
    syncPending();
  },
  getPendingFiles: () => [...pendingFiles.value],
});
</script>