<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" :preview-list="imageList" />
      </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>
      <el-row :gutter="10">
        <el-col :span="4" v-for="(item, index) in formatFileList" :key="index">
          <attach-card :url="item" :preview-list="imageList" />
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { isImage, getRealUrl } 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,
    }
  },
  data() {
    return {
      dialogVisible: false,
    }
  },
  computed: {
    // 格式化文件列表
    formatFileList() {
      if (this.fileList == null || this.fileList.length == 0) {
        return [];
      }
      if (typeof this.fileList === 'string') {
        return this.fileList.split(',');
      }
      return this.fileList;
    },
    // 可预览的图片列表
    imageList() {
      return this.formatFileList.filter(item => isImage(item)).map(item => getRealUrl(item));
    },
    // 列宽
    colSpan() {
      return 24 / this.column;
    }
  },
}
</script>

<style lang="scss" scoped>
</style> 