<!--
 * @Author: 
 * @Date: 2023-03-01 19:20:44
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-01-03 15:42:58
 * @Description: tel files
 * @filePath: 
-->
<script setup lang="ts">
import { useIntervalFn } from "@vueuse/core";
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { line } from "@/api/welcome"
import {
  delay,
  useDark,
  useECharts,
  type EchartOptions,
  randomColor
} from "@pureadmin/utils";

const { isDark } = useDark();

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

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

const xData = (() => {
  const data: any[] = [];
  for (let i = 1; i < 31; i++) {
    data.push(`${i}日`);
  }
  return data;
})();
let pieColorList = [];
function getList() {
  line()
    .then((data) => {
      if (data.status == '1') {
        data.data.forEach(item => {
          let color = randomColor({ type: "hex" });
          let BGcolor = randomColor({ type: "hex" });
          pieColorList.push(item.name)
          item.type = "line",
            item.symbolSize = 10,
            item.symbol = "circle",
            item.color = BGcolor,
            item.markPoint = {
              label: {
                color: color
              },
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            }
        });
        setOptions(
          {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow"
              }
            },
            grid: {
              bottom: "20px",
              right: "10px"
            },
            legend: {
              //@ts-expect-error
              right: true,
              data: pieColorList
            },
            calculable: true,
            xAxis: [
              {
                triggerEvent: true,
                type: "category",
                splitLine: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                data: xData
              }
            ],
            yAxis: [
              {
                triggerEvent: true,
                type: "value",
                splitLine: {
                  show: false
                },
                axisLine: {
                  show: true
                }
              }
            ],
            dataZoom: [
              {
                type: "slider",
                show: false,
                realtime: true,
                startValue: 0,
                endValue: 24
              }
            ],
            series: data.data,
            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);
            }
          }
        );
      } else {
        console.log(data.message);
      };
    }).catch(err => {
      console.log(err);
    })
}
let 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());
  }
);
getList();
</script>

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