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

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

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

/**
 * 生成模拟热力图数据
 * @returns 热力图数据数组，格式为[x, y, value]
 */
const generateHeatmapData = () => {
  const data: [number, number, number][] = [];
  const rows = 40; // Y轴数据点数量
  const cols = 10; // X轴数据点数量
  
  // 生成模拟的热力图数据
  for (let x = 0; x < cols; x++) {
    for (let y = -rows / 2; y <= rows / 2; y++) {
      // 创建一个中心热区和对称的模式
      const value = Math.sin(y * 0.2) * Math.cos(x * 0.5) * 10 - Math.abs(y) * 0.5;
      // 为了模拟图片效果，添加一些随机噪声和特定模式
      let finalValue = value;
      
      // 在中心区域添加热点
      if (Math.abs(y) < 5) {
        finalValue = -20 - Math.abs(x - 5) * 2;
      }
      
      // 添加一些随机数据点来模拟图片中的亮点
      if (Math.random() > 0.85) {
        finalValue += Math.random() * 15;
      }
      
      data.push([x, y, finalValue]);
    }
  }
  
  return data;
};

/**
 * 初始化图表
 */
const initChart = () => {
  if (!chartRef.value) return;
  
  // 创建ECharts实例
  chartInstance = echarts.init(chartRef.value);
  
  // 获取热力图数据
  const heatmapData = generateHeatmapData();
  
  // 配置项
  const option = {
    tooltip: {
      position: 'top',
      formatter: (params: any) => {
        return `Time: ${params.value[0].toFixed(1)}s\u003cbr/\u003eValue: ${params.value[2].toFixed(2)}dB`;
      }
    },
    grid: {
      height: '80%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: Array.from({ length: 10 }, (_, i) => i.toFixed(1)),
      name: 'Time (s)',
      nameLocation: 'middle',
      nameGap: 30,
      splitArea: {
        show: true
      }
    },
    yAxis: {
      type: 'category',
      data: Array.from({ length: 41 }, (_, i) => (i - 20).toString()),
      splitArea: {
        show: true
      }
    },
    visualMap: {
      min: -60,
      max: 20,
      calculable: true,
      orient: 'vertical',
      left: 'right',
      top: 'middle',
      inRange: {
        color: ['#000033', '#000099', '#0066FF', '#00CCFF', '#33FFCC', '#66FF66', '#CCFF33', '#FFCC00', '#FF6600', '#FF0000']
      },
      text: ['20', '-60'],
      formatter: '{value} dB'
    },
    series: [
      {
        name: 'Signal Strength',
        type: 'heatmap',
        data: heatmapData,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  
  // 设置配置项
  chartInstance.setOption(option);
};

/**
 * 响应式调整图表大小
 */
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

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

// 组件卸载时清理
onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});
</script>

<style scoped>
.heatmap-container {
  width: 100%;
  height: 100%;
  min-height: 500px;
}

.heatmap-chart {
  width: 100%;
  height: 100%;
}
</style>