import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
import { ref, onBeforeUpdate } from "vue";

/**
 * @author changjun
 * @description 图表自动轮播 tooltip 的方法
 * @param chart 图表实例 
 * @param chartOption 图表配置项
 * @param options
 * @returns 
 * @date 2022/08/30
 */
let defaultOptions = {
  interval: 2500,
  loopSeries: true,
  seriesIndex: 0,
  updateData: null,
};

export default function useEchartsAutoTooltip(
  chart,
  chartOption,
  options = defaultOptions
) {
  if (!chart || !chartOption) {
    return {};
  }

  let dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
  let seriesIndex = 0; // 系列索引
  let timeTicket = 0;
  let seriesLen = chartOption.series.length; // 系列个数
  let dataLen = 0; // 某个系列数据个数
  let first = true;
  let flag = false; // 是否手动关闭

  if (options) {
    options.interval = options.interval || defaultOptions.interval;
    options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
    options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
    options.updateData = options.updateData || defaultOptions.updateData;
  } else {
    options = defaultOptions;
  }

  if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
    seriesIndex = 0;
  } else {
    seriesIndex = options.seriesIndex;
  }

  function autoShowTip() {
    function showTip() {
      // 判断是否更新数据
      if (
        dataIndex === 0 &&
        !first &&
        typeof options.updateData === "function"
      ) {
        options.updateData();
        chart.setOption(chartOption);
      }

      let series = chartOption.series;
      dataLen = series[seriesIndex].data.length; // 某个系列的数据个数

      // 取消之前高亮的图形
      chart.dispatchAction({
        type: "downplay",
        seriesIndex: options.loopSeries
          ? seriesIndex === 0
            ? seriesLen - 1
            : seriesIndex - 1
          : seriesIndex,
        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1,
      });

      // 高亮当前图形
      chart.dispatchAction({
        type: "highlight",
        seriesIndex: seriesIndex,
        dataIndex: dataIndex,
      });

      chart.dispatchAction({
        type: "showTip",
        seriesIndex: seriesIndex,
        dataIndex: dataIndex,
      });

      dataIndex = (dataIndex + 1) % dataLen;
      if (options.loopSeries && dataIndex === 0 && !first) {
        // 数据索引归0表示当前系列数据已经循环完
        seriesIndex = (seriesIndex + 1) % seriesLen;
      }

      first = false;
    }

    showTip();
    timeTicket = setInterval(showTip, options.interval);
  }

  // 关闭轮播
  function stopAutoShow(manual = false) {
    flag = manual;
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;

      // 取消高亮的图形
      chart.dispatchAction({
        type: "downplay",
        seriesIndex: options.loopSeries
          ? seriesIndex === 0
            ? seriesLen - 1
            : seriesIndex - 1
          : seriesIndex,
        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1,
      });
    }
  }

  let zRender = chart.getZr();

  function zRenderMouseMove(param) {
    if (param.event) {
      // 阻止canvas上的鼠标移动事件冒泡
      param.event.cancelBubble = true;
    }

    stopAutoShow();
  }

  // 离开echarts图时恢复自动轮播
  function zRenderGlobalOut() {
    if (!timeTicket && !flag) {
      autoShowTip();
    }
  }

  // 鼠标在echarts图上时停止轮播
  chart.on("mousemove", stopAutoShow);
  zRender.on("mousemove", zRenderMouseMove);
  zRender.on("globalout", zRenderGlobalOut);

  autoShowTip();

  function clearLoop() {
    if (timeTicket) {
      clearInterval(timeTicket);
      timeTicket = 0;
    }

    chart.off("mousemove", stopAutoShow);
    zRender.off("mousemove", zRenderMouseMove);
    zRender.off("globalout", zRenderGlobalOut);
  }

  tryOnUnmounted(() => {
    clearLoop();
  });



  return { stopAutoShow, autoShowTip };
}