<!--
 * @Author: nxy
 * @Date: 2024-08-07 13:47:07
-->
<template>
  <div class="custom-edit-range" :style="rangeStyle" @mousedown="mousedownBoxSelect($event, undefined)" @click="rangeClick">
    <slot></slot>
    <!-- 拖拽时的辅助线 -->
    <edit-align-line></edit-align-line>
    <!-- 框选时的样式框 -->
    <edit-select></edit-select>
    <!-- 拖拽时的遮罩 -->
    <div class="custom-edit-range-model" :style="rangeModelStyle"></div>
  </div>
</template>

<script setup name="EditRange">
import { toRefs, computed } from 'vue';
import { useSizeStyle } from './hooks/useStyle.hook';
import { mousedownBoxSelect } from './hooks/useDrag.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import EditAlignLine from './edit-align-line.vue';
import EditSelect from './edit-select.vue';

const chartEditStore = useChartEditStore();

const { getEditCanvasConfig, getEditCanvas } = toRefs(chartEditStore);

const size = computed(() => {
  return {
    w: getEditCanvasConfig.value.width,
    h: getEditCanvasConfig.value.height
  };
});

const rangeStyle = computed(() => {
  // 缩放
  const scale = {
    transform: `scale(${getEditCanvas.value.scale})`
  };
  // @ts-ignore
  return { ...useSizeStyle(size.value), ...scale };
});

// 模态层
const rangeModelStyle = computed(() => {
  const dragStyle = getEditCanvas.value.isCreate && { 'z-index': 99999 };
  // @ts-ignore
  return { ...useSizeStyle(size.value), ...dragStyle };
});

const rangeClick = () => {
  chartEditStore.setRightMenuShow(false);
}
</script>

<style lang="less" scoped>
.custom-edit-range {
  position: relative;
  transform-origin: left top;
  background-size: cover;
  transition: all 0.4s;
  border-color: #e3e3e4;
  background-color: #f2f3f5;

  .custom-edit-range-model {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
