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

import { useNowUser } from '@/stores/now-user.js'
import type { UploadFileDto } from '@/types/user.js'

const NOWUSER = useNowUser()

const { file } = defineProps<{
  file: UploadFileDto
}>()

const is_you = computed(() => NOWUSER.id === file.uploader_id)

const showModal = defineModel('showModal', { required: true })
</script>

<template>
  <n-modal v-model:show="showModal" preset="card" style="width: 1000px" title="文件信息">
    <div class="card-content">
      <n-image :width="500" :height="500" object-fit="contain" :src="file.download_url" />
      <div class="side">
        <n-h3>{{ file.original_name }}</n-h3>
        <n-p>保存文件名：{{ file.safe_name }}</n-p>
        <n-p
          >上传用户ID：{{ file.uploader_id }}
          <n-tag v-if="is_you" type="primary">你</n-tag>
        </n-p>

        <n-flex>
          <a :href="file.download_url" target="_blank">
            <n-button tertiary type="info">永久链接</n-button>
          </a>
          <n-button tertiary type="error" v-if="is_you">删除文件</n-button>
        </n-flex>
      </div>
    </div>
  </n-modal>
</template>

<style scoped lang="scss">
div.card-content {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
</style>
