<script setup lang="ts">
import { querySiteStats } from '@/api/halo-base/stats'
import { formatNumberUnit } from '@/utils/base/digital'
import type { SiteStatsVo } from '@halo-dev/api-client'

const { loading, error, data, run } = useRequest<SiteStatsVo>(querySiteStats, { loadingToast: false, loadingToastContent: '加载中...', loadingToastMask: true })

const stats = computed(() => {
  return {
    post: formatNumberUnit(data.value?.post || 0),
    comment: formatNumberUnit(data.value?.comment || 0),
    upvote: formatNumberUnit(data.value?.upvote || 0),
    visit: formatNumberUnit(data.value?.visit || 0),
    category: formatNumberUnit(data.value?.category || 0),
  }
})

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

<template>
  <view class="uh-shadow-xs box-border flex flex-col items-center gap-y-2 rounded-2xl bg-white p-4">
    <view class="w-full flex items-center justify-between gap-x-2">
      <image
        class="uh-shadow-xs h-11 w-11 shrink-0 border-2 border-white rounded-full border-solid"
        src="https://www.xiaoxiaomo.cn/logo.jpg" mode="scaleToFill"
      />
      <view class="h-full flex flex-1 flex-col justify-between gap-y-1">
        <view class="text-sm text-gray-900 font-bold">
          小莫唐尼
        </view>
        <view class="line-clamp-1 text-xs text-gray-500">
          一个爱凑热闹，喜欢捣鼓前端的码农。
        </view>
      </view>
      <view class="h-full shrink-0 rounded-3xl bg-[#1A1A1A] px-4 py-2 text-xs text-white">
        联系我
      </view>
    </view>
    <view class="my-1 h-1px w-full bg-gray-50" />
    <view class="grid grid-cols-5 w-full gap-x-4">
      <view class="flex flex-col items-center justify-center gap-y-0.5">
        <text class="text-sm text-gray-900 font-bold">{{ stats.post }}</text>
        <text class="text-xs text-gray-600">笔记</text>
      </view>
      <view class="flex flex-col items-center justify-center gap-y-0.5">
        <text class="text-sm text-gray-900 font-bold">{{ stats.visit }}</text>
        <text class="text-xs text-gray-600">访客</text>
      </view>
      <view class="flex flex-col items-center justify-center gap-y-0.5">
        <text class="text-sm text-gray-900 font-bold">{{ stats.category }}</text>
        <text class="text-xs text-gray-600">分类</text>
      </view>
      <view class="flex flex-col items-center justify-center gap-y-0.5">
        <text class="text-sm text-gray-900 font-bold">{{ stats.comment }}</text>
        <text class="text-xs text-gray-600">评论</text>
      </view>
      <view class="flex flex-col items-center justify-center gap-y-0.5">
        <text class="text-sm text-gray-900 font-bold">{{ stats.upvote }}</text>
        <text class="text-xs text-gray-600">点赞</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.uh-shadow-xs {
  box-shadow: 0 0 24rpx rgba(0, 0, 0, 0.035);
}
</style>
