<template>
  <div ref="chartRef" style="width: 100%; height: 400px"></div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  import type { EChartsOption } from 'echarts';

  // 定义接收的数据类型
  interface BuildingData {
    buildingNo: number | string;
    count: number;
  }

  // 定义 props
  const props = defineProps<{
    data: BuildingData[];
  }>();

  // 图表容器引用
  const chartRef = ref<HTMLElement | null>(null);
  let chartInstance: echarts.ECharts | null = null;

  // 渲染图表
  const renderChart = () => {
    if (!chartRef.value) return;

    // 销毁旧实例
    if (chartInstance) {
      chartInstance.dispose();
    }

    // 初始化图表实例
    chartInstance = echarts.init(chartRef.value);

    // 处理数据
    const categories = props.data.map((item) => `${item.buildingNo}号楼`);
    const values = props.data.map((item) => item.count);

    // 图表配置项
    const option: EChartsOption = {
      title: {
        text: '受灾位置分布',
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        formatter: (params) => {
          const param = params[0];
          return `${param.name}<br/>数量: ${param.value}`;
        },
      },
      grid: {
        left: '8%',
        right: '10%',
        top: '14%',
        bottom: '6%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        name: '数量',
        nameGap: 16,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#bbbbbb',
          },
        },
        axisTick: {
          show: true,
        },
        splitLine: {
          lineStyle: {
            color: '#dfdfdf',
            type: 'dashed',
          },
        },
      },
      yAxis: {
        type: 'category',
        data: categories,
        axisLine: {
          show: true,
          lineStyle: {
            color: '#bbbbbb',
          },
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          name: '楼宇数量统计',
          type: 'bar',
          data: values,
          barWidth: '18px',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#5ab1ef' },
              { offset: 1, color: '#87cfff' },
            ]),
          },
          label: {
            show: true,
            position: 'right',
            color: '#000',
            fontSize: 12,
          },
          emphasis: {
            focus: 'series',
          },
        },
      ],
    };

    // 应用配置
    chartInstance.setOption(option);

    // 初始渲染后立即 resize 一次，确保尺寸正确
    chartInstance.resize();
  };

  // 处理窗口尺寸变化
  const handleResize = () => {
    if (chartInstance) {
      chartInstance.resize({
        animation: {
          duration: 100,
        },
      });
    }
  };

  // 组件挂载后初始化图表
  onMounted(() => {
    renderChart();
    window.addEventListener('resize', handleResize);
  });

  // 监听数据变化，重新渲染
  watch(
    () => props.data,
    () => {
      renderChart();
    },
    { deep: true },
  );

  // 组件卸载前清理
  onUnmounted(() => {
    // 移除 resize 监听
    window.removeEventListener('resize', handleResize);
    // 销毁图表实例
    if (chartInstance) {
      chartInstance.dispose();
      chartInstance = null;
    }
  });
</script>

<style scoped lang="scss"></style>
