<template>
  <div class="ZhiGan_ModalButton" @click="clickBtn">
    <n-button text>
      <Button :w="w" :h="h" :dataset="option.dataset" :dataStyle="option.dataStyle" />
    </n-button>
  </div>
</template>

<script setup lang="ts">
  import { computed, PropType, toRefs, watch, reactive, ref, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { icon } from '@/plugins';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { useChartDataFetch } from '@/hooks';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
  import Button from './svg/button.vue';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';

  const chartEditStore = useChartEditStore();

  const props = defineProps({
    chartConfig: {
      type: Object as PropType<CreateComponentType>,
      required: true,
    },
  });

  const { w, h } = toRefs(props.chartConfig.attr);

  const option = reactive({
    dataset: props.chartConfig.option.dataset,
    dataStyle: props.chartConfig.option.dataStyle,
  });

  const primary_id = ref(null);

  // 单击交互
  const clickBtn = (val) => {
    // 隐藏方法
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );

    useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any) => {
      // console.log('resData', resData);
    });

  };

  onMounted(() => {
    // let sql = props.chartConfig.request?.requestSQLContent?.sql;
    // 组件通信 获取列表中的信息
    EventBus.on(props.chartConfig.id + 'dataupdate', (data) => {
      const keys = Object.keys(data);

      let interactConfigEvents = props.chartConfig.events.interactConfigEvents;
      interactConfigEvents.forEach((item, index) => {
        item?.movementList.forEach((m, mindex) => {
          if (m.movement == 'callBackRequest') {
            let Params = m.callBackRequest.requestParams.Params;
            Params.forEach((p, pindex) => {
              if (keys.includes(p.key)) {
                props.chartConfig.events.interactConfigEvents[index].movementList[
                  mindex
                ].callBackRequest.requestParams.Params[pindex].value = data[p.key];
              }
            });
          }
        });
      });
      // props.chartConfig.request.requestSQLContent.sql = replaceSqlParams(sql,{Status:3,Id:data.id});
      // props.chartConfig.request.requestParams.Params.id = data.id;
    });
  });
</script>

<style lang="scss" scoped>
  .ZhiGan_ModalButton {
    display: flex;
    justify-content: center;
    text-align: center;
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
  }
</style>
