<template>
  <!-- 操作按钮 -->
  <div
    :class="{show: showOptions,}"
    class="options"
    @click.stop=""
    @mousedown="(event) => move(event)"
  >
    <!-- 左上角点 -->
    <div
      style="cursor: nwse-resize;"
      class="top-left move-point"
      @mousedown.stop="(event) => movePoint(event, 'leftTop')"
    />
    <!-- 右上角点 -->
    <div
      style="cursor: nesw-resize;"
      class="top-right move-point"
      @mousedown.stop="(event) => movePoint(event, 'rightTop')"
    />
    <!-- 左下角点 -->
    <div
      style="cursor: nesw-resize;"
      class="bottom-left move-point"
      @mousedown.stop="(event) => movePoint(event, 'leftBottom')"
    />
    <!-- 右下角点 -->
    <div
      style="cursor: nwse-resize;"
      class="bottom-right move-point"
      @mousedown.stop="(event) => movePoint(event, 'rightBottom')"
    />
    <!-- 顶部中间点 -->
    <div
      style="cursor: ns-resize;"
      class="top move-point"
      @mousedown.stop="(event) => movePoint(event, 'centerTop')"
    />
    <!-- 底部中间点 -->
    <div
      style="cursor: ns-resize;"
      class="bottom move-point"
      @mousedown.stop="(event) => movePoint(event, 'centerBottom')"
    />
    <!-- 左边中间点 -->
    <div
      style="cursor: ew-resize;"
      class="left move-point"
      @mousedown.stop="(event) => movePoint(event, 'leftCenter')"
    />
    <!-- 右边中间点 -->
    <div
      style="cursor: ew-resize;"
      class="right move-point"
      @mousedown.stop="(event) => movePoint(event, 'rightCenter')"
    />
    <!-- 旋转点 -->
    <div
      class="rotate"
      @click.stop=""
      @mousedown.stop="rotate">
      <img class="icon" src="./assets/rotate.png" alt="">
    </div>
  </div>
</template>

<script>

