<template>
  <div class="attach-content">
    <el-row :gutter="10">
      <el-col :span="6" v-for="(item, index) in fileList" :key="index">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" class="attach-item">
          <!-- 图片预览 -->
          <div v-if="isImage(item)" class="attach-image-box">
            <el-image 
              :src="getRealUrl(item)" 
              fit="cover"
              :preview-src-list="imageList"
              class="attach-image"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
          <!-- 非图片文件 -->
          <div v-else class="file-item">
            <i class="el-icon-document"></i>
          </div>
          <div class="attach-info">
            <div class="attach-name" :title="getFileName(item)">{{ getFileName(item) }}</div>
            <div class="attach-action">
              <el-link type="primary" :href="getRealUrl(item)" target="_blank" :download="getFileName(item)">
                <i class="el-icon-download"></i>
              </el-link>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getRealUrl } from '@/utils';
export default {
  name: "AttachList",
  props: {
    // 文件列表
    fileList: {
      type: Array,
      default: () => []
    },
    // 每行显示数量
    column: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      // 支持预览的图片格式
      imageTypes: ['.png', '.jpg', '.jpeg', '.gif', '.bmp']
    }
  },
  computed: {
    // 可预览的图片列表
    imageList() {
      return this.fileList.filter(item => this.isImage(item)).map(item => this.getRealUrl(item));
    },
    // 列宽
    colSpan() {
      return 24 / this.column;
    }
  },
  methods: {
    // 获取真实url
    getRealUrl(url) {
      return getRealUrl(url);
    },
    // 判断是否为图片
    isImage(url) {
      if (!url) return false;
      return this.imageTypes.some(type => url.toLowerCase().endsWith(type));
    },
    // 获取文件名
    getFileName(url) {
      if (!url) {
        return '';
      }
      return url.substring(url.lastIndexOf('/') + 1);
    }
  }
}
</script>

<style lang="scss" scoped>
.attach-content {
  .attach-item {
    margin-bottom: 10px;
    overflow: hidden;

    .attach-image-box {
      width: 100%;
      height: 120px;
      overflow: hidden;
      .el-image {
        width: 100%;
        height: 100%;
        display: block;
        transition: all 0.25s ease-in-out;
      }
      .el-image:hover {
        cursor: pointer;
        transform: scale(1.15);
      }
    }

    .file-item {
      width: 100%;
      height: 120px;
      background: #f5f7fa;
      display: flex;
      align-items: center;
      justify-content: center;
      
      i {
        font-size: 40px;
        color: #909399;
      }
    }

    .attach-info {
      padding: 8px;
      background: #fff;
      border-top: 1px solid #ebeef5;

      .attach-name {
        font-size: 13px;
        color: #606266;
        margin-bottom: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .attach-action {
        text-align: right;
      }
    }
  }
}

// 图片预览错误状态
.image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  
  i {
    font-size: 30px;
    color: #909399;
  }
}
</style> 