<template>
  <div
    class="lucid-glass-bar flex w-full flex-col justify-between rounded-4xl! border-1 border-white px-6 py-7"
  >
    <div class="mb-2 flex items-center justify-between border-b-1 border-dashed pb-3">
      <div class="relative ml-1 pb-2 text-base font-bold text-white">本月链接转化</div>
    </div>

    <div class="flex flex-col">
      <div
        v-for="item in data"
        :key="item.label"
        class="flex items-center justify-between text-white/90"
      >
        <span class="text-xs font-medium">{{ item.label }}</span>
        <span class="text-base font-bold tabular-nums">{{ item.value }}</span>
      </div>
    </div>

    <div class="mt-1 text-xs text-white/40">相比前一个月 {{ growthRate }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import request from '@/utils/request'

const data = ref([
  { label: '点击量', value: 0, key: 'clicks' },
  { label: '浏览量', value: 0, key: 'views' },
  { label: '付费用户数', value: 0, key: 'paid_count' },
])

const growthRate = ref('N/A')

async function fetchStats() {
  try {
    const res: any = await request.get('/api/v1/public/user/agent/realtime')
    data.value = data.value.map((item) => ({
      ...item,
      value: res[item.key] || 0,
    }))
    growthRate.value = res.paid_growth_rate || 'N/A'
  } catch (error) {
    console.error('Fetch proxy data error:', error)
  }
}

onMounted(() => {
  fetchStats()
})
</script>
