<template>
  <div class="container-echart">
    <div :id="'echart' + timeId" class="interface-echart"></div>
  </div>
</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { EChartsType } from "echarts";
import { onMounted, ref, watch, onBeforeUnmount, onUnmounted } from "vue";

const props = defineProps({
  flipData: {
    type: Array,
    default: true,
  },
  waterImmersion: {
    type: Array,
    default: true,
  },
  waterLevel: {
    type: Array,
    default: true,
  },
});

let myEchart: EChartsType;
const timeId = ref(Math.floor(new Date().getTime() * Math.random())); // 使该图表保持唯id
const myEchartData = () => {
  const option = {
    tooltip: { trigger: "axis" },
    legend: { data: ["翻转", "水浸", "水位"] },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "10%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ],
      axisLine: { lineStyle: { color: "#666" } },
    },

    yAxis: {
      type: "value",
      axisLine: { lineStyle: { color: "#666" } },
      splitLine: { show: true, lineStyle: { type: "dashed" } }, // 网格线
    },

    series: [
      {
        name: "翻转",
        type: "line",
        data: props.flipData,
        // itemStyle: { color: "#5470C6" }, // 自定义颜色
        // smooth: true, // 平滑曲线
        symbol: "circle", // 数据点形状
        symbolSize: 8,
      },
      {
        name: "水浸",
        type: "line",
        data: props.waterImmersion,
        // smooth: true,
        symbol: "rect",
        symbolSize: 8,
      },
      {
        name: "水位",
        type: "line",
        data: props.waterLevel,
        // smooth: true,
        symbol: "rect",
        symbolSize: 8,
      },
    ],
  };
  // { notMerge: true } 解决删除数据时,数据不刷新的问题
  myEchart.setOption(option, { notMerge: true });
};
// 在组件 setup() 中
const timer = ref(null);
// 统一监听多个 props 的变化
watch(
  [() => props.flipData, () => props.waterImmersion, () => props.waterLevel],
  () => {
    // 防抖处理：清除之前的定时器
    if (timer.value) {
      clearTimeout(timer.value);
      timer.value = null;
    }
    // 设置新的定时器
    timer.value = setTimeout(() => {
      myEchartData();
    }, 500);
  },
  { deep: true } // 保持深度监听
);

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer.value) {
    clearTimeout(timer.value);
  }
});
onMounted(() => {
  setTimeout(() => {
    const dom = document.getElementById(`echart${timeId.value}`) as any;
    myEchart = echarts.init(dom);
    myEchartData();
  }, 500);

  // 当窗口发生变化时
  window.addEventListener("resize", () => {
    myEchart.resize();
  });
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", () => {
    myEchart.resize();
  });
});
</script>
<style scoped lang="scss">
.container-echart {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.interface-echart {
  width: 100%;
  height: 100%;
}
</style>
