<template>
  <div class="go-text-box">
    <div class="content">
      <span style="cursor: pointer; white-space: pre-wrap" v-if="link" @click="click">{{
        option.dataset
      }}</span>
      <span
        style="white-space: pre-wrap; cursor: pointer"
        v-else
        @click="clickBtn"
        @dblclick="dblclickBtn"
        @contextmenu="rightclickBtn"
        @mouseenter="mouseenterBtn"
        @mouseleave="mouseleaveBtn"
        >{{ option.dataset }}</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
  import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue';
  import { CreateComponentType } from '@/packages/index.d';
  import { useChartDataFetch } from '@/hooks';
  import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore';
  import { option as configOption } from './config';
  import { eventHandlerHook } from '@/hooks/eventHandler.hook';
  import { EventBus } from '@/utils/eventBus';
  import { replaceSqlParams } from '@/utils/sqlHandler';

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

  const {
    linkHead,
    link,
    fontColor,
    fontSize,
    letterSpacing,
    paddingY,
    paddingX,
    textAlign,
    borderWidth,
    borderColor,
    borderRadius,
    writingMode,
    backgroundColor,
    fontWeight,
  } = toRefs(props.chartConfig.option);

  const option = shallowReactive({
    dataset: configOption.dataset,
  });

  // 手动更新
  watch(
    () => props.chartConfig.option.dataset,
    (newData: any) => {
      option.dataset = newData;
    },
    {
      immediate: true,
      deep: false,
    },
  );

  // 预览更新
  useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
    option.dataset = newData;
  });

  //打开链接
  const click = () => {
    window.open(linkHead.value + link.value);
  };

  const clickBtn = (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('text-box') {
    display: flex;
    align-items: center;
    justify-content: v-bind('textAlign');
    overflow: hidden;

    .content {
      color: v-bind('fontColor');
      padding: v-bind('`${paddingY}px ${paddingX}px`');
      font-size: v-bind('fontSize + "px"');
      letter-spacing: v-bind('letterSpacing + "px"');
      writing-mode: v-bind('writingMode');
      font-weight: v-bind('fontWeight');
      border-style: solid;
      border-width: v-bind('borderWidth + "px"');
      border-radius: v-bind('borderRadius + "px"');
      border-color: v-bind('borderColor');

      background-color: v-bind('backgroundColor');
    }
  }
</style>
