<template>
  <div class="attach-content">
    <el-row :gutter="10">
      <el-col :span="colSpan" v-for="(item, index) in formatFileList" :key="index">
        <attach-card v-if="index < maxShow" :url="item.url" :name="item.name" :preview-list="imageList" :height="height" />
      </el-col>
    </el-row>

    <!-- 查看全部 -->
    <el-button 
      v-if="formatFileList.length > maxShow"
      plain 
      @click="dialogVisible = true" 
      style="width: 100%;"
      size="small" 
      icon="el-icon-view"
    >查看全部（共 {{ formatFileList.length }} 个）</el-button>
    <el-empty v-if="formatFileList.length == 0" description="暂无附件" :image-size="64"/>

    <el-dialog :visible.sync="dialogVisible" title="查看全部附件" width="1000px" append-to-body>
      <!-- 搜索框 -->
      <div class="search-box">
        <el-input
          size="small"
          v-model="searchKeyword"
          placeholder="请输入附件名称或URL进行搜索"
          prefix-icon="el-icon-search"
          clearable
          @clear="handleClear"
        >
        </el-input>
      </div>
      <el-row :gutter="10">
        <el-col :span="4" v-for="(item, index) in filteredFileList" :key="index">
          <attach-card :url="item.url" :name="item.name" :preview-list="imageList"/>
        </el-col>
      </el-row>
      <div v-if="filteredFileList.length === 0" class="empty-result">
        <el-empty description="未找到匹配的附件" :image-size="64"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { isImage, getRealUrl, getFileName } from '@/utils';
import AttachCard from '@/components/AttachCard';
export default {
  name: "AttachList",
  components: {
    AttachCard
  },
  props: {
    // 文件列表
    fileList: {
      type: [Array, String],
      default: null
    },
    // 每行显示数量
    column: {
      type: Number,
      default: 4
    },
    // 最多显示数量
    maxShow: {
      type: Number,
      default: 999,
    },
    // 高度
    height: {
      type: String,
      default: '120px'
    }
  },
  data() {
    return {
      dialogVisible: false,
      searchKeyword: '', // 搜索关键字
    }
  },
  computed: {
    // 格式化文件列表
    formatFileList() {
      if (this.fileList == null || this.fileList.length == 0) {
        return [];
      }
      let list = this.fileList;
      if (typeof this.fileList === 'string') {
        list = this.fileList.split(',');
      }

      if (list.length > 0) {
        list = list.map(item => {
          if (typeof item === 'string') {
            return {
              name: getFileName(item),
              url: getRealUrl(item)
            }
          } else {
            return item;
          }
        });
      } else {
        list = [];
      }
      return list;
    },
    // 可预览的图片列表
    imageList() {
      return this.formatFileList.filter(item => isImage(item.url)).map(item => getRealUrl(item.url));
    },
    // 列宽
    colSpan() {
      return 24 / this.column;
    },
    // 过滤后的文件列表
    filteredFileList() {
      if (!this.searchKeyword) {
        return this.formatFileList;
      }
      const keyword = this.searchKeyword.toLowerCase();
      return this.formatFileList.filter(item => 
        item.name.toLowerCase().includes(keyword) || 
        item.url.toLowerCase().includes(keyword)
      );
    },
  },
  methods: {
    handleClear() {
      this.searchKeyword = '';
    },
  },
}
</script>

<style lang="scss" scoped>
.search-box {
  margin-bottom: 15px;
}
.empty-result {
  margin-top: 20px;
  text-align: center;
}
</style> 