<script setup lang="ts">
import { useMessage } from 'naive-ui'
import { computed, ref, watch } from 'vue'

import { selectFilesCom } from '@/components/file/upload-files.js'
import type { UploadFileDto } from '@/types/user.js'

const MESSAGE = useMessage()

const { max, extensions, loadFiles } = defineProps<{
  max: number
  extensions: string[]
  loadFiles: () => Promise<UploadFileDto[]>
}>()

const showModal = defineModel('showModal', { required: true })

const files = ref<UploadFileDto[]>([])
const tempFiles = ref<UploadFileDto[]>([])
const selectFiles = defineModel<UploadFileDto[]>('selectFiles', { required: true })

function selectFile(file: UploadFileDto) {
  if (tempFiles.value.length < max) {
    tempFiles.value.push(file)
    return true
  } else {
    MESSAGE.warning('可选择文件数量达到上限……')
    return false
  }
}

function removeFile(file: UploadFileDto) {
  const i = tempFiles.value.findIndex((item) => item.id === file.id)
  if (i >= 0) {
    tempFiles.value.splice(i, 1)
  }
  return true
}

watch(showModal, async () => {
  tempFiles.value = [] // 每次打开模态框时都重置已选文件
  files.value = await loadFiles()
})

const tip_1 = computed(() => (max > 1 ? `请选择至少 ${max} 个文件。` : '请选择一个文件。'))
const tip_2 = computed(() => `允许的文件类型：${extensions.join('、')}。`)
</script>

<template>
  <n-modal
    preset="card"
    style="max-width: 600px; max-height: 600px"
    title="选择文件"
    content-scrollable
    v-model:show="showModal"
  >
    <n-flex vertical>
      <n-alert type="info">
        {{ tip_1 }}
        {{ tip_2 }}
      </n-alert>
      <component :is="selectFilesCom(files, selectFile, removeFile)" />
      <n-button
        type="primary"
        secondary
        @click="
          () => {
            selectFiles = tempFiles
            showModal = false
          }
        "
      >
        确认选择
      </n-button>
    </n-flex>
  </n-modal>
</template>

<style scoped></style>
