<template>
  <label
    class="ws-state-file-drag-upload"
    :class="[{dropping:dropping},{ready:value}]"
    @dragover.prevent
    @dragenter.prevent="$_onDragenter()"
    @dragleave="$_onDragleave()"
    @drop.prevent="$_onDrop($event)"
  >
    <input
      type="file"
      @change="$_onChange($event)"
    >
    <div class="file-drag-area">
      <template v-if="value">
        <v-icon
          size="48"
          color="link"
        >{{_fileIcon}}</v-icon>
        <div class="ws-state-file-drag-upload__text">{{_fileName}}</div>
      </template>
      <template v-else>
        <v-icon
          size="48"
          color="link"
        >mdi-cloud-upload</v-icon>
        <div class="ws-state-file-drag-upload__text">或將檔案拖曳至此</div>
      </template>
    </div>
  </label>
</template>

<script>
export default {
  data: () => ({
    dropping: false,
    file: null
  }),
  methods: {
    $_onChange($event) {
      this.$emit("input", $event.target.files[0]);
    },
    $_onDragenter() {
      this.dropping = true;
    },
    $_onDragleave() {
      this.dropping = false;
    },
    $_onDrop($event) {
      this.$emit("input", $event.dataTransfer.files[0]);
      this.dropping = false;
    },
  },
  computed: {
    _fileIcon() {
      if (!this.value) {
        return null;
      } else if (this.value.type == "image/png") {
        return "mdi-image";
      } else if (this.value.type == "text/csv") {
        return "mdi-file-excel";
      } else if (this.value.type == "application/vnd.ms-excel") {
        return "mdi-file-excel";
      } else {
        return null;
      }
    },
    _fileName() {
      if (!this.value) {
        return null;
      } else {
        return this.value.name;
      }
    }
  },
  props: {
    value: {
      type: File,
      default: null
    }
  },
};
</script>

<style lang="scss">
@import "../assets/scss/ws-state-file-drag-upload.scss";
</style>