<template>
  <div class="custom-edit-select" v-if="isSelect" :style="positionStyle">
    <div class="select-background"></div>
    <div class="select-border"></div>
  </div>
</template>

<script setup name="EditSelect">
import { ref, toRefs, watch } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useSizeStyle, useComponentStyle } from './hooks/useStyle.hook';

const chartEditStore = useChartEditStore();
const { isSelect, scale } = toRefs(chartEditStore.getEditCanvas);

// 位置
const positionStyle = ref();

watch(
  () => chartEditStore.getMousePosition,
  positionInfo => {
    if (!isSelect.value) return;

    // 这里的 x,y 是已经计算过的相对位移值
    const { startX, startY, x, y } = positionInfo;

    const attr = {
      zIndex: 10009,
      // left
      x: 0,
      // top
      y: 0,
      // 宽
      w: 0,
      // 高
      h: 0,
      // 偏移
      offsetX: 0,
      offsetY: 0
    };

    // 处理位置
    if (x > startX && y > startY) {
      // 右下方向
      attr.x = startX;
      attr.y = startY;
      attr.w = Math.round((x - startX) / scale.value);
      attr.h = Math.round((y - startY) / scale.value);
    } else if (x > startX && y < startY) {
      // 右上方向
      attr.x = startX;
      attr.w = Math.round((x - startX) / scale.value);
      attr.h = Math.round((startY - y) / scale.value);
      attr.y = startY - attr.h;
    } else if (x < startX && y > startY) {
      // 左下方向
      attr.y = startY;
      attr.w = Math.round((startX - x) / scale.value);
      attr.h = Math.round((y - startY) / scale.value);
      attr.x = startX - attr.w;
    } else {
      // 左上方向
      attr.w = Math.round((startX - x) / scale.value);
      attr.h = Math.round((startY - y) / scale.value);
      attr.x = startX - attr.w;
      attr.y = startY - attr.h;
    }

    positionStyle.value = {
      ...useComponentStyle(attr, 10009),
      ...useSizeStyle(attr)
    };
  },
  {
    deep: true
  }
);
</script>

<style lang="less" scoped>
.custom-edit-select {
  position: absolute;

  .select-border,
  .select-background {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
  }
  .select-border {
    left: 0;
    top: 0;
    opacity: 0.5;
    border-width: 2px;
    border-style: solid;
    border-color: #51d6a9;
  }
  .select-background {
    top: 2px;
    left: 2px;
    opacity: 0.03;
    background-color: #51d6a9;
  }
}
</style>
