<template>
  <div class="gauge-chart">
    <div class="gauge-body">
      <Doughnut :data="chartData" :options="chartOptions" />
      <div class="gauge-center">
        <strong>{{ animatedRatio }}%</strong>
        <span>已执行</span>
      </div>
    </div>
    <div class="gauge-summary">
      <div>
        <span>预算总额</span>
        <strong>{{ total }}</strong>
      </div>
      <div>
        <span>已执行</span>
        <strong>{{ used }}</strong>
      </div>
      <div>
        <span>剩余可用</span>
        <strong>{{ left }}</strong>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Doughnut } from 'vue-chartjs'
import {
  Chart as ChartJS,
  ArcElement,
  Tooltip
} from 'chart.js'
import { useAnimationProgress } from '../../composables/useAnimationProgress.js'

ChartJS.register(ArcElement, Tooltip)

const props = defineProps({
  ratio: { type: [Number, String], required: true },
  total: { type: String, required: true },
  used: { type: String, required: true },
  left: { type: String, required: true }
})

const ratioValue = computed(() => Number(props.ratio))
const progress = useAnimationProgress([() => props.ratio], 1150)
const animatedRatio = computed(() => Number((ratioValue.value * progress.value).toFixed(0)))

const chartData = computed(() => ({
  labels: ['已执行', '剩余'],
  datasets: [{
    data: [animatedRatio.value, 100 - animatedRatio.value],
    backgroundColor: ['#10b981', '#e2e8f0'],
    borderWidth: 0
  }]
}))

const chartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  rotation: -90,
  circumference: 180,
  cutout: '65%',
  animation: {
    animateRotate: true,
    duration: 900,
    easing: 'easeOutQuart'
  },
  plugins: {
    legend: { display: false },
    tooltip: { enabled: false }
  }
}
</script>

<style scoped>
.gauge-chart {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.gauge-body {
  position: relative;
  height: 100px;
  width: 100%;
}

.gauge-center {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  animation: gaugeCenterIn 620ms ease both;
  animation-delay: 360ms;
}

.gauge-center strong {
  color: #10b981;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.gauge-center span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
}

.gauge-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
  animation: gaugeSummaryIn 560ms ease both;
  animation-delay: 500ms;
}

.gauge-summary span {
  display: block;
  color: #64748b;
  font-size: 12px;
}

.gauge-summary strong {
  display: block;
  margin-top: 4px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
}

@keyframes gaugeCenterIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes gaugeSummaryIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gauge-center,
  .gauge-summary {
    animation: none;
  }
}
</style>
