// hooks/useCountUp.ts
import { ref, watch } from 'vue'
import { useRafFn } from '@vueuse/core'
interface UseCountUpOptions {
  startVal?: number    // 起始值，默認(rèn)為 0
  endVal: number       // 結(jié)束值
  duration?: number    // 動(dòng)畫(huà)時(shí)長(zhǎng)（毫秒），默認(rèn) 1000
  autoplay?: boolean   // 是否自動(dòng)開(kāi)始，默認(rèn) true
}
export function useCountUp(options: UseCountUpOptions) {
  const {
    startVal = 0,
    endVal,
    duration = 1000,
    autoplay = true
  } = options
  const currentValue = ref(startVal)
  const isAnimating = ref(false)
  let startTime = 0
  let startValue = startVal
  let endValue = endVal
  let animDuration = duration
  // 核心動(dòng)畫(huà)循環(huán)
  const { pause, resume, isActive } = useRafFn(({ timestamp }) => {
    if (!startTime) startTime = timestamp
    const elapsed = timestamp - startTime
    let progress = Math.min(1, elapsed / animDuration)
    // 使用 easeOutCubic 緩動(dòng)，讓動(dòng)畫(huà)更自然
    const easeProgress = 1 - Math.pow(1 - progress, 3)
    const newVal = startValue + (endValue - startValue) * easeProgress
    currentValue.value = newVal
    if (progress >= 1) {
      currentValue.value = endValue
      pause()               // 動(dòng)畫(huà)結(jié)束，停止循環(huán)
      isAnimating.value = false
    }
  }, { immediate: false })
  // 開(kāi)始動(dòng)畫(huà)（可指定新的結(jié)束值和時(shí)長(zhǎng)）
  const start = (newEndVal?: number, newDuration?: number) => {
    if (newEndVal !== undefined) endValue = newEndVal
    if (newDuration !== undefined) animDuration = newDuration
    startValue = currentValue.value   // 從當(dāng)前值開(kāi)始
    startTime = 0
    isAnimating.value = true
    resume()
  }
  // 重置到起始值并停止動(dòng)畫(huà)
  const reset = () => {
    pause()
    isAnimating.value = false
    currentValue.value = startVal
    startTime = 0
  }
  // 自動(dòng)開(kāi)始
  if (autoplay) {
    start()
  }
  // 監(jiān)聽(tīng)外部 endVal 變化，自動(dòng)觸發(fā)新動(dòng)畫(huà)
  watch(() => endVal, (newVal) => {
    if (!isAnimating.value) {
      start(newVal)
    } else {
      // 如果動(dòng)畫(huà)進(jìn)行中，只更新目標(biāo)值，不中斷當(dāng)前動(dòng)畫(huà)
      endValue = newVal
    }
  })
  return {
    value: currentValue,     // 當(dāng)前動(dòng)畫(huà)值（響應(yīng)式）
    isAnimating,             // 是否正在動(dòng)畫(huà)中
    start,                   // 開(kāi)始/重新開(kāi)始
    pause,                   // 暫停
    resume,                  // 恢復(fù)
    reset,                   // 重置
    isActive                 // useRafFn 內(nèi)部狀態(tài)
  }
}

<!-- CountUp.vue -->
<template>
  <span ref="el">{{ formattedValue }}</span>
</template>
<script setup lang="ts">
import { computed, watch } from 'vue'
import { useCountUp } from './hooks/useCountUp'
const props = withDefaults(defineProps<{
  endVal: number
  duration?: number
  decimalPlaces?: number
  autoplay?: boolean
  useGrouping?: boolean
  prefix?: string
  suffix?: string
}>(), {
  duration: 1000,
  decimalPlaces: 0,
  autoplay: true,
  useGrouping: false,
  prefix: '',
  suffix: ''
})
const emit = defineEmits<{
  (e: 'finished'): void
  (e: 'update:modelValue', value: number): void
}>()
const {
  value,
  isAnimating,
  start,
  pause,
  resume,
  reset
} = useCountUp({
  startVal: 0,
  endVal: props.endVal,
  duration: props.duration,
  autoplay: props.autoplay
})
// 格式化顯示
const formattedValue = computed(() => {
  let num = value.value.toFixed(props.decimalPlaces)
  if (props.useGrouping) {
    num = num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  return `${props.prefix}${num}${props.suffix}`
})
// 動(dòng)畫(huà)結(jié)束時(shí)觸發(fā)
watch(isAnimating, (val) => {
  if (!val) emit('finished')
})
// 支持 v-model
watch(value, (newVal) => {
  emit('update:modelValue', newVal)
})
// 暴露控制方法給父組件
defineExpose({
  start,
  pause,
  resume,
  reset,
  isAnimating
})
</script>

<template>
  <div>
    <CountUp
      ref="countUpRef"
      :endVal="target"
      :duration="2000"
      :decimalPlaces="0"
      @finished="onFinished"
    />
    <div style="margin-top: 16px; display: flex; gap: 8px;">
      <button @click="countUpRef?.start(9999, 1000)">跳到 9999 (1秒)</button>
      <button @click="countUpRef?.pause()">暫停</button>
      <button @click="countUpRef?.resume()">恢復(fù)</button>
      <button @click="countUpRef?.reset()">重置</button>
      <button @click="target = 5000">改變目標(biāo)值為 5000</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import CountUp from './components/CountUp.vue'
const countUpRef = ref<InstanceType<typeof CountUp>>()
const target = ref(2025)
const onFinished = () => {
  console.log('動(dòng)畫(huà)完成')
}
</script>