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

// 定义数据点类型接口
interface Point {
  name: string;
  weeklyAvg: number;
  dailyTotal: number;
}

const props = defineProps({
  data: {
    type: Array as () => Point[],
    default: () => [
      { name: "连镇", weeklyAvg: 19500, dailyTotal: 16500 },
      { name: "扬王", weeklyAvg: 12000, dailyTotal: 14500 },
      { name: "小庄", weeklyAvg: 10800, dailyTotal: 12300 },
      { name: "寨子", weeklyAvg: 21500, dailyTotal: 26800 },
      { name: "盐山", weeklyAvg: 19700, dailyTotal: 22000 },
    ],
  },
});

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

// 监测点车流图表配置
const chartOptions: EChartsOption = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    textStyle: {
      fontSize: 22,
      fontWeight: "normal",
    },
    backgroundColor: "rgba(0,0,0,0.7)",
    borderColor: "rgba(0,255,255,0.5)",
    borderWidth: 1,
  },
  legend: {
    data: ["按周同环比平均流量", "当日累计"],
    textStyle: {
      color: "#fff",
      fontSize: 26,
    },
    top: 10,
    right: 10,
  },
  grid: {
    left: "5%",
    right: "5%",
    bottom: "5%",
    top: "20%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: props.data.map((point: Point) => point.name),
    axisLine: {
      lineStyle: {
        color: "#1e3d6f",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 22,
    },
  },
  yAxis: {
    type: "value",
    nameTextStyle: {
      color: "#fff",
      fontSize: 22,
      padding: [0, 30, 0, 0],
    },
    splitLine: {
      lineStyle: {
        color: "rgba(30, 61, 111, 0.5)",
      },
    },
    axisLabel: {
      color: "#fff",
      fontSize: 22,
    },
    max: 30000,
  },
  series: [
    {
      name: "按周同环比平均流量",
      type: "bar",
      barWidth: 20,
      label: {
        position: "top",
        color: "#fff",
        fontSize: 14,
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#00ffff" },
            { offset: 1, color: "#00c8ff" },
          ],
        },
      },
      data: props.data.map((point: Point) => point.weeklyAvg),
    },
    {
      name: "当日累计",
      type: "bar",
      barWidth: 20,
      label: {
        position: "top",
        color: "#fff",
        fontSize: 14,
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#a454ff" },
            { offset: 1, color: "#8a3df3" },
          ],
        },
      },
      data: props.data.map((point: Point) => point.dailyTotal),
    },
  ],
};

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

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

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

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