<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}) {
      console.log(index)
      this.photos.splice(index, 1)
    },
    clearPhotos() {
      this.photos = []
    }
  },
  data() {
    return {
      photos: [
        {
          name: 'DSC00001'
        },
        {
          name: 'DSC00002'
        },
        {
          name: 'DSC00003'
        },
        {
          name: 'DSC00004'
        },
        {
          name: 'DSC00005'
        },
        {
          name: 'DSC00006'
        },
        {
          name: 'DSC00007'
        },
        {
          name: 'DSC00008'
        },
        {
          name: 'DSC00009'
        },
        {
          name: 'DSC00010'
        },
        {
          name: 'DSC00011'
        },
        {
          name: 'DSC00012'
        }
      ]
    }
  }
}
</script>