<template>
  <ul
    @mouseup="mouseUp($event)"
    @mousemove="mouseMove($event)">
    <li v-for="(header, index) in headers" :key="index" :ref="`element-${index}`">
      {{ header }}
      <button
        @mousedown="mouseDown($event, index)"
        @mouseup="mouseUp($event)"
        :ref="`resize-${index}`"
        class="resize"
        :class="{ 'dragged': beforeChangeSize.col === index }"
      >
      </button>
    </li>
  </ul>
</template>

<script type="text/javascript">
  export default {
    name: 'drag-column-header',
    data() {
      return {
        beforeChangeSize: {},
        eventDrag: false,
        headers: ['a', 'b', 'c']
      }
    },
    methods: {
      mouseDown(event, colIndex) {
        this.eventDrag = true
        const [element] = this.$refs[`element-${colIndex}`]

        this.beforeChangeSize = {
          offset: event.clientX,
          col: colIndex,
          width: element.offsetWidth
        }

        const [resizeButton] = this.$refs[`resize-${colIndex}`]
        resizeButton.style.top = `${element.parentElement.offsetTop}px`
      },
      mouseMove(event) {
        if (this.eventDrag) {
          const [resizeButton] = this.$refs[`resize-${this.beforeChangeSize.col}`]

          const offsetTop = resizeButton.offsetTop
          const offsetBottom = offsetTop + resizeButton.offsetHeight
          if (offsetTop <= event.clientY && offsetBottom >=  event.clientY) {
            // Change style.left of resizeButton
            resizeButton.style.left = `${event.clientX}px`
          } else {
            // Called MouseUp function
            this.mouseUp()
          }
        }
      },
      mouseUp(event) {
        if (this.eventDrag) {
          this.eventDrag = false
          const oldOffset = this.beforeChangeSize.offset
          const newOffset = event.clientX
          const result = Math.max(newOffset, oldOffset) - Math.min(newOffset, oldOffset)

          // Calcul the newSize
          let newSize
          if (newOffset > oldOffset) {
            newSize = this.beforeChangeSize.width + result
          } else {
            newSize = this.beforeChangeSize.width - result
          }

          // Give the newSize to the element
          const [element] = this.$refs[`element-${this.beforeChangeSize.col}`]
          element.style.width = `${newSize}px`

          // Reset the style of the current resize button
          const [resizeButton] = this.$refs[`resize-${this.beforeChangeSize.col}`]
          resizeButton.style.left = 'auto'
          resizeButton.style.top = '0'

          // Reset the beforeChangeSize to an empty object
          this.beforeChangeSize = {}
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  ul {
    display: flex;
    padding: 0;
    list-style: none;
  }
  li {
    position: relative;
    width: 100px;
    height: 30px;
    background: aliceblue;
    border: 1px solid #ddd;
    padding: 4px 8px;
  }
  .resize {
    position: absolute;
    top: 0;
    right: 0;
    height: 45px;
    background: #7d8ba5;
    width: 5px;
    padding: 0;
    border: 0;
    cursor: col-resize;
    box-shadow: none;
    outline: none;
    opacity: 0;
    transition: opacity ease .5s;
    &.dragged {
      opacity: 1;
      position: fixed;
      top: auto;
    }
    &:hover {
      opacity: 1;
    }
  }
</style>