/*
 * @Author: changjun
 * @FilePath: /yuan-qingdao-zld-browser/src/components/chart/logic/useLineXAxisAuto.ts
 * @Date: 2022-09-05 16:06:46
 * @Description: x 轴固定数量，自动滚动
 * @LastEditTime: 2022-09-06 17:59:31
 * @LastEditors: changjun
 */
import { onBeforeUpdate } from 'vue'
import { tryOnMounted, tryOnUnmounted } from "@vueuse/core";
export const useLineXAxisAuto = (chart,chartOption, xAxisData) => {
  const dataZoom = chartOption.dataZoom
  let timer = null as any
  const autoSwipe = () => {
    if (dataZoom.endValue == xAxisData.length ) {
      chartOption.dataZoom.endValue = 6; 
      chartOption.dataZoom.startValue = 0;
    }else{
      chartOption.dataZoom.endValue = chartOption.dataZoom.endValue + 1;
      chartOption.dataZoom.startValue = chartOption.dataZoom.startValue + 1;
    }
    chart.setOption(chartOption)
  }


  const init = () => {
    if(timer){
      stopAutoSwipe()
    }
    timer = setInterval(autoSwipe, 2000)
  }

  const stopAutoSwipe = () => {
    clearInterval(timer)
    timer = null  
    console.log(chartOption)
    if(chart && chartOption.dataZoom){
      chartOption.dataZoom.endValue = 6; 
      chartOption.dataZoom.startValue = 0;
      chart.setOption(chartOption)
    }
  }

  if(!timer && xAxisData.length > 0){
    init()
  }

  tryOnUnmounted(() => {
    stopAutoSwipe()
  })

  return { stopAutoSwipe }  

  
}