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

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      hours: [
        "00:00",
        "02:00",
        "04:00",
        "06:00",
        "08:00",
        "10:00",
        "12:00",
        "14:00",
        "16:00",
        "18:00",
        "20:00",
        "22:00",
      ],
      values: [
        1200, 1800, 1500, 2800, 3500, 3000, 3200, 3800, 4000, 4200, 3600, 3000,
      ],
    }),
  },
});

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

// 交通流量趋势图表配置
const chartOptions: EChartsOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    top: "5%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: props.data.hours,
    axisLine: {
      lineStyle: {
        color: "#1e3d6f",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 14,
    },
  },
  yAxis: {
    type: "value",
    splitLine: {
      lineStyle: {
        color: "rgba(30, 61, 111, 0.5)",
      },
    },
    axisLabel: {
      color: "#fff",
    },
  },
  series: [
    {
      name: "交通流量",
      type: "line",
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#00c8ff",
      },
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "rgba(0, 200, 255, 0.5)" },
            { offset: 1, color: "rgba(0, 200, 255, 0.1)" },
          ],
        },
      },
      symbol: "circle",
      symbolSize: 8,
      itemStyle: {
        color: "#00c8ff",
        borderColor: "#fff",
        borderWidth: 2,
      },
      data: props.data.values,
    },
  ],
};

// 初始化图表
const { initCharts } = useCharts(chartRef, chartOptions);

// 确保图表在组件挂载后渲染
onMounted(() => {
  initCharts();
});
</script>

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

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