<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 text-base font-bold text-white">本月下载量</div>
      <div class="mr-1 text-2xl font-bold text-white tabular-nums">{{ info.total }}</div>
    </div>

    <div class="flex min-h-[100px] flex-col gap-3">
      <div
        v-for="item in displayStats"
        :key="item.platform"
        class="flex items-center justify-between text-white/90"
      >
        <div class="flex items-center gap-3">
          <component :is="item.icon" class="text-white" />
        </div>
        <div class="mr-1 text-base font-semibold tabular-nums">
          <span
            v-if="loading"
            class="inline-block h-4 w-8 animate-pulse rounded bg-white/20"
          ></span>
          <span v-else>{{ item.visits }}</span>
        </div>
      </div>
    </div>

    <div class="mt-2 text-xs text-white/40">相比前一个月 {{ info.comparison_rate }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import request from '@/utils/request'
import IosIcon from './Group 230.svg?component'
import WinIcon from './Group 231.svg?component'
import AndroidIcon from './Group 232.svg?component'
import MacIcon from './Group 233.svg?component'

const loading = ref(false)
const info = ref({
  comparison_rate: '--',
  total: 0,
  platforms: {},
})
const platformList = [
  { platform: 'ios', icon: IosIcon },
  { platform: 'windows', icon: WinIcon },
  { platform: 'android', icon: AndroidIcon },
  { platform: 'mac', icon: MacIcon },
]

const displayStats = computed(() => {
  return platformList.map((p) => {
    const visits = info.value?.platforms[p.platform] || 0
    return {
      ...p,
      visits: visits || 0,
    }
  })
})

async function fetchDownloads() {
  loading.value = true
  try {
    const res: any = await request.get('/api/v1/public/user/agent/downloads')
    info.value = res
  } finally {
    loading.value = false
  }
}

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