<template>
  <div>
    <h2>Select Files</h2>
    <Panel style="width:600px">
      <ButtonGroup slot="header">
        <FileButton
          style="width:100px"
          accept="image/*"
          :multiple="true"
          @select="onFileSelect($event)"
        >Select Files...</FileButton>
        <LinkButton @click="files=[]" style="width:100px">Clear</LinkButton>
      </ButtonGroup>
      <DataList :data="files" :border="false" style="min-height:100px">
        <template slot-scope="{row}">
          <div class="fileitem">
            <img :src="row.url">
            <div class="name">{{row.name}}</div>
            <div class="size">{{row.size}}</div>
            <LinkButton iconCls="icon-clear" :plain="true" @click="removeFile(row)"></LinkButton>
          </div>
        </template>
      </DataList>
    </Panel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    onFileSelect(event) {
      event.forEach(file => {
        file.url = window.URL.createObjectURL(file);
      });
      this.files = this.files.concat(event);
    },
    removeFile(file) {
      let index = this.files.indexOf(file);
      if (index >= 0) {
        this.files = this.files.filter((file, i) => i != index);
      }
    }
  }
};
</script>
<style>
.fileitem {
  height: 70px;
  padding: 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.fileitem img {
  width: 50px;
  height: 50px;
}
.fileitem .name {
  margin: 0 20px;
  flex: 1;
}
.fileitem .size {
  margin: 0 20px;
  text-align: right;
}
</style>