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

import { $t } from '@easyflow/locales';

import { ElButton, ElProgress, ElTable, ElTableColumn } from 'element-plus';

import { formatFileSize } from '#/api/common/file';
import DragFileUpload from '#/components/upload/DragFileUpload.vue';

interface FileInfo {
  uid: string;
  fileName: string;
  progressUpload: number;
  fileSize: number;
  status: string;
  filePath: string;
}
const fileData = ref<FileInfo[]>([]);
const filesPath = ref([]);
const dragUploadRef = ref<InstanceType<typeof DragFileUpload>>();
defineExpose({
  getFilesData() {
    return fileData.value.filter((item) => item.filePath);
  },
  reset() {
    fileData.value = [];
    filesPath.value = [];
    dragUploadRef.value?.clearFiles?.();
  },
});
function handleSuccess(response: any) {
  filesPath.value = response.data;
}
function handleChange(file: any) {
  const existingFile = fileData.value.find((item) => item.uid === file.uid);
  if (existingFile) {
    fileData.value = fileData.value.map((item) => {
      if (item.uid === file.uid) {
        return {
          ...item,
          fileSize: file.size,
          progressUpload: file.percentage,
          status: file.status,
          filePath: file?.response?.data?.path,
        };
      }
      return item;
    });
  } else {
    fileData.value.push({
      uid: file.uid,
      fileName: file.name,
      progressUpload: file.percentage,
      fileSize: file.size,
      status: file.status,
      filePath: file?.response?.data?.path,
    });
  }
}

function handleRemove(row: any) {
  fileData.value = fileData.value.filter((item) => item.uid !== row.uid);
}
</script>

<template>
  <div class="import-file-container">
    <DragFileUpload
      ref="dragUploadRef"
      @success="handleSuccess"
      @on-change="handleChange"
    />
    <div class="import-file-container__table">
      <ElTable :data="fileData" style="width: 100%" size="large">
        <ElTableColumn
          prop="fileName"
          :label="$t('documentCollection.importDoc.fileName')"
          width="250"
        />
        <ElTableColumn
          prop="progressUpload"
          :label="$t('documentCollection.importDoc.progressUpload')"
          width="180"
        >
          <template #default="{ row }">
            <ElProgress
              :percentage="row.progressUpload"
              v-if="row.status === 'success'"
              status="success"
            />
            <ElProgress v-else :percentage="row.progressUpload" />
          </template>
        </ElTableColumn>
        <ElTableColumn
          prop="fileSize"
          :label="$t('documentCollection.importDoc.fileSize')"
        >
          <template #default="{ row }">
            <span>{{ formatFileSize(row.fileSize) }}</span>
          </template>
        </ElTableColumn>
        <ElTableColumn :label="$t('common.handle')">
          <template #default="{ row }">
            <ElButton type="danger" size="small" @click="handleRemove(row)">
              {{ $t('button.delete') }}
            </ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
    </div>
  </div>
</template>

<style scoped>
.import-file-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.import-file-container__table {
  margin-top: 2px;
}
</style>
