<template>
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Imagens</h3>
        <div class="card-options">
          <button class="btn btn-primary" @click="$refs.fileInput.click()">
            <i class="fa fa-plus"></i>
            <input type="file" ref="fileInput" multiple hidden @change="onFileChange">
          </button>
        </div>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-lg-4"
            v-for="(image, index) in images"
            :key="index">
              <img :src="image" alt="Image">
              <button type="button" class="btn btn-danger" @click="removeImage(index)">
                <i class="fa fa-minus"></i>
              </button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'ImagesForm',
  props: {
    model: {
      type: Object
    },
    images: {
      type: Array
    },
    validations: {
      type: Object
    }
  },
  mounted () {
    this.images.map((e, i) => this.createFile(e, i))
  },
  methods: {
    onFileChange (e) {
      const files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return
      }
      Array.from(files).forEach(file => this.createImage(file))
      Array.from(files).forEach(file => this.model.images.push(file))
    },
    createImage (file) {
      const reader = new FileReader()
      reader.onload = e => this.images.push(e.target.result)
      reader.readAsDataURL(file)
    },
    createFile (url, index) {

    },
    removeImage (index) {
      this.images.splice(index, 1)
      this.model.images = Array.from(this.model.images).filter((_, i) => i !== index)
    }
  }
}
</script>