<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(defineProps<{
  data: { date: string; value: number }[]
  color?: string
  height?: number
  maxPoints?: number
}>(), {
  color: 'var(--accent-cyan)',
  height: 60,
  maxPoints: 30
})

const displayData = computed(() => {
  if (props.data.length <= props.maxPoints) return props.data
  // 采样：均匀抽取
  const step = Math.ceil(props.data.length / props.maxPoints)
  return props.data.filter((_, i) => i % step === 0)
})

const maxValue = computed(() => Math.max(...displayData.value.map(d => d.value), 1))

const points = computed(() => {
  return displayData.value.map((d, i) => {
    const x = (i / (displayData.value.length - 1)) * 100
    const y = 100 - (d.value / maxValue.value * 100)
    return `${x},${y}`
  }).join(' ')
})
</script>

<template>
  <div class="mini-line-chart" :style="{ '--chart-height': height + 'px', '--chart-color': color }">
    <svg :viewBox="`0 0 100 100`" preserveAspectRatio="none" class="chart-svg">
      <!-- 背景网格 -->
      <line x1="0" y1="50" x2="100" y2="50" class="grid-line" />
      <!-- 折线 -->
      <polyline :points="points" class="line" />
      <!-- 数据点 -->
      <circle
        v-for="(d, i) in displayData"
        :key="i"
        :cx="(i / (displayData.length - 1)) * 100"
        :cy="100 - (d.value / maxValue * 100)"
        r="2"
        class="dot"
      />
    </svg>
  </div>
</template>

<style scoped>
.mini-line-chart {
  width: 100%;
  height: var(--chart-height);
}

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

.grid-line {
  stroke: var(--border-dim);
  stroke-width: 0.5;
}

.line {
  fill: none;
  stroke: var(--chart-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.dot {
  fill: var(--chart-color);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.mini-line-chart:hover .dot {
  opacity: 1;
}
</style>
