<script lang="ts" setup>
import UploadFileSection from 'src/components/upload-file/UploadFileSection.vue';

defineProps<{
  readonly?: boolean;
  transformUrl?: (url: string) => string | Promise<string>;
}>();

const emit = defineEmits<{
  (e: 'fetchFileList'): void;
  (e: 'upload', file: FileList): void;
  (e: 'remove', name: string): void;
}>();

const fileData = defineModel<
  {
    name: string;
    progress: number;
    loaded: number;
    total: number;
    url?: string;
    placeholder?: boolean;
  }[]
>('fileData', { default: [] });
</script>
<template>
  <q-expansion-item
    id="expansion-additional-file"
    dense
    class="overflow-hidden bordered full-width"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1 q-py-sm text-medium text-body1"
    @after-show="() => $emit('fetchFileList')"
  >
    <template #header>
      <span>
        {{ $t('quotation.additionalFile') }}
      </span>
    </template>

    <main class="q-px-md q-py-sm surface-1">
      <UploadFileSection
        id="upload-additional-file"
        multiple
        :layout="$q.screen.gt.sm ? 'column' : 'row'"
        :readonly
        :label="$t('general.upload', { msg: $t('general.attachment') })"
        :transform-url="transformUrl"
        v-model:file-data="fileData"
        @update:file="(f) => $emit('upload', f as unknown as FileList)"
        @close="(v) => $emit('remove', v)"
      />
    </main>
  </q-expansion-item>
</template>
<style scoped></style>
