<template>
  <div class="uif-t-header-resize" :class="{visible}" v-mouse="mouseEvent">
    <div class="resize-bar"></div>
  </div>
</template>

<script>
import mouse from '@uif/admin/lib/directives/mouse'
import {addBodyClass, removeBodyClass} from '@uif/hq/lib/utils/dom'
export default {
  directives: {
    mouse
  },
  components: {},
  props: {
    column: {
      type: Object,
      default () {
        return {}
      }
    },
    index: {
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {},
  watch: {},
  created () {
  },
  mounted () {
  },
  methods: {
    mouseEvent (time, event) {
      switch (time) {
        case 'start':
          this.visible = true
          addBodyClass('e-resize')
          this.$emit('change', this.index)
          this.width = this.column.width
          this.event = event
          break
        case 'move':
          this.changeWidth(event)
          break
        case 'end':
          this.visible = false
          removeBodyClass('e-resize')
          this.$emit('change', -1)
          this.event = null
          this.$emit('columns-resize')
          break
      }
    },
    changeWidth (event) {
      const width = this.width + event.clientX - this.event.clientX
      this.$set(this.column, 'width', Math.max(40, width))
    }
  }
}
</script>
