<template>
  <div class="HuoQingDetailProcessButton" @click="clickBtn">
    <div class="buttonDiv" v-for="item in option.dataset" :key="item.key" @click="clickBtn(item)">
      <Button :item="item" :dataStyle="option.dataStyle" />
    </div>
  </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 { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';
  import Button from './svg/button.vue';

  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,
  });

  // 变换组件宽度
  watch(
    () => (w.value, option.dataStyle.marginLeft),
    () => {
      option.dataStyle.width = w.value - option.dataStyle.marginLeft * 2;
      option.dataStyle.height = 42 * (option.dataStyle.width / 157);
    },
    {
      immediate: true,
      deep: true,
    },
  );

  // 组件通信-单击交互
  const clickBtn = (val) => {
    // 显示弹窗
    eventHandlerHook(
      chartEditStore.getComponentList,
      props.chartConfig.events.interactConfigEvents,
      'click',
      val,
    );

    // 更新详情弹窗信息
    let bindEvents = props.chartConfig.events.interactConfigEvents;
    for (let i = 0; i < bindEvents.length; i++) {
      for (let j = 0; j < bindEvents[i].movementList.length; j++) {
        EventBus.emit(bindEvents[i].movementList[j].elementId[0] + 'dataupdate', item);
      }
    }
  };

  onMounted(() => {
    // 组件通信
    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[]) => {
        props.chartConfig.option.dataset = resData;
      });
    });
  });

  // 数据callback处理（预览时触发）
  useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
    option.dataset = resData;
  });
</script>

<style lang="scss" scoped>
  .HuoQingDetailProcessButton {
    width: v-bind('`${w}px`');
    height: v-bind('`${h}px`');
    background: v-bind('`${option.dataStyle.backgroud}`');
    padding-top: v-bind('`${option.dataStyle.marginTop}px`');
    padding-left: v-bind('`${option.dataStyle.marginLeft}px`');
    padding-right: v-bind('`${option.dataStyle.marginLeft}px`');
    overflow-y: auto;

    // 页面不能被选中
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
  }

  .HuoQingDetailProcessButton::-webkit-scrollbar {
    display: none;
  }
  .HuoQingDetailProcessButton {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .buttonDiv {
    margin-bottom: v-bind('`${option.dataStyle.gap}px`');
  }
</style>
