<template>
  <div
    class="form-group wrap-drop-img"
    :class="{ focus: isHighlight }"
    @dragenter="highlight"
    @dragover="highlight"
    @dragleave="unhighlight"
    @drop="unhighlight"
  >
    <div class="drop-area">
      <input
        type="file"
        @change="inputChange"
        id="file-upload"
        accept="image/*"
      />
      <label for="file-upload"></label>
    </div>
    <div
      class="preview"
      data-id="12"
      style="display: flex; justify-content: center; align-items: center;"
    >
      <span style="background:none">
        <img :src="defaultImg" alt />
      </span>
    </div>
  </div>
</template>
<script>
export default {
  name: "base-upload",
  props: {
    urlUpload: {
      type: String,
      default: "v1/upload/avatar"
    },
    defaultImg: {
      type: String,
      default: "/img/theme/team-1-800x800.jpg"
    }
  },
  data() {
    return {
      uploadProgress: [],
      preview: "",
      isHighlight: false
    };
  },
  computed: {
    tableClass() {
      return this.type && `table-${this.type}`;
    },
    colsWithValue() {
      return row => {
        return this.columns.filter(column => this.hasValue(row, column));
      };
    }
  },
  methods: {
    highlight() {
      this.isHighlight = true;
    },
    unhighlight() {
      this.isHighlight = false;
    },
    inputChange(event) {
      let files = event.target.files;
      files = [...files];
      files.forEach(this.uploadFile);
    },
    updateProgress(fileNumber, percent) {
      this.uploadProgress[fileNumber] = percent;
      let total =
        this.uploadProgress.reduce((tot, curr) => tot + curr, 0) /
        this.uploadProgress.length;
      console.debug("update", fileNumber, percent, total);
    },
    uploadFile(file) {
      let reader = new FileReader();
      var self = this;
      reader.readAsDataURL(file);
      reader.onloadend = function() {
        // self.preview = reader.result; //.push(reader.result);
        self.$emit("doUpload", { file: file, preview: reader.result });
      };
    }
  }
};
</script>
<style lang="scss">
.wrap-drop-img {
  border-radius: 0.375rem;
  // border: 3px solid #fff;
  -webkit-transform: translate(-50%, -50%) scale(1);
  position: absolute;
  left: 50%;
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
  width: 100%;
  .drop-area {
    position: absolute;
    left: 0;
    top: 0;
    padding: 5px;
    font-family: sans-serif;
    z-index: 25;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    label {
      position: absolute;
      width: 100%;
      background: transparent;
      border: none;
      padding: 0;
      height: 100%;
      margin: 0;
      top: 0;
      left: 0;
    }

    input {
      display: none;
    }

    &.highlight {
      border-color: purple !important;
    }
  }

  .preview {
    padding: 2px;
    border: 2px solid transparent;
    img {
      vertical-align: middle;
      border-radius: 50%;
      max-width: 100%;
      position: unset;
      transform: unset;
    }
  }

  &.focus {
    border: 2px purple dashed;
  }
}
</style>
