<template>
  <div
    :class="animationsClass(groupData.styles.animations)"
    :style="{
      ...getSizeStyle(groupData.attr),
      ...getFilterStyle(groupData.styles),
    }"
    @click="clickBtn"
    @dblclick="dblclickBtn"
    @contextmenu="rightclickBtn"
    @mouseenter="mouseenterBtn"
    @mouseleave="mouseleaveBtn"
  >
    <div
      class="chart-item"
      v-for="item in groupData.groupList"
      :class="animationsClass(item.styles.animations)"
      :key="item.id"
      :style="{
        ...getComponentAttrStyle(item.attr, groupIndex),
        ...getStatusStyle(item.status),
        ...getPreviewConfigStyle(item.preview),
        ...(getBlendModeStyle(item.styles) as any),
        ...setMouseEventClose(item.mouseSetting),
      }"
    >
      <component
        :is="item.chartConfig.chartKey"
        :id="item.id"
        :chartConfig="item"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
        :style="{
          ...getSizeStyle(item.attr),
          ...getFilterStyle(item.styles),
          ...getTransformStyle(item.styles),
        }"
        v-on="useLifeHandler(item)"
      ></component>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PropType, ref } from 'vue';
  import { CreateComponentGroupType } from '@/packages/index.d';
  import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils';
  import {
    getSizeStyle,
    getComponentAttrStyle,
    getStatusStyle,
    getPreviewConfigStyle,
    setMouseEventClose
  } from '../../utils';
  import { useLifeHandler } from '@/hooks';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';

  const chartEditStore = useChartEditStore();
  const props = defineProps({
    groupData: {
      type: Object as PropType<CreateComponentGroupType>,
      required: true,
    },
    themeSetting: {
      type: Object,
      required: true,
    },
    themeColor: {
      type: Object,
      required: true,
    },
    groupIndex: {
      type: Number,
      required: true,
    },
  });

  const clickBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.groupData.events.interactConfigEvents,
      'click',
      val,
    );
  };
  const dblclickBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.groupData.events.interactConfigEvents,
      'dblclick',
      val,
    );
  };
  const rightclickBtn = (event) => {
    event.preventDefault(); // 阻止默认的右键菜单
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.groupData.events.interactConfigEvents,
      'rightclick',
    );
  };
  const mouseenterBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.groupData.events.interactConfigEvents,
      'mousein',
      val,
    );
  };
  const mouseleaveBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.groupData.events.interactConfigEvents,
      'mouseout',
      val,
    );
  };
</script>

<style lang="scss" scoped>
  .chart-item {
    position: absolute;
    cursor: pointer;
  }
</style>
