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

// 组件属性定义
interface Props {
  files: string[] // 文件URL数组
  fileNames?: string[] // 文件名数组，可选
  size?: number // 卡片大小（默认50）
}

const props = withDefaults(defineProps<Props>(), {
  fileNames: () => [],
  size: 50,
})

// 图片文件扩展名
const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']

/**
 * 获取文件名
 * @param url 文件URL
 * @param index 文件索引
 * @returns 文件名
 */
function getFileName(url: string, index: number): string {
  if (props.fileNames && props.fileNames[index]) {
    return props.fileNames[index]
  }
  // 从URL中提取文件名
  const parts = url.split('/')
  return parts[parts.length - 1] || `file${index + 1}`
}

/**
 * 判断是否为图片文件
 * @param fileName 文件名
 * @returns 是否为图片
 */
function isImage(fileName: string): boolean {
  const extension = fileName.split('.').pop()?.toLowerCase()
  return extension ? imageExtensions.includes(extension) : false
}

/**
 * 获取文件扩展名
 * @param fileName 文件名
 * @returns 文件扩展名（大写）
 */
function getFileExtension(fileName: string): string {
  const extension = fileName.split('.').pop()?.toUpperCase()
  return extension || 'FILE'
}

/**
 * 处理文件下载
 * @param url 文件URL
 * @param fileName 文件名
 */
function handleFileDownload(url: string, fileName: string) {
  // #ifdef H5
  // H5平台使用a标签下载
  const link = document.createElement('a')
  link.href = url
  link.download = fileName
  link.target = '_blank'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  // #endif

  // #ifndef H5
  // 非H5平台使用uni.downloadFile
  uni.downloadFile({
    url,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({
              title: '下载成功',
              icon: 'success',
            })
          },
          fail: (err) => {
            console.error('保存文件失败:', err)
            uni.showToast({
              title: '保存文件失败',
              icon: 'error',
            })
          },
        })
      }
    },
    fail: (err) => {
      console.error('下载文件失败:', err)
      uni.showToast({
        title: '下载文件失败',
        icon: 'error',
      })
    },
  })
  // #endif
}
</script>

<template>
  <view class="attachment-list">
    <view
      v-for="(file, index) in files"
      :key="index"
      class="attachment-item"
      :style="{ width: `${size * 4}rpx`, height: `${size * 4}rpx` }"
    >
      <!-- 图片文件 -->
      <view v-if="isImage(getFileName(file, index))" class="image-container">
        <wd-img
          :width="size * 4"
          :height="size * 4"
          :src="file"
          :enable-preview="true"
        />
      </view>

      <!-- 其他文件 -->
      <view
        v-else
        class="file-container"
        @tap="handleFileDownload(file, getFileName(file, index))"
      >
        <view class="file-icon">
          <wd-icon name="document" size="64rpx" />
        </view>
        <view class="file-extension">
          {{ getFileExtension(getFileName(file, index)) }}
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.attachment-list {
  width: 100%;
  display: flex;
  overflow-x: auto;
  padding: 10rpx 0;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f5f5f5;

  &::-webkit-scrollbar {
    height: 6rpx;
  }

  &::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 3rpx;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3rpx;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}

.attachment-item {
  margin-right: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
  flex-shrink: 0;
  
  &:hover {
    transform: translateY(-4rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
  }
}

.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.file-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  cursor: pointer;
}

.file-icon {
  margin-bottom: 16rpx;
  color: #215acd;
}

.file-extension {
  font-size: 24rpx;
  font-weight: 500;
  color: #31373d;
  text-transform: uppercase;
}
</style>
