<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useApi } from '~/composables/useApi'

const { get } = useApi()

const stats = ref([
  { label: '今日工单', value: 0, suffix: '单' },
  { label: '进行中', value: 0, suffix: '单' },
  { label: '服务完成率', value: 0, suffix: '%' },
  { label: '异常工单', value: 0, suffix: '单' },
])

function animate(el: { value: number }, target: number, duration = 1200) {
  const start = performance.now()
  function tick(now: number) {
    const p = Math.min((now - start) / duration, 1)
    const rounded = Math.round(target * p * 10) / 10
    if (target - rounded < 1) { el.value = target; return }
    el.value = rounded
    if (p < 1) requestAnimationFrame(tick)
  }
  requestAnimationFrame(tick)
}

onMounted(async () => {
  try {
    const [d, q] = await Promise.all([
      get<any>('/admin/dashboard').catch(() => ({})),
      get<any>('/analytics/quality').catch(() => ({})),
    ])
    const targets = [
      (d?.todayOrders as number) || 0,
      (d?.inProgress as number) || 0,
      (q?.serviceCompletionRate as number) || 0,
      (d?.exceptions as number) || 0,
    ]
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          stats.value.forEach((s, i) => { s.value = 0; animate(s, targets[i]) })
          obs.disconnect()
        }
      })
    }, { threshold: 0.3 })
    const el = document.querySelector('#dashboard-section')
    if (el) obs.observe(el)
  } catch (_) {}
})
</script>

<template>
  <div id="dashboard-section" class="space-y-6">
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
      <div v-for="s in stats" :key="s.label" class="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-50">
        <div class="text-3xl font-bold font-mono text-primary mb-2">
          {{ s.value }}{{ s.suffix }}
        </div>
        <div class="text-sm text-text-secondary">{{ s.label }}</div>
      </div>
    </div>
    <img src="https://loremflickr.com/960/300/technology" alt="数据看板示意图（示意素材，待替换）"
      class="w-full rounded-xl shadow-sm" width="960" height="300" loading="lazy" />
  </div>
</template>
