<template>
  <div class="budget-trend-chart">
    <Line :data="chartData" :options="chartOptions" />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Line } from 'vue-chartjs'
import {
  Chart as ChartJS,
  CategoryScale,
  Filler,
  Legend,
  LinearScale,
  LineElement,
  PointElement,
  Tooltip
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'

ChartJS.register(CategoryScale, LinearScale, LineElement, PointElement, Filler, Tooltip, Legend)

const props = defineProps({
  labels: { type: Array, required: true },
  budget: { type: Array, required: true },
  used: { type: Array, required: true }
})

const progress = useAnimationProgress([
  () => props.labels,
  () => props.budget,
  () => props.used
], 1000)

const scaleSeries = (series) =>
  series.map((value) => Number((Number(value || 0) * progress.value).toFixed(2)))

const chartData = computed(() => ({
  labels: props.labels,
  datasets: [
    {
      label: '预算',
      data: scaleSeries(props.budget),
      borderColor: '#2f7fd7',
      backgroundColor: 'rgba(47, 127, 215, 0.08)',
      borderDash: [7, 5],
      borderWidth: 2,
      pointRadius: 3,
      pointHoverRadius: 5,
      pointBackgroundColor: '#ffffff',
      pointBorderColor: '#2f7fd7',
      pointBorderWidth: 2,
      tension: 0.34,
      fill: false
    },
    {
      label: '已发生',
      data: scaleSeries(props.used),
      borderColor: '#13a66b',
      backgroundColor: 'rgba(19, 166, 107, 0.12)',
      borderWidth: 2,
      pointRadius: 3,
      pointHoverRadius: 5,
      pointBackgroundColor: '#ffffff',
      pointBorderColor: '#13a66b',
      pointBorderWidth: 2,
      tension: 0.34,
      fill: false
    }
  ]
}))

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false
  },
  animation: {
    duration: 760,
    easing: 'easeOutQuart'
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      backgroundColor: '#ffffff',
      borderColor: '#e2e8f0',
      borderWidth: 1,
      bodyColor: '#475569',
      titleColor: '#0f172a',
      padding: 12,
      displayColors: true,
      callbacks: {
        label(context) {
          const value = Number(context.parsed.y || 0)
          return `${context.dataset.label}: ${value.toLocaleString('zh-CN')} 元`
        }
      }
    }
  },
  scales: {
    x: {
      grid: { display: false },
      ticks: {
        color: '#64748b',
        font: { size: 12 }
      },
      border: { display: false }
    },
    y: {
      beginAtZero: true,
      max: 12000000,
      grid: {
        color: '#edf2f7',
        drawTicks: false
      },
      border: { display: false },
      ticks: {
        color: '#64748b',
        font: { size: 12 },
        stepSize: 3000000,
        callback(value) {
          if (value === 0) return '0'
          return `${Number(value) / 10000}万`
        }
      }
    }
  }
}
</script>

<style scoped>
.budget-trend-chart {
  position: relative;
  width: 100%;
  height: 220px;
}
</style>
