<script setup lang="ts">
import { ref, watch } from 'vue'
import UploadFileModal from '@/components/file/UploadFileModal.vue'
import { api } from '@/tools/web.js'
import type { UploadFileDto } from '@/types/user.js'
import { useNowUser } from '@/stores/now-user.js'
import { uploadFilesCom } from '@/components/file/upload-files.js'
import { useHead } from '@unhead/vue'

useHead({
  title: '上传',
})

const NOWUSER = useNowUser()

const showUploadModal = ref(false)

const files = ref<UploadFileDto[]>([])

function load() {
  api.get('/file/').then((res) => {
    files.value = res.data as UploadFileDto[]
  })
}

watch(
  () => NOWUSER.isLogin,
  () => {
    load()
  },
  { immediate: true },
)
</script>

<template>
  <n-card>
    <template #header>
      <n-h3 prefix="bar" style="margin: 0">上传文件</n-h3>
    </template>

    <n-flex vertical>
      <n-alert type="info"> 接受的文件类型： </n-alert>
      <n-button @click="showUploadModal = true">打开上传向导</n-button>

      <upload-file-modal
        v-model:show-modal="showUploadModal"
        :after-leave="
          () => {
            load()
          }
        "
      />
    </n-flex>
  </n-card>

  <n-card>
    <template #header>
      <n-h3 prefix="bar" style="margin: 0">个人文件库</n-h3>
    </template>
    <template #header-extra> 您已经上传的文件都在这里，可以选择性地删除以及重新下载。 </template>

    <component :is="uploadFilesCom(files)" />
  </n-card>
</template>

<style scoped></style>
