<template>
  <div
    class="key-block"
    :class="{'is-hovering': isHovering}"
    droppable="true"
    @dragover.prevent="handleDragOver"
    @dragleave="handleDragLeave"
    @drop="handleDrop">
    <span class="key">{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: 'Key',

  props: {
    text: [String, Number]
  },

  data() {
    return {
      isHovering: false
    }
  },

  methods: {
    handleDragOver(e) {
      this.isHovering = true
    },

    handleDragLeave(e) {
      this.isHovering = false
    },

    handleDrop(e) {
      this.isHovering = false
      const data = e.dataTransfer.getData('data')
      this.$emit('dragdrop', data)
    }
  }
}
</script>

<style>
.key {
  display: flex;
  border: 2px solid #eee;
  border-radius: 2px;
  text-align: center;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.is-hovering {
  background-color: red;
}
</style>