<template>
  <div class="go-icon-box">
    <GoIconify
      :icon="dataset || ''"
      :color="chartConfig.option.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, reactive, 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';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import { useChartDataFetch } from '@/hooks';

  const chartEditStore = useChartEditStore();
  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });
  const option = reactive({
    dataset: props.chartConfig.option.dataset,
  });
  let { w, h } = toRefs(props.chartConfig.attr);
  let { dataset, color, size, rotate } = toRefs(props.chartConfig.option);
  const clickBtn = (val) => {
    console.log('value000', val);
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );
  };
  const dblclickBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'dblclick',
      val,
    );
  };
  const rightclickBtn = (event) => {
    event.preventDefault(); // 阻止默认的右键菜单
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'rightclick',
    );
  };
  const mouseenterBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'mousein',
      val,
    );
  };
  const mouseleaveBtn = (val) => {
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'mouseout',
      val,
    );
  };
  onMounted(() => {
    // 获取eventBus传过来的值
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      console.log('data', data);
    });
    // websocket传过来的值
    EventBus.on(props.chartConfig.id + 'websocket', (data) => {
      console.log('data', data);
    });
    // 组件通信
    const sql = props.chartConfig.request?.requestSQLContent?.sql;
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql, { Id: data.id });
      // 数据callback处理（预览时触发）
      useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
        option.dataset = resData;
      });
    });
  });
  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });
</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>