function getYAxisAngle(point1, point2) {
  var xDiff = point2.x - point1.x
  var yDiff = point2.y - point1.y
  var angleRadians = Math.atan2(yDiff, xDiff)
  var angleDegrees = angleRadians * 180 / Math.PI
  return (angleDegrees + 90)
}
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 显示操作按钮
    showOptions: {
      type: Boolean,
      default: false,
    },
    // 画布宽度
    canvasWidth: {
      type: [String, Number],
      default: '',
    },
    // 画布高度
    canvasHeight: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      data: {},
      minWitdth: 10, // box 最小宽度
      minHeight: 10, // box 最小高度
      jieliu: false,
    }
  },
  watch: {
    value(value) {
      const data = value
      if (JSON.stringify(data) !== JSON.stringify(this.data)) {
        this.data = data
      }
    },
    data(data) {
      this.$emit('input', data)
    },
  },
  created() {
    this.data = this.value
  },
  methods: {
    move(event) {
      const { data } = this
      const { x, y, } = data
      const dataX = x * 1
      const dataY = y * 1
      const odiv = event.target // 获取目标元素
      const diff = -4 // diff是card组件，操作区域距离图层的距离

      // this.$emit('test', { x: roundDotX, y: roundDotY }) // 此方法用来显示指定点击的点

      // 算出鼠标相对元素的位置
      const disX = event.clientX - odiv.offsetLeft + diff
      const disY = event.clientY - odiv.offsetTop + diff

      document.onmousemove = (e) => { // 鼠标按下并移动的事件
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        const left = dataX + e.clientX - disX
        const top = dataY + e.clientY - disY

        data.x = left
        data.y = top
      }

      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        console.log('---onmouseup---移动结束')
        this.$emit('on-change')
      }
    },
    // 旋转判断
    rotate(event) {
      const { data, } = this
      const { x, y, w, h, deg, } = data
      const roundDotX = x + w / 2
      const roundDotY = y + h / 2

      const rotateDomMargin = 40 // 点击按钮距离底部高度
      const iconX = roundDotX - Math.sin(deg / 180 * Math.PI) * (h / 2 + rotateDomMargin) // 计算出按钮的实际坐标
      const iconY = roundDotY + Math.cos(deg / 180 * Math.PI) * (h / 2 + rotateDomMargin) // 计算出按钮的实际坐标

      let startX = ''
      let startY = ''

      document.onmousemove = (e) => {
        if (startX === '') startX = e.clientX
        if (startY === '') startY = e.clientY

        const point1 = { x: (e.clientX + iconX - startX), y: (e.clientY + iconY - startY) }
        const point2 = { x: roundDotX, y: roundDotY }
        const deg = getYAxisAngle(point1, point2)
        this.data.deg = deg // 设置角度
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        console.log('---onmouseup---移动结束')
        this.$emit('on-change')
      }
    },
    movePoint(event, type) {
      let startX = ''
      let startY = ''
      const { data, minWitdth, minHeight, canvasWidth, canvasHeight, } = this
      const { x, y, w, h, } = data
      const dataX = x
      const dataY = y
      const dataW = w
      const dataH = h
      const rotate = 30 // 旋转角度

      document.onmousemove = (e) => {
        if (this.jieliu) {
          return
        }
        this.jieliu = true
        setTimeout(() => {
          this.jieliu = false
        }, 1)
        if (startX === '') startX = e.clientX
        if (startY === '') startY = e.clientY

        const moveX = e.clientX * 1 - startX * 1
        const moveY = e.clientY * 1 - startY * 1
        switch (type) {
          case 'leftTop':
            if (!(this.data.w < minWitdth && dataW - moveX < this.data.w)) {
              this.data.x = dataX * 1 + moveX * 1
              this.data.w = dataW * 1 - moveX * 1
            }
            if (!(this.data.h < minHeight && dataH - moveY < this.data.h)) {
              this.data.y = dataY * 1 + moveY * 1
              this.data.h = dataH * 1 - moveY * 1
            }
            break
          case 'centerTop':
            if (!(this.data.h < minHeight && dataH - moveY < this.data.h)) {
              this.data.h = dataH * 1 - moveY * 1
              this.data.y = dataY * 1 + moveY * 1
            }
            break
          case 'rightTop':
            if (!(this.data.w < minWitdth && dataW + moveX < this.data.w)) {
              this.data.w = dataW * 1 + moveX * 1
            }
            if (!(this.data.h < minHeight && dataH - moveY < this.data.h)) {
              this.data.y = dataY * 1 + moveY * 1
              this.data.h = dataH * 1 - moveY * 1
            }
            break
          case 'leftCenter':
            if (!(this.data.w < minWitdth && dataW - moveX < this.data.w)) {
              this.data.x = dataX * 1 + moveX * 1
              this.data.w = dataW * 1 - moveX * 1
            }
            break
          case 'rightCenter':
            if (!(this.data.w < minWitdth && dataW + moveX < this.data.w)) {
              const scale = Math.cos(rotate * Math.PI / 180)
              this.data.w = dataW * 1 + moveX * 1
            }
            break
          case 'leftBottom':
            if (!(this.data.w < minWitdth && dataW - moveX < this.data.w)) {
              this.data.x = dataX * 1 + moveX * 1
              this.data.w = dataW * 1 - moveX * 1
            }
            if (!(this.data.h < minHeight && dataH + moveY < this.data.h)) {
              this.data.h = dataH * 1 + moveY * 1
            }
            break
          case 'centerBottom':
            console.log('centerBottom')
            if (!(this.data.h < minHeight && dataH + moveY < this.data.h)) {
              this.data.h = dataH * 1 + moveY * 1
            }
            break
          case 'rightBottom':
            if (!(this.data.w < minWitdth && dataW + moveX < this.data.w)) {
              this.data.w = dataW * 1 + moveX * 1
            }
            if (!(this.data.h < minHeight && dataH + moveY < this.data.h)) {
              this.data.h = dataH * 1 + moveY * 1
            }
            break
          default:
            break
        }
      }
      document.onmouseup = (e) => {
        document.onmousemove = null
        document.onmouseup = null
        // document.onmousedown = null;
        console.log('---onmouseup---拖拽结束')
        this.$emit('on-change')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// 操作按钮区域
$diff: -4px;
.options {
  position: absolute;
  top: $diff;
  left: $diff;
  right: $diff;
  bottom: $diff;
  display: none;
  &.show {
    display: block;
  }
  .move-point {
    width: 8px;
    height: 8px;
    border-radius: 100%;
    z-index: 9999;
    background-color: #09f;
    position: absolute;
    user-select: none;

    $model: calc(50% - 4px);

    &.top-left {
      left: 0;
      top: 0;
    }
    &.top-right {
      right: 0;
      top: 0;
    }
    &.bottom-left {
      bottom: 0;
      left: 0;
    }
    &.bottom-right {
      bottom: 0;
      right: 0;
    }
    &.top {
      top: 0;
      left: $model;;
    }
    &.bottom {
      bottom: 0;
      left: $model;
    }
    &.left {
      left: 0;
      top: $model;
    }
    &.right {
      right: 0;
      top: $model;;
    }
  }
  .rotate {
    user-select: none;
    -webkit-user-drag: none;
    bottom: -40px;
    left: calc(50% - 10px);
    position: absolute;
    .icon {
      user-select: none;
      -webkit-user-drag: none;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
