<template>
  <div ref="chartRef" :id="props.id" class="barChart"></div>
</template>
<script setup lang="ts">
  import * as echarts from 'echarts/core';
  import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
  import { BarChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  import { onMounted, onUnmounted, ref, watch } from 'vue';
  import type { BarChartData } from '../types';

  const props = defineProps<{
    data: BarChartData;
    id: string;
  }>();

  echarts.use([TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]);
  const chartRef = ref<HTMLElement | null>(null);
  let chartElement;

  onMounted(() => {
    chartElement = echarts.init(chartRef.value!);
    if (chartElement) {
      initChart(chartElement);
      drawChart(chartElement);
    }
  });

  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    if (chartElement) {
      chartElement.dispose();
    }
  });

  const drawChart = (chart: echarts.ECharts) => {
    if (!chart) return;
    const chartOption = {
      xAxis: [
        {
          data: props.data.category,
        },
      ],
      series: [
        {
          data: props.data.value,
        },
      ],
    };
    chart.setOption(chartOption);
  };

  const initChart = (chart: echarts.ECharts) => {
    if (!chart) return;
    const chartOption = {
      tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '5%',
        right: '5%',
        top: '35px',
        bottom: '5%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: props.data.category,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            color: '#909399',
            fontFamily: 'HelveticaNeue',
            fontSize: 12,
          },
        },
      ],
      yAxis: [
        {
          name: '近7天车流趋势',
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#E8E8E8',
              type: 'dashed',
              width: 1,
            },
          },
          axisLabel: {
            color: '#909399',
            fontFamily: 'HelveticaNeue',
            fontSize: 12,
          },
          nameTextStyle: {
            verticalAlign: 'bottom',
            padding: [0, 0, 5, 30],
          },
        },
      ],
      series: [
        {
          name: '车流量',
          type: 'bar',
          barWidth: '30%',
          data: props.data.value,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#38C3FE' },
              { offset: 1, color: '#1777FF' },
            ]),
          },
          emphasis: {
            label: {
              show: true,
              position: 'top',
              color: '#38C3FE',
            },
          },
        },
      ],
    };
    chart.setOption(chartOption);
    window.addEventListener('resize', handleResize);
  };

  // 处理窗口大小变化
  const handleResize = () => {
    if (chartElement) {
      chartElement.resize();
    }
  };

  watch(
    () => props.data,
    () => {
      drawChart(chartElement);
    },
  );
</script>

<style scoped lang="scss">
  .barChart {
    height: 100%;
  }
</style>
