<template>
  <div class="content-edit">
    <content-box
      id="custom-chart-edit-layout"
      :flex="true"
      :showTop="false"
      :depth="1"
      :xScroll="true"
      :disabledScroll="true"
      :showBottom="true"
      @mousedown="mousedownHandleUnStop"
      @drop="dragHandle"
      @dragover="dragoverHandle"
      @dragenter="dragoverHandle"
    >
      <edit-rule>
        <!-- 画布主体 -->
        <div id="custom-chart-edit-content" @contextmenu="handleContextMenu">
          <!-- 展示 -->
          <edit-range>
            <!-- 滤镜预览 -->
            <div
              :style="{
                ...getFilterStyle(chartEditStore.getEditCanvasConfig),
                ...rangeStyle
              }"
            >
              <!-- 图表 -->
              <div v-for="(item, index) in chartEditStore.getComponentList" :key="item.id">
                <!-- 分组 -->
                <edit-group v-if="item.isGroup" :groupData="item" :groupIndex="index"></edit-group>

                <!-- 单组件 -->
                <edit-shape-box
                  v-else
                  :data-id="item.id"
                  :index="index"
                  :style="{
                    ...useComponentStyle(item.attr, index),
                    ...getBlendModeStyle(item.styles)
                  }"
                  :item="item"
                  @click="mouseClickHandle($event, item)"
                  @mousedown="mousedownHandle($event, item)"
                  @mouseenter="mouseenterHandle($event, item)"
                  @mouseleave="mouseleaveHandle($event, item)"
                  @contextmenu="handleContextMenu($event, item, optionsHandle)"
                >
                  <component
                    class="edit-content-chart"
                    :class="animationsClass(item.styles.animations)"
                    :is="item.chartConfig.chartKey"
                    :chartConfig="item"
                    :themeSetting="themeSetting"
                    :themeColor="themeColor"
                    :style="{
                      ...useSizeStyle(item.attr),
                      ...getFilterStyle(item.styles),
                      ...getTransformStyle(item.styles)
                    }"
                  ></component>
                </edit-shape-box>
              </div>
            </div>
          </edit-range>
        </div>
      </edit-rule>

      <!-- 工具栏 -->
      <template #aside>
        <edit-tools></edit-tools>
      </template>

      <!-- 底部控制 -->
      <template #bottom>
        <edit-bottom></edit-bottom>
      </template>
    </content-box>
  </div>
</template>

<script setup name="ContentEdit">
import { onMounted, onUnmounted, computed, ref } from 'vue';
import EditRule from './edit-rule.vue';
import EditRange from './edit-range.vue';
import EditGroup from './edit-group.vue';
import EditBottom from './edit-bottom.vue';
import EditTools from './edit-tools.vue';
import ContentBox from '../content-box/index.vue';
import EditShapeBox from './edit-shape-box.vue';
import { useAddKeyboard } from '../../hook/useKeyboard.hook';
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook';
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '../../utils/chart-util';
import { useContextMenu } from '../../hook/useContextMenu.hook';
import { dragHandle, dragoverHandle, mousedownHandleUnStop, useMouseHandle } from './hooks/useDrag.hook';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';

const chartEditStore = useChartEditStore();
const { handleContextMenu } = useContextMenu();

const isPressSpace = ref(false);

onMounted(() => {
  // 快捷键
  useAddKeyboard();

  // 设置 Dom 值(ref 不生效先用 document)
  chartEditStore.setEditCanvas('editLayoutDom', document.getElementById('custom-chart-edit-layout'));
  chartEditStore.setEditCanvas('editContentDom', document.getElementById('custom-chart-edit-content'));

  // 监听初始化
  const removeScale = chartEditStore.listenerScale();

  onUnmounted(() => {
    chartEditStore.setEditCanvas('editLayoutDom', null);
    chartEditStore.setEditCanvas('editContentDom', null);
    removeScale();
  });
});

// 点击事件
const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle();

// 右键事件
const optionsHandle = (targetList, allList, targetInstance) => {
  // 多选处理
  if (chartEditStore.getTargetChart.selectId.length > 1) {
    return allList.filter(i => ['gruop', 'delete'].includes(i.key));
  }
  const statusMenuEnums = [];
  if (targetInstance.status.lock) {
    statusMenuEnums.push('lock');
  } else {
    statusMenuEnums.push('unLock');
  }
  if (targetInstance.status.hide) {
    statusMenuEnums.push('hide');
  } else {
    statusMenuEnums.push('show');
  }
  return targetList.filter(i => !statusMenuEnums.includes(i.key));
};

// 主题色
const themeSetting = computed(() => {
  const chartThemeSetting = chartEditStore.getEditCanvasConfig.chartThemeSetting;
  return chartThemeSetting;
});

// 配置项
const themeColor = computed(() => {
  return {};
});

// 是否展示渲染
const filterShow = computed(() => {
  return chartEditStore.getEditCanvasConfig.filterShow;
});

// 背景
const rangeStyle = computed(() => {
  // 设置背景色和图片背景
  const background = chartEditStore.getEditCanvasConfig.background;
  const backgroundImage = chartEditStore.getEditCanvasConfig.backgroundImage;
  const selectColor = chartEditStore.getEditCanvasConfig.selectColor;
  const backgroundColor = background ? background : undefined;

  const computedBackground = selectColor
    ? { background: backgroundColor }
    : { background: `url(${backgroundImage}) no-repeat center center / cover !important` };

  // @ts-ignore
  return {
    ...computedBackground,
    width: 'inherit',
    height: 'inherit'
  };
});

window.onKeySpacePressHold = isHold => {
  isPressSpace.value = isHold;
};
</script>

<style scoped lang="less">
.content-edit {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
}

#custom-chart-edit-layout {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fafafc;
  background-size:
    15px 15px,
    15px 15px;
  background-image: linear-gradient(#fafafc 14px, transparent 0), linear-gradient(90deg, transparent 14px, #373739 0);

  #custom-chart-edit-content {
    border-radius: 10px;
    margin: 25px;
    overflow: hidden;
    transition: all 0.4s;
    box-shadow: 0 8px 10px #00000012;

    .edit-content-chart {
      position: absolute;
      overflow: hidden;
    }
  }
}
</style>
