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

    <!-- 控制面板 -->
    <div class="control-panel">
      <a-space>
        <a-button @click="playAnimation" :disabled="isPlaying">
          {{ isPlaying ? "暂停" : "播放" }}
        </a-button>
        <a-slider v-model:value="speed" :min="100" :max="2000" :step="100" style="width: 200px" />
        <span>速度: {{ speed }}ms</span>
      </a-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch, computed } from "vue";
import * as echarts from "echarts";
import { useThermalData } from "./composables/useThermalData";

const props = defineProps<{
  data?: number[][]; // 热力图数据 [时间索引, 数值]
  width?: number;
  height?: number;
  autoPlay?: boolean;
}>();

const chartRef = ref<HTMLDivElement>();
let chart: echarts.ECharts;

// 响应式数据管理
const { thermalData, timeRange, valueRange, updateData } = useThermalData();

console.log("thermalData", thermalData.value, timeRange.value);

const isPlaying = ref(false);
const speed = ref(500); // 动画速度
let animationTimer: number;

// 初始化图表
const initChart = () => {
  if (!chartRef.value) return;

  chart = echarts.init(chartRef.value);

  const option: echarts.EChartsOption = {
    tooltip: {
      position: "top",
      formatter: (params: any) => {
        const [timeIdx, valueIdx, intensity] = params.data;
        return `
          <div style="padding: 8px">
            <div>时间: ${timeIdx}ms</div>
            <div>数值: ${valueRange.value[valueIdx]}</div>
            <div>强度: ${intensity.toFixed(2)}</div>
          </div>
        `;
      },
    },
    grid: {
      height: "80%",
      top: "10%",
    },
    xAxis: {
      type: "category",
      data: timeRange.value,
      name: "时间 (ms)",
      nameLocation: "middle",
      nameGap: 30,
      splitLine: { show: true },
    },
    yAxis: {
      type: "category",
      data: valueRange.value,
      name: "数值",
      nameLocation: "middle",
      nameGap: 40,
      inverse: true,
    },
    visualMap: {
      min: -60,
      max: 20,
      calculable: true,
      orient: "vertical",
      left: "right",
      top: "center",
      inRange: {
        color: [
          "#313695",
          "#4575b4",
          "#74add1",
          "#abd9e9",
          "#e0f3f8",
          "#ffffbf",
          "#fee090",
          "#fdae61",
          "#f46d43",
          "#d73027",
          "#a50026",
        ],
      },
      textStyle: { color: "#666" },
    },
    series: [
      {
        name: "热力图",
        type: "heatmap",
        data: thermalData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        progressive: 1000,
        animation: false,
      },
    ],
  };

  chart.setOption(option);
};

// 动画控制
const playAnimation = () => {
  if (isPlaying.value) {
    stopAnimation();
  } else {
    isPlaying.value = true;
    animateData();
  }
};

const stopAnimation = () => {
  isPlaying.value = false;
  if (animationTimer) {
    clearTimeout(animationTimer);
  }
};

const animateData = () => {
  if (!isPlaying.value) return;

  // 模拟数据更新（实际项目中从API获取）
  updateData();

  // 更新图表
  chart.setOption({
    series: [
      {
        data: thermalData.value,
      },
    ],
  });

  animationTimer = setTimeout(animateData, speed.value);
};

// 响应式调整
watch(
  () => props.width,
  () => chart?.resize(),
);
watch(
  () => props.height,
  () => chart?.resize(),
);

onMounted(() => {
  initChart();
  if (props.autoPlay) {
    playAnimation();
  }
});

onUnmounted(() => {
  stopAnimation();
  chart?.dispose();
});
</script>

<style scoped>
.thermal-map-container {
  position: relative;
  width: 100%;
  height: 600px;
}

.thermal-chart {
  width: 100%;
  height: 100%;
}

.control-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 4px;
  z-index: 10;
}
</style>
