<template>
  <div class="operate">
    <div
      class="scale scale-nw"
      @mousedown.stop="mousedown($event, 'nw')"
    ></div>
    <div
      class="scale scale-ne"
      @mousedown.stop="mousedown($event, 'ne')"
    ></div>
    <div
      class="scale scale-sw"
      @mousedown.stop="mousedown($event, 'sw')"
    ></div>
    <div
      class="scale scale-se"
      @mousedown.stop="mousedown($event, 'se')"
    ></div>
    <div
      class="scale scale-n"
      @mousedown.stop="mousedown($event, 'n')"
    ></div>
    <div
      class="scale scale-e"
      @mousedown.stop="mousedown($event, 'e')"
    ></div>
    <div
      class="scale scale-s"
      @mousedown.stop="mousedown($event, 's')"
    ></div>
    <div
      class="scale scale-w"
      @mousedown.stop="mousedown($event, 'w')"
    ></div>
  </div>
</template>

<script>
export default {
  computed: {
    scaleRate () {
      return this.$store.state.app.scaleRate
    }
  },
  props: {
    element: {
      type: Object,
      require: true,
      default: () => {}
    }
  },
  methods: {
    format (val) {
      if (isNaN(parseInt(val))) return val
      return parseInt(val).toFixed(0) + 'px'
    },
    mousedown (downEvent, mark) {
      let startX = downEvent.clientX
      let startY = downEvent.clientY
      let ele = this.element
      let height = parseInt(ele.style['height'])
      let width = parseInt(ele.style['width'])
      let top = parseInt(ele.style['top'])
      let left = parseInt(ele.style['left'])
      let move = moveEvent => {
        this.moveTimer && clearTimeout(this.moveTimer)
        let currX = moveEvent.clientX
        let currY = moveEvent.clientY
        let disY = (currY - startY) / this.scaleRate
        let disX = (currX - startX) / this.scaleRate
        let hasN = /n/.test(mark)
        let hasS = /s/.test(mark)
        let hasW = /w/.test(mark)
        let hasE = /e/.test(mark)
        let newHeight = +height + (hasN ? -disY : hasS ? disY : 0)
        let newWidth = +width + (hasW ? -disX : hasE ? disX : 0)

        ele.style['height'] && (ele.style['height'] = newHeight > 0 ? newHeight + 'px' : 0)
        ele.style['width'] && (ele.style['width'] = newWidth > 0 ? newWidth + 'px' : 0)

        ele.style['left'] = (+left + (hasW ? disX : 0)) + 'px'
        ele.style['top'] = (+top + (hasN ? disY : 0)) + 'px'

        // console.log(ele.style)
      }
      let up = () => {
        document.removeEventListener('mousemove', move)
        document.removeEventListener('mouseup', up)

        this.moveTimer = setTimeout(() => {
          console.log(1, ele.style.width)
          ele.style.height = this.format(ele.style.height)
          ele.style.width = this.format(ele.style.width)

          console.log(2, parseInt(ele.style.width))
          ele.style.left = this.format(ele.style.left)
          ele.style.top = this.format(ele.style.top)

          console.log(ele.style)
        }, 500)
      }
      document.addEventListener('mousemove', move)
      document.addEventListener('mouseup', up)
    }
  }
}
</script>
<style lang="scss" scoped>
.operate {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px dashed #000;min-width:10px;
}

.scale {
  position: absolute; background: rgba(255, 255, 255, 0.021); border: 1px solid #000; width: 10px; height: 10px; z-index: 1;
}

.scale-nw {
  top: -3.5px; left: -3.5px; cursor: nw-resize; border-radius: 50%;
}

.scale-ne {
  top: -3.5px; right: -3.5px; cursor: ne-resize; border-radius: 50%;
}

.scale-sw {
  bottom: -3.5px; left: -3.5px; cursor: sw-resize; border-radius: 50%;
}

.scale-se {
  bottom: -3.5px; right: -3.5px; cursor: se-resize; border-radius: 50%;
}

.scale-n {
  top: -3.5px; left: 50%; margin-left: -3.5px; cursor: n-resize;
}

.scale-e {
  right: -3px; top: 50%; margin-top: -3.5px; cursor: e-resize;
}

.scale-s {
  bottom: -3px; left: 50%; margin-left: -3.5px; cursor: s-resize;
}

.scale-w {
  left: -3.5px; top: 50%; margin-top: -3.5px; cursor: w-resize;
}

</style>
