<template>
  <div class="custom-edit-group-box">
    <edit-shape-box
      :key="groupData.id"
      :data-id="groupData.id"
      :index="groupIndex"
      :item="groupData"
      :hiddenPoint="true"
      :class="animationsClass(groupData.styles.animations)"
      :style="{
        ...useComponentStyle(groupData.attr, groupIndex),
        ...useSizeStyle(groupData.attr),
        ...getFilterStyle(groupData.styles),
        ...getTransformStyle(groupData.styles),
        ...getBlendModeStyle(groupData.styles)
      }"
      @click="mouseClickHandle($event, groupData)"
      @mousedown="mousedownHandle($event, groupData)"
      @mouseenter="mouseenterHandle($event, groupData)"
      @mouseleave="mouseleaveHandle($event, groupData)"
      @contextmenu="handleContextMenu($event, groupData, optionsHandle)"
    >
      <!-- 组合组件 -->
      <edit-shape-box
        v-for="item in groupData.groupList"
        :key="item.id"
        :data-id="item.id"
        :index="groupIndex"
        :item="item"
        :hiddenPoint="true"
        :style="{
          ...useComponentStyle(item.attr, groupIndex)
        }"
      >
        <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>
    </edit-shape-box>
  </div>
</template>

<script setup name="EditGroup">
import { computed } from 'vue';
import EditShapeBox from './edit-shape-box.vue';
import {
  animationsClass,
  getFilterStyle,
  getTransformStyle,
  getBlendModeStyle,
} from '../../utils/chart-util';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { useContextMenu, divider } from '../../hook/useContextMenu.hook';
import { useMouseHandle } from './hooks/useDrag.hook';
import { useComponentStyle, useSizeStyle } from './hooks/useStyle.hook';

const props = defineProps({
  groupData: {
    type: Object,
    required: true
  },
  groupIndex: {
    type: Number,
    required: true
  }
});

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

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

// 右键
const optionsHandle = (targetList, allList, targetInstance) => {
  const filter = menulist => {
    return allList.filter(i => menulist.includes(i.key));
  };

  // 多选处理
  if (chartEditStore.getTargetChart.selectId.length > 1) {
    return filter(['group', 'delete']);
  } else {
    const statusMenuEnums = [];
    if (targetInstance.status.lock) {
      statusMenuEnums.push('lock');
    } else {
      statusMenuEnums.push('unLock');
    }
    if (targetInstance.status.hide) {
      statusMenuEnums.push('hide');
    } else {
      statusMenuEnums.push('show');
    }
    // 单选
    const singleMenuEnums = ['unGroup'];
    return [...filter(singleMenuEnums), divider(), ...targetList.filter(i => !statusMenuEnums.includes(i.key))];
  }
};

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

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

<style scoped lang="less"></style>
