<template>
  <div class="md-file-list" :class="['md-file-list--' + displayType]">
    <div
      v-for="(item, index) in fileList"
      :key="index"
      class="md-file-list__item"
    >
      <file-list-item
        :title="item.title"
        :url="item.url"
        :editable="editable"
        :status="item.status"
        :display-type="displayType"
        :show-status="showStatus"
        @remove="handleRemoveItem(item, index)"
      ></file-list-item>
    </div>
    <div
      class="md-file-list__append"
      v-if="$slots.append"
    >
      <slot name="append"></slot>
    </div>
  </div>
</template>
<script>
import FileListItem from './file-list-item.vue'

export default {
  name: 'MdFileList',
  inheritAttrs: false,
  components: {
    FileListItem
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    editable: {
      type: Boolean,
      default: false
    },
    displayType: {
      type: String,
      default: 'list',
      validator(value) {
        return ['card', 'list'].includes(value)
      }
    },
    showStatus: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    fileList() {
      return this.data || []
    }
  },
  methods: {
    handleRemoveItem(item) {
      this.$emit('remove-file', {
        file: item
      })
    }
  }
}
</script>
<style lang="less">
.md-file-list--list {
  .md-file-list__item {
    margin-bottom: 4px;
    &:last-child{
      margin-bottom: 0;
    }
  }
}
.md-file-list--card {
  margin-top: -8px;
  &:after {
    content: '';
    display: block;
    clear: both;
  }
  .md-file-list__item {
    float: left;
    margin-right: 8px;
    margin-top: 8px;
  }
  .md-file-list__append{
    float: left;
    margin-right: 8px;
    margin-top: 8px;
  }
}
</style>
