<script setup lang="ts">
// import { useIntervalFn } from "@vueuse/core";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions
} from "@pureadmin/utils";

const { isDark } = useDark();

const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "default";
});

const lineChartRef = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
  theme
});

const xData = (() => {
  const data: any[] = [];
  for (let i = 1; i < 31; i++) {
    data.push(`${i}日`);
  }
  return data;
})();

setOptions(
  {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "6%",
      right: "2%",
      top: "5%",
      bottom: "9%"
    },
    legend: {
      show: false,
      //@ts-expect-error
      right: true,
      data: ["fork", "star"]
    },
    calculable: true,
    xAxis: [
      {
        triggerEvent: true,
        type: "category",
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: xData
      }
    ],
    yAxis: [
      {
        triggerEvent: true,
        type: "value",
        splitLine: {
          show: true,
          lineStyle: {
            // 分隔线
            type: "dashed", // 线的类型
            color: "#E0E0E0" // 分隔线颜色
          }
        },
        axisLabel: {
          show: true,
          //Y轴数值可添加百分号
          formatter: "{value}h"
        },
        axisLine: {
          show: false
        }
      }
    ],
    dataZoom: [
      {
        type: "slider",
        show: false,
        realtime: true,
        startValue: 0,
        endValue: 29
      }
    ],
    series: [
      {
        name: "耗费时长",
        type: "line",
        symbolSize: 6,
        symbol: "circle",
        color: "#477BFF",
        markPoint: {
          label: {
            color: "#fff"
          },
          data: [
            {
              type: "max",
              name: "最大值"
            },
            {
              type: "min",
              name: "最小值"
            }
          ]
        },
        data: [
          10, 9, 2, 2, 2, 3, 4, 5, 7, 9, 11, 20, 14, 12, 7, 3, 4, 5, 8, 2, 6, 3,
          2, 10, 9, 5, 10, 9, 4, 8
        ]
      }
    ],
    addTooltip: true
  },
  {
    name: "click",
    callback: params => {
      console.log("click", params);
    }
  },
  {
    name: "contextmenu",
    callback: params => {
      console.log("contextmenu", params);
    }
  },
  // 点击空白处
  {
    type: "zrender",
    name: "click",
    callback: params => {
      console.log("点击空白处", params);
    }
  }
);

// const a = 1;
// useIntervalFn(() => {
//   if (a == xData.length - 24) {
//     a = 0;
//   }
//   getInstance()!.dispatchAction({
//     type: "dataZoom",
//     startValue: a,
//     endValue: a + 24
//   });
//   a++;
// }, 2000);

watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
  }
);
</script>

<template>
  <div ref="lineChartRef" style="width: 100%; height: 25vh" />
</template>
