import { ref, toRefs, nextTick } from 'vue';
import Request from '@/utils/request/request-util';
import { useChartDataPondFetch } from './useChartDataPondFetch.hook';
import { isPreview, intervalUnitHandle, newFunctionHandle } from '../../../utils/chart-util';

/**
 * setdata 数据监听与更改
 * @param targetComponent
 * @param useChartEditStore 若直接引会报错，只能动态传递
 * @param updateCallback 自定义更新函数
 */
export const useChartDataFetch = (targetComponent, useChartEditStore, updateCallback) => {
  const vChartRef = ref(null);
  let fetchInterval = 0;
  // 数据池
  const { addGlobalDataInterface } = useChartDataPondFetch();
  const { requestDataPondId } = toRefs(targetComponent.request);

  // 组件类型
  const { chartFrame } = targetComponent.chartConfig;

  // eCharts 组件配合 vChart 库更新方式
  const echartsUpdateHandle = dataset => {
    if (chartFrame === 'echarts') {
      nextTick(() => {
        if (!vChartRef.value) return;
        const option = vChartRef.value.getOption();
        option.dataset = dataset;
        vChartRef.value.setOption(option, true);
      });
    } else if (chartFrame === 'gannts') {
      
    }
  };

  const requestIntervalFn = () => {
    const chartEditStore = useChartEditStore();

    // 全局数据
    const {
      requestOriginUrl,
      requestIntervalUnit: globalUnit,
      requestInterval: globalRequestInterval
    } = toRefs(chartEditStore.getRequestGlobalConfig);

    // 目标组件
    const {
      requestDataType,
      requestUrl,
      requestHttpType,
      requestIntervalUnit: targetUnit,
      requestInterval: targetInterval
    } = toRefs(targetComponent.request);
    // 非请求类型
    if (requestDataType?.value !== 1) return;

    try {
      // 处理地址
      // @ts-ignore
      if (requestUrl?.value) {
        // requestOriginUrl 允许为空
        const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value;
        if (!completePath) return;

        clearInterval(fetchInterval);

        const fetchFn = async () => {
          let params = {};
          const res = await Request[requestHttpType.value](completePath, params);
          if (res.code == '00000') {
            try {
              const filter = targetComponent.filter;
              echartsUpdateHandle(newFunctionHandle(res?.data, res, filter));
              // 更新回调函数
              if (updateCallback) {
                updateCallback(newFunctionHandle(res?.data, res, filter));
              }
            } catch (error) {
              console.error(error);
            }
          }
        };

        // 立即调用
        fetchFn();

        // 定时时间
        const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value;
        // 单位
        const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value;

        // 开启轮询
        if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit));
      }
      // eslint-disable-next-line no-empty
    } catch (error) {
      console.log(error);
    }
  };

  if (isPreview()) {
    // 判断是否有数据池对应 id
    requestDataPondId
      ? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
      : requestIntervalFn();
  }
  return { vChartRef };
};
