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

import { useVbenDrawer } from '@vben/common-ui';

import { Button, Descriptions, Image, Spin } from 'ant-design-vue';

import MIcon from '#/components/icon/icon.vue';
import { XgVideoPlayer } from '#/components/video-player';
import type { FileGalleryDetail } from '#/api/core/file-gallery';
import { getFileGalleryDetail } from '#/api/core/file-gallery';

defineOptions({ name: 'FileDetailDrawer' });

const loading = ref(false);
const detail = ref<FileGalleryDetail | null>(null);

const [Drawer, drawerApi] = useVbenDrawer({
  class: 'w-[520px]',
  showConfirmButton: false,
  showCancelButton: false,
  destroyOnClose: true,
  onOpenChange(isOpen) {
    if (isOpen) {
      void loadDetail();
    } else {
      detail.value = null;
    }
  },
});

function downloadFile() {
  if (!detail.value?.url) {
    return;
  }

  const link = document.createElement('a');
  link.href = detail.value.url;
  link.download =
    detail.value.file_name || detail.value.original_name || 'file';
  link.target = '_blank';
  link.rel = 'noopener noreferrer';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

async function loadDetail() {
  const data = drawerApi.getData<{ id?: number }>();
  if (!data?.id) {
    return;
  }

  loading.value = true;
  try {
    const res = await getFileGalleryDetail(data.id);
    detail.value = ((res as any)?.data ?? res) as FileGalleryDetail;
  } finally {
    loading.value = false;
  }
}

defineExpose({
  drawerApi,
});
</script>

<template>
  <Drawer title="文件详情">
    <Spin :spinning="loading">
      <template v-if="detail">
        <div class="preview-wrap">
          <Image v-if="detail.type === 0" :src="detail.url" :width="220" />
          <XgVideoPlayer
            v-else-if="detail.type === 1"
            :src="detail.url"
            class="media-player"
          />
          <audio
            v-else-if="detail.type === 2"
            class="media-player audio"
            controls
            :src="detail.url"
          />
          <div v-else-if="detail.type === 5" class="fallback-preview">
            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
            <Button type="primary" @click="downloadFile">下载 PDF</Button>
          </div>
          <div v-else class="fallback-preview">
            <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="48" />
            <a :href="detail.url" target="_blank" rel="noopener noreferrer">下载/打开文件</a>
          </div>
        </div>
        <Descriptions bordered :column="1" size="small" class="mt-4">
          <Descriptions.Item label="文件名">{{ detail.file_name || '-' }}</Descriptions.Item>
          <Descriptions.Item label="分类">
            <span class="type-row">
              <MIcon v-if="detail.type_icon" :icon="detail.type_icon" size="14" />
              {{ detail.type_text || '-' }}
            </span>
          </Descriptions.Item>
          <Descriptions.Item label="大小">{{ detail.file_size_text || '-' }}</Descriptions.Item>
          <Descriptions.Item label="来源">{{ detail.source_text || detail.source }}</Descriptions.Item>
          <Descriptions.Item label="上传时间">{{ detail.created_at || '-' }}</Descriptions.Item>
          <Descriptions.Item label="原始名">{{ detail.original_name || '-' }}</Descriptions.Item>
          <Descriptions.Item label="OSS路径">{{ detail.object_key || '-' }}</Descriptions.Item>
          <Descriptions.Item label="访问地址">
            <a :href="detail.url" target="_blank" rel="noopener noreferrer">{{ detail.url }}</a>
          </Descriptions.Item>
        </Descriptions>
      </template>
    </Spin>
  </Drawer>
</template>

<style scoped lang="scss">
.preview-wrap {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}

.media-player {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  background: #000;
}

.media-player.audio {
  height: 48px;
  background: transparent;
}

.fallback-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
}

.type-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
</style>
