<template>
  <div v-show="elm">
    <!-- 左上 -->
    <div 
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: (elm.offsetTop - elm.offsetHeight / 100 * elm.height / 2)+ '%',
        left: elm.offsetLeft+ '%'
      }"
      class="north-west size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'left-up')"
    >
      <div class="square" />
    </div>

      <!-- 右上 -->
    <div
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: (elm.offsetTop - elm.offsetHeight / 100 * elm.height / 2)+ '%',
        left: elm.offsetLeft + elm.offsetWidth / 100 * elm.width+ '%'
      }"
      class="north-east size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'right-up')"
    >
      <div class="square" />
    </div>

      <!-- 左下 -->
    <div
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: (elm.offsetTop + elm.offsetHeight / 100 * elm.height / 2)+ '%',
        left: elm.offsetLeft+ '%'
      }"
      class="south-west size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'left-down')"
    >
      <div class="square" />
    </div>

      <!-- 右下 -->
    <div
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: (elm.offsetTop + elm.offsetHeight / 100 * elm.height / 2)+ '%',
        left: elm.offsetLeft + elm.offsetWidth / 100 * elm.width+ '%'
      }"
      class="south-east size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'right-down')"
    >
      <div class="square" />
    </div>
   


    <!-- 左 -->
    <div
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: elm.offsetTop+ '%',
        left: elm.offsetLeft+ '%'
      }"
      class="verti size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'left')"
    >
      <div class="square" />
    </div>

    <!-- 右 -->
    <div
      :style="{
        height: elm.offsetHeight / 100 * elm.height+ '%',
        top: elm.offsetTop+ '%',
        left: elm.offsetLeft + elm.offsetWidth / 100 * elm.width+ '%'
      }"
      class="verti size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'right')"
    >
      <div class="square" />
    </div>

    <!-- 上 -->
    <div
      :style="{
        width: elm.offsetWidth / 100 * elm.width+ '%',
        top: elm.offsetTop+ '%',
        left: elm.offsetLeft+ '%'
      }"
      class="horiz size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'up')"
    >
      <div class="square" />
    </div>

    <!-- 下 -->
    <div
      :style="{
        width: elm.offsetWidth / 100 * elm.width+ '%',
        top: elm.offsetTop + elm.offsetHeight / 100 * elm.height + '%',
        left: elm.offsetLeft + '%'
      }"
      class="horiz size-controle-block"
      @mousedown="handlemousedownForSizeControl($event, 'down', 'height')"
    >
      <div class="square" />
    </div>
  </div>
</template>

<script>
import vpd from '../../mixins/vpd';
import { number } from 'echarts/lib/export';
export default {
  mixins: [vpd],
  data () {
    return {
      type: '' // 调整方向 left | right | up | down | left-up | right-up | left-down | right-down
    };
  },
  computed: {
    elm () {
      var target = this.$vpd.state.activeElement;
      if (!target.resizable) return '';
      return target;
    }
  },

  methods: {
    handlemousedownForSizeControl (e, type, originX, originY) {
      e.stopPropagation();
      this.type = type;
      // params
      this.$vpd.commit('initmove', {
        startX: (e.pageX / this.$vpd.state.page.width) * 100,
        startY: (e.pageY / this.$vpd.state.page.height) * 100,
        originTop: Number(this.elm['top']),
        originLeft: Number(this.elm['left']),
        originWidth: Number(this.elm['width']),
        originHeight: Number(this.elm['height']),
        offsetHeight: Number(this.elm['offsetHeight']),
        offsetWidth: Number(this.elm['offsetWidth'])
      });

      document.addEventListener('mousemove', this.handlemousemove, true);
      document.addEventListener('mouseup', this.handlemouseup, true);
    },

    handlemousemove (e) {
      e.stopPropagation();
      e.preventDefault();

      this.$vpd.commit('resize', {
        x: (e.pageX / this.$vpd.state.page.width) * 100,
        y: (e.pageY / this.$vpd.state.page.height) * 100,
        type: this.type
      });
    },

    handlemouseup () {
      document.removeEventListener('mousemove', this.handlemousemove, true);
      document.removeEventListener('mouseup', this.handlemouseup, true);
      this.$vpd.commit('stopmove');
    }
  }
};
</script>

<style scoped>
.size-controle-block {
  position: absolute;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
}
.verti {
  width: 0;
  cursor: ew-resize;
}
.horiz {
  height: 0;
  cursor: ns-resize;
}
.zuoshang {
  height: 0;
  width: 0;
  cursor: ns-resize;
}
.north-west {
  height: 0;
  width: 0;
  cursor: nw-resize;
}
.north-east {
  height: 0;
  width: 0;
  cursor: ne-resize;
}

.south-west {
  height: 0;
  width: 0;
  cursor: sw-resize;
}
.south-east {
  height: 0;
  width: 0;
  cursor: se-resize;
}


.square {
  width: 10px;
  height: 10px;
  border: 1px solid #2196f3;
  background-color: #fff;
  flex-shrink: 0;
}
</style>
