<template>
  <view class="basic-file-preview">
    <view class="section-title">附件</view>
    <view class="file-list" v-if="hasAttachments">
      <!-- 显示所有解析后的附件 -->
      <view
          v-for="(file, index) in parsedAttachments"
          :key="(file as any).id || index"
          class="file-item"
      >
        <view class="file-icon">
          <image
              :src="getFileIcon(getFileSuffix(file))"
              class="icon-image"
              mode="aspectFit"
          />
        </view>
        <view class="file-info">
          <text class="file-name">{{ getFileName(file) }}</text>
        </view>
        <view class="file-actions">
          <u-button
              v-if="canPreview(getFileSuffix(file)) && !isVideo(getFileSuffix(file))"
              text="预览"
              size="mini"
              type="primary"
              @click="previewFile(file)"
          />
          <u-button
              v-if="isVideo(getFileSuffix(file))"
              text="播放"
              size="mini"
              type="success"
              @click="previewFile(file)"
          />
          <u-button
              v-if="isImage(getFileSuffix(file))"
              text="查看"
              size="mini"
              type="warning"
              @click="previewFile(file)"
          />
          <u-button
              text="下载"
              size="mini"
              type="info"
              @click="downloadFileAction(file)"
          />
        </view>
      </view>
    </view>
    <view v-else class="no-files">
      <text>暂无附件</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { 
  isVideo,
  isImage,
  canPreview,
  previewFile as previewFileUtil,
  previewVideo as previewVideoUtil,
  previewImage as previewImageUtil,
  downloadFile as downloadFileUtil
} from "@/utils/filePreview";
import { imagUrl } from "@/utils";

// 定义组件属性
interface Props {
  fileUrl?: string;
  fileName?: string;
  fileFormat?: string;
  files?: FileInfo[];
}

interface FileInfo {
  id?: string;
  name: string;
  size: number;
  url: string;
  resourName?: string;
  resourUrl?: string;
  resSuf?: string;
}

// 定义默认属性值
const props = withDefaults(defineProps<Props>(), {
  fileUrl: '',
  fileName: '',
  fileFormat: '',
  files: () => []
});

// 定义事件
const emit = defineEmits<{
  (e: 'preview', file: FileInfo): void;
  (e: 'download', file: FileInfo): void;
}>();

// 检查是否有附件
const hasAttachments = computed(() => {
  const attachments = [];
  
  // 处理files数组
  if (props.files && props.files.length > 0) {
    attachments.push(...props.files);
  }
  // 处理逗号分隔的fileUrl字符串
  else if (props.fileUrl) {
    const fileUrls = props.fileUrl.split(',').map(url => url.trim()).filter(url => url);
    
    // 解析fileName字符串（如果存在）
    let fileNames: string[] = [];
    if (props.fileName) {
      fileNames = props.fileName.split(',').map(name => name.trim()).filter(name => name);
    }
    
    // 将URL字符串转换为文件对象
    fileUrls.forEach((url, index) => {
      // 优先使用解析出的文件名，如果没有则从URL提取
      let displayName = fileNames[index] || url.split('/').pop() || `文件${index + 1}`;
      const fileFormat = url.split('.').pop() || 'unknown';
      
      // 如果文件名包含扩展名，去掉扩展名（保持resourName不包含扩展名）
      let resourName = displayName;
      if (displayName.includes('.' + fileFormat)) {
        resourName = displayName.replace('.' + fileFormat, '');
      }
      
      attachments.push({
        id: `file_${index}`,
        name: displayName,
        url: url,
        resourUrl: url,
        resourName: resourName,
        resSuf: fileFormat,
        size: 0
      });
    });
  }
  
  return attachments.length > 0;
});

// 计算属性：解析后的附件列表
const parsedAttachments = computed(() => {
  const attachments = [];
  // 处理files数组
  if (props.files && props.files.length > 0) {
    attachments.push(...props.files);
  }
  // 处理逗号分隔的fileUrl字符串
  else if (props.fileUrl) {
    const fileUrls = props.fileUrl.split(',').map(url => url.trim()).filter(url => url);
    
    // 解析fileName字符串（如果存在）
    let fileNames: string[] = [];
    if (props.fileName) {
      fileNames = props.fileName.split(',').map(name => name.trim()).filter(name => name);
    }
    
    // 将URL字符串转换为文件对象
    fileUrls.forEach((url, index) => {
      // 优先使用解析出的文件名，如果没有则从URL提取
      let displayName = fileNames[index] || url.split('/').pop() || `文件${index + 1}`;
      const fileFormat = url.split('.').pop() || 'unknown';
      
      // 如果文件名包含扩展名，去掉扩展名（保持resourName不包含扩展名）
      let resourName = displayName;
      if (displayName.includes('.' + fileFormat)) {
        resourName = displayName.replace('.' + fileFormat, '');
      }
      
      attachments.push({
        id: `file_${index}`,
        name: displayName,
        url: url,
        resourUrl: url,
        resourName: resourName,
        resSuf: fileFormat,
        size: 0
      });
    });
    
    console.log('parsedAttachments', fileNames, fileUrls);
  }
  
  return attachments;
});

// 获取文件名
const getFileName = (file: FileInfo) => {
  if (file.resourName) {
    return file.resourName;
  }
  if (file.name) {
    // 如果name包含扩展名，去掉扩展名
    const lastDotIndex = file.name.lastIndexOf('.');
    if (lastDotIndex > 0) {
      return file.name.substring(0, lastDotIndex);
    }
    return file.name;
  }
  return '未知文件';
};

