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

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

const props = defineProps<{
  chartData: Array<{ x: number; y: number }>;
}>();

const chartContainer = ref<HTMLElement | null>(null);
let svg: d3.Selection<SVGSVGElement, unknown, null, undefined>;
let xScale: d3.ScaleLinear<number, number>;
let yScale: d3.ScaleLinear<number, number>;
let line: d3.Line<{ x: number; y: number }>;

const initChart = () => {
  if (!chartContainer.value) return;

  // 清除旧图表
  d3.select(chartContainer.value).select("svg").remove();

  // 创建SVG容器
  svg = d3.select(chartContainer.value)
    .append('svg')
    .attr('width', '100%')
    .attr('height', '100%');

  // 初始化比例尺
  xScale = d3.scaleLinear()
    .range([50, 750]);

  yScale = d3.scaleLinear()
    .range([400, 50]);

  // 初始化折线生成器
  line = d3.line<{ x: number; y: number }>()
    .x(d => xScale(d.x))
    .y(d => yScale(d.y));

  // 添加坐标轴容器
  svg.append('g')
    .attr('class', 'x-axis')
    .attr('transform', 'translate(0, 400)');

  svg.append('g')
    .attr('class', 'y-axis')
    .attr('transform', 'translate(50, 0)');

  // 创建路径元素
  svg.append('path')
    .attr('class', 'line')
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 2);
  svg.append("text")
    .attr("class", "x-axis-label")  // 修改为独立class
    .attr("transform", "translate(400,440)")
    .style("text-anchor", "middle")
    .text("时间 (s)");

  svg.append("text")
    .attr("class", "y-axis-label")
    .attr("transform", "rotate(-90) translate(-220, 15)") // 调整定位参数
    .style("text-anchor", "middle")
    .text("高度 (m)");
    svg.call(d3.zoom()
  .scaleExtent([1, 8])
  .on('zoom', (event) => {
    xScale.eventTransform.rescaleX(xScale);
    yScale.eventTransform.rescaleY(yScale);
    updateChart();
  }));
  // 首次绘制
  updateChart();
};

const updateChart = () => {
  svg.attr('key', Date.now());
  // 更新前先移除旧坐标轴
svg.select('.x-axis').remove();
svg.select('.y-axis').remove();

// 重新创建坐标轴容器
const xAxis = svg.append('g')
  .attr('class', 'x-axis')
  .attr('transform', `translate(0, ${yScale.range()[0]})`);

const yAxis = svg.append('g')
  .attr('class', 'y-axis')
  .attr('transform', `translate(${xScale.range()[0]}, 0)`);
  // 更新比例尺域
  const xDomain = props.chartData.length > 0 ? 
  d3.extent(props.chartData, d => d.x) : [0, 1];
xScale.domain(xDomain as [number, number]);
  yScale.domain([0, d3.max(props.chartData, d => d.y)!]);

  // 更新折线
  svg.select('.line')
    .datum(props.chartData)
    .transition()
    .duration(500)
    .attr('d', line);

  // 更新坐标轴
  svg.select('.x-axis')
    .transition()
    .duration(500)
    .call(d3.axisBottom(xScale));

  svg.select('.y-axis')
    .transition()
    .duration(500)
    .call(d3.axisLeft(yScale));
};

onMounted(initChart);
watch(() => props.chartData, updateChart, { deep: true });
</script>

<style scoped>
.chart-container {
  width: 800px;
  height: 600px;
  border: 1px solid #eee;
  margin: 20px;
  padding: 10px;
}

.x-axis text {
  font-size: 10px;
  transform: rotate(-45deg);
  text-anchor: end;
}

.x-axis-label,
.y-axis-label {
  font-size: 12px;
  fill: #666;
  font-family: Arial, sans-serif;
}
</style>