<script setup lang="ts">
import { ref, reactive, watch, onMounted, defineProps } from "vue";
import useCharts from "@/hooks/useEcharts";
import type { EChartsOption } from "echarts";

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      hours: ["00:00","01:00","02:00","03:00", "04:00","05:00","06:00","07:00", "08:00",  "09:00", "10:00", "11:00","12:00", 
      "13:00","14:00","15:00","16:00", "17:00","18:00","19:00","20:00","21:00","22:00","23:00", "24:00"],
      realTimeValues: [],
      averageValues: [],
    }),
  },
});

// 图表容器引用
const chartRef = ref<HTMLElement | null>(null);

// 交通流量趋势图表配置
const chartOptions: EChartsOption = {
  legend: {
    top: 0,
    right: 10,
    textStyle: {
      color: "#fff",
      fontSize: 26,
    },
    icon: "rect",
    itemWidth: 40,
    itemHeight: 10,
    data: [
      {
        name: "当天实时流量",
        itemStyle: {
          color: "#00ffff",
        },
      },
      {
        name: "同时段平均流量",
        itemStyle: {
          color: "#b5a8ff",
        },
      },
    ],
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: props.data.hours,
    axisLine: {
      lineStyle: {
        color: "#1e3d6f",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 22,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "rgba(30, 61, 111, 0.5)",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 22,
    },
  },
  series: [
    {
      name: "当天实时流量",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#00ffff",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(0, 255, 255, 0.3)" },
            { offset: 1, color: "rgba(0, 255, 255, 0.05)" },
          ],
        },
      },
      showSymbol: false,
      symbol: "none",
      data: props.data.realTimeValues,
    },
    {
      name: "同时段平均流量",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#b5a8ff",
      },
      showSymbol: false,
      symbol: "none",
      data: props.data.averageValues,
    },
  ],
};
// 确保图表在组件挂载后渲染
onMounted(() => {
  initCharts();
});

// 初始化图表
const { initCharts, setOptions } = useCharts(chartRef, chartOptions);
watch(
  () => props.data,
  () => {
    console.log(props.data, 'pppppp');
    setOptions({ // 手动刷新图表
      series: [{
        data: props.data.realTimeValues
      },{
        data: props.data.averageValues,
      }]
    });
  },
  { deep: true }
);
</script>

<template>
  <div class="trend-chart" ref="chartRef"></div>
</template>

<style scoped lang="scss">
.trend-chart {
  width: 100%;
  height: 100%;
  padding: 40px;
}
</style>
