<template>
  <el-card :body-style="{ padding: '0px' }" shadow="hover" class="attach-item">
    <!-- 图片预览 -->
    <div v-if="isImage(url)" class="attach-image-box" :style="{height: height}">
      <el-image 
        :src="getRealUrl(url)" 
        fit="cover"
        :preview-src-list="previewList"
        class="attach-image"
      >
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <!-- 悬浮信息层 -->
      <div class="hover-info">
        <el-tooltip :content="fileName" placement="bottom">
          <div class="attach-name">{{ fileName }}</div>
        </el-tooltip>
        <div class="attach-action">
          <el-link type="primary" @click.stop="downloadFile(url)">
            <i class="el-icon-download"></i>
          </el-link>
        </div>
      </div>
    </div>
    <!-- 非图片文件 -->
    <div v-else class="file-item" :style="{height: height}"> 
      <el-image 
        @click="downloadFile(url)"
        :src="getFileIcon(url)" 
        fit="cover" 
        class="attach-image">
        <div slot="error" class="image-slot">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <!-- 悬浮信息层 -->
      <div class="hover-info">
        <el-tooltip :content="fileName" placement="bottom">
          <div class="attach-name">{{ fileName }}</div>
        </el-tooltip> 
        <div class="attach-action">
          <el-link type="primary" @click.stop="downloadFile(url)">
            <i class="el-icon-download"></i>
          </el-link>
        </div>
      </div>
    </div>

    <!-- 额外内容 -->
    <div class="extra-box">
      <slot name="extra"></slot>
    </div>

  </el-card>
</template>

<script>
import { getRealUrl, isImage, getFileIcon, getExt, getOriginName, getFileName } from '@/utils';
export default {
  name: 'AttachCard',
  props: {
    // 支持预览的图片格式
    url: {
      type: String,
      default: null,
      required: true
    },
    // 文件名
    name: {
      type: String,
      default: null,
    },
    // 预览列表
    previewList: {
      type: Array,
      default: () => []
    },
    // 高度
    height: {
      type: String,
      default: '120px'
    },
  },
  data() {
    return {
    }
  },
  computed: {
    fileName() {
      if (this.name) {
        return this.getOriginName(this.name) + '.' + this.getExt(this.url);
      } else {
        return this.getFileName(this.url);
      }
    }
  },
  methods: {
    getFileIcon,
    isImage,
    getRealUrl,
    getExt,
    getOriginName,
    getFileName,
    // 新增：下载文件方法
    downloadFile(url) {
      const link = document.createElement('a');
      link.href = getRealUrl(url);
      link.target = '_blank';
      link.download = this.fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  }
}
</script>

<style lang="scss" scoped>
.attach-item {
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
  position: relative;
  cursor: pointer;
    
  .el-image {
    transition: all 0.25s ease-in-out;
  }
    
  &:hover {
    .el-image {
      transform: scale(1.15);
    }
  }

  .attach-image-box {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    .el-image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .file-item {
    width: 100%;
    overflow: hidden;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .hover-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.3s ease;

    .attach-name {
      flex: 1;
      font-size: 12px;
      color: #fff;
      margin-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }

    .attach-action {
      flex-shrink: 0;
      
      .el-link {
        color: #fff;
        font-size: 14px;
        
        &:hover {
          color: #409EFF;
        }
      }
    }
  }
}

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