<script lang="ts" setup>
import { ref, watch } from 'vue'
import FileList from './FileList.vue'
import { previewProps } from './props'
import type { PreviewFileItem } from './typing'
import { createPreviewActionColumn, createPreviewColumns } from './data'
import { downloadByUrl } from '@/utils/file/download'
import { BasicModal, useModalInner } from '@/components/Modal'
import { useI18n } from '@/hooks/web/useI18n'
import { isArray } from '@/utils/is'

const props = defineProps(previewProps)
const emit = defineEmits(['list-change', 'register', 'delete'])

const [register] = useModalInner()
const { t } = useI18n()

const columns = createPreviewColumns() as any[]
const actionColumn = createPreviewActionColumn({ handleRemove, handleDownload }) as any

const fileListRef = ref<PreviewFileItem[]>([])
watch(
  () => props.value,
  (value) => {
    if (!isArray(value))
      value = []
    fileListRef.value = value
      .filter(item => !!item)
      .map((item) => {
        return {
          url: item,
          type: item.split('.').pop() || '',
          name: item.split('/').pop() || '',
        }
      })
  },
  { immediate: true },
)

// 删除
function handleRemove(record: PreviewFileItem) {
  const index = fileListRef.value.findIndex(item => item.url === record.url)
  if (index !== -1) {
    const removed = fileListRef.value.splice(index, 1)
    emit('delete', removed[0].url)
    emit('list-change', fileListRef.value.map(item => item.url))
  }
}

// 下载
function handleDownload(record: PreviewFileItem) {
  const { url = '' } = record
  downloadByUrl({ url })
}
</script>

<template>
  <BasicModal
    width="800px"
    :title="t('component.upload.preview')"
    class="upload-preview-modal"
    v-bind="$attrs"
    :show-ok-btn="false"
    @register="register"
  >
    <FileList :data-source="fileListRef" :columns="columns" :action-column="actionColumn" />
  </BasicModal>
</template>

<style lang="less">
.upload-preview-modal {
  .ant-upload-list {
    display: none;
  }

  .ant-table-wrapper .ant-spin-nested-loading {
    padding: 0;
  }
}
</style>