// 获取文件后缀
const getFileSuffix = (file: FileInfo) => {
  if (file.resSuf) {
    return file.resSuf;
  }
  if (file.url) {
    const lastDotIndex = file.url.lastIndexOf('.');
    if (lastDotIndex > 0) {
      return file.url.substring(lastDotIndex + 1);
    }
  }
  if (file.name) {
    const lastDotIndex = file.name.lastIndexOf('.');
    if (lastDotIndex > 0) {
      return file.name.substring(lastDotIndex + 1);
    }
  }
  return 'unknown';
};

// 获取文件图标
const getFileIcon = (fileType: string) => {
  const type = fileType.toLowerCase();
  switch (type) {
    case 'pdf':
      return '/static/base/view/pdf.png';
    case 'doc':
    case 'docx':
      return '/static/base/view/word.png';
    case 'xls':
    case 'xlsx':
      return '/static/base/view/excel.png';
    case 'ppt':
    case 'pptx':
      return '/static/base/view/ppt.png';
    case 'zip':
    case 'rar':
    case '7z':
      return '/static/base/view/zip.png';
    default:
      return '/static/base/view/more.png';
  }
};

// 文件预览
const previewFile = (file: FileInfo) => {
  emit('preview', file);
  
  // 确定文件URL和名称
  const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
  const fileSuf = file.resSuf || file.name.split('.').pop() || '';
  
  // 根据文件类型选择预览方式
  if (isVideo(fileSuf)) {
    handlePreviewVideo(file);
  } else if (isImage(fileSuf)) {
    handlePreviewImage(file);
  } else if (canPreview(fileSuf)) {
    handlePreviewDocument(file);
  } else {
    // 不支持预览的文件类型，直接下载
    downloadFileAction(file);
  }
};

// 文档预览
const handlePreviewDocument = (file: FileInfo) => {
  const fileUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const fileName = file.resourName ? `${file.resourName}.${file.resSuf}` : file.name;
  const fileSuf = file.resSuf || file.name.split('.').pop() || '';
  
  previewFileUtil(fileUrl, fileName, fileSuf)
    .catch((error: any) => {
      // 预览失败时尝试下载
      downloadFileAction(file);
    });
};

// 视频预览
const handlePreviewVideo = (file: FileInfo) => {
  const videoUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  const videoName = file.resourName || file.name;
  
  previewVideoUtil(videoUrl, videoName)
    .catch((error: any) => {
      // 视频预览失败时的处理
    });
};

// 图片预览
const handlePreviewImage = (file: FileInfo) => {
  const imageUrl = file.resourUrl ? imagUrl(file.resourUrl) : file.url;
  
  previewImageUtil(imageUrl)
    .catch((error: any) => {
      // 图片预览失败时的处理
    });
};

// 文件下载
const downloadFileAction = (file: FileInfo) => {
  emit('download', file);
  
  const finalUrl = file.resourUrl ? imagUrl(file.resourUrl) : imagUrl(file.url);
  // 获取原始文件名
  const originalFileName = getOriginalFileName(file);
  
  // 调用下载工具函数
  downloadFileUtil(finalUrl, originalFileName)
    .then(() => {
      uni.showToast({
        title: "下载成功",
        icon: "success",
      });
    })
    .catch((error) => {
      console.error('下载失败:', error);
      uni.showToast({
        title: "下载失败",
        icon: "error",
      });
    });
};

// 获取原始文件名
const getOriginalFileName = (file: FileInfo) => {
  // 优先使用resourName，如果没有则使用name，确保文件名正确
  let fileName = '';
  if (file.resourName) {
    // 如果resourName已经包含扩展名，直接使用
    if (file.resSuf && !file.resourName.includes('.' + file.resSuf)) {
      fileName = `${file.resourName}.${file.resSuf}`;
    } else {
      fileName = file.resourName;
    }
  } else if (file.name) {
    // 如果name已经包含扩展名，直接使用
    if (file.resSuf && !file.name.includes('.' + file.resSuf)) {
      fileName = `${file.name}.${file.resSuf}`;
    } else {
      fileName = file.name;
    }
  } else {
    // 最后备用方案，从URL提取文件名
    const urlFileName = file.url.split('/').pop() || '未知文件';
    fileName = urlFileName;
  }
  
  return fileName;
};
</script>

<style lang="scss" scoped>
.basic-file-preview {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  border-bottom: 2px solid #007aff;
  padding-bottom: 5px;
}

.file-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #fafafa;
  transition: all 0.3s ease;
  
  &:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .file-icon {
    margin-right: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .icon-image {
      width: 28px;
      height: 28px;
    }
  }
  
  .file-info {
    flex: 1;
    
    .file-name {
      display: block;
      font-weight: 500;
      margin-bottom: 4px;
      color: #333;
      font-size: 14px;
    }
    
    .file-size {
      font-size: 12px;
      color: #666;
      margin-right: 8px;
    }
    
    .file-type {
      font-size: 11px;
      color: #999;
      background: #f0f0f0;
      padding: 2px 6px;
      border-radius: 4px;
    }
  }
  
  .file-actions {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
    
    .u-button {
      min-width: 20px;
      height: 26px;
      font-size: 12px;
      border-radius: 13px;
      padding: 0 6px;
    }
  }
}

.no-files {
  text-align: center;
  padding: 40px 20px;
  color: #999;
  font-size: 14px;
}
</style>