<template>
  <div class="go-icon-box">
    <GoIconify
      :icon="dataset || ''"
      :color="color"
      :width="size"
      :rotate="rotate"
      @click="clickBtn"
      @dblclick="dblclickBtn"
      @contextmenu="rightclickBtn"
      @mouseenter="mouseenterBtn"
      @mouseleave="mouseleaveBtn"
    />
  </div>
</template>

<script setup lang="ts">
  import { PropType, toRefs, ref, watch, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { GoIconify } from '@/components/GoIconify';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';

  const chartEditStore = useChartEditStore();
  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });
  const { w, h } = toRefs(props.chartConfig.attr);
  const { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
  // 单击交互
  const clickElementItem = ref([]);
  // 双击交互
  const dbclickElementItem = ref([]);
  // 右击交互
  const rightclickElementItem = ref([]);
  // 鼠标移入交互
  const mouseenterElementItem = ref([]);
  // 鼠标移出交互
  const mouseleaveElementItem = ref([]);

  const list = props.chartConfig.events.interactConfigEvents;
  for (let i = 0; i < list.length; i++) {
    if (list[i].type == 'click') {
      for (let j = 0; j < list[i].movementList.length; j++) {
        clickElementItem.value.push(list[i].movementList[j]);
      }
    } else if (list[i].type == 'dblclick') {
      for (let j = 0; j < list[i].movementList.length; j++) {
        dbclickElementItem.value.push(list[i].movementList[j]);
      }
    } else if (list[i].type == 'rightclick') {
      for (let j = 0; j < list[i].movementList.length; j++) {
        rightclickElementItem.value.push(list[i].movementList[j]);
      }
    } else if (list[i].type == 'mousein') {
      for (let j = 0; j < list[i].movementList.length; j++) {
        mouseenterElementItem.value.push(list[i].movementList[j]);
      }
    } else if (list[i].type == 'mouseout') {
      for (let j = 0; j < list[i].movementList.length; j++) {
        mouseleaveElementItem.value.push(list[i].movementList[j]);
      }
    }
  }
  const clickBtn = () => {
    eventHandlerHook(chartEditStore.getComponentList, clickElementItem.value);
  };
  const dblclickBtn = () => {
    eventHandlerHook(chartEditStore.getComponentList, dbclickElementItem.value);
  };
  const rightclickBtn = (event) => {
    event.preventDefault(); // 阻止默认的右键菜单
    eventHandlerHook(chartEditStore.getComponentList, rightclickElementItem.value);
  };
  const mouseenterBtn = () => {
    eventHandlerHook(chartEditStore.getComponentList, mouseenterElementItem.value);
  };
  const mouseleaveBtn = () => {
    eventHandlerHook(chartEditStore.getComponentList, mouseleaveElementItem.value);
  };
</script>

<style lang="scss" scoped>
  @include go('icon-box') {
    display: flex;
    align-items: center;
    justify-content: center;
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
</style>
