<template>
  <div style="width: 300px;height: 400px;">
    <FileList :fileList="photos" @on-remove="deletePhoto" @on-clear="clearPhotos"/>
  </div>
</template>

<script>
export default {
  methods: {
    deletePhoto({type, index, group}) {
      if (type === 'file') {
        this.photos.splice(index, 1)
      } else if (type === 'group') {
        this.photos = this.photos.filter(d => d.group !== group)
      }
    },
    clearPhotos() {
      this.photos = []
    }
  },
  data() {
    return {
      photos: [
        {
          name: 'DSC00001',
          group: '相机1'
        },
        {
          name: 'DSC00002',
          group: '相机1'
        },
        {
          name: 'DSC00003',
          group: '相机1'
        },
        {
          name: 'DSC00004',
          group: '相机1'
        },
        {
          name: 'DSC00005',
          group: '相机2'
        },
        {
          name: 'DSC00006',
          group: '相机2'
        },
        {
          name: 'DSC00007',
          group: '相机2'
        },
        {
          name: 'DSC00008',
          group: '相机2'
        },
        {
          name: 'DSC00009',
          group: '相机3'
        },
        {
          name: 'DSC00010',
          group: '相机3'
        },
        {
          name: 'DSC00011',
          group: '相机3'
        },
        {
          name: 'DSC00012',
          group: '相机3'
        }
      ]
    }
  }
}
</script>