<template>
  <div>
    <h2 style="margin-bottom:24px">控制台</h2>

    <el-row :gutter="16">
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="我的应用" :value="stats.appCount">
            <template #prefix><el-icon><Grid /></el-icon></template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="已开启服务" :value="stats.serviceCount">
            <template #prefix><el-icon><Setting /></el-icon></template>
          </el-statistic>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <el-statistic title="子账号" :value="stats.subAccountCount">
            <template #prefix><el-icon><User /></el-icon></template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top:24px">
      <template #header>快速开始</template>
      <el-timeline>
        <el-timeline-item timestamp="Step 1" placement="top">
          创建应用，填写基本信息和包名
        </el-timeline-item>
        <el-timeline-item timestamp="Step 2" placement="top">
          在应用详情中选择平台（Android / iOS / 鸿蒙），开启所需服务
        </el-timeline-item>
        <el-timeline-item timestamp="Step 3" placement="top">
          获取 AppKey 和 ServiceKey，集成 SDK
        </el-timeline-item>
      </el-timeline>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { dashboardApi } from '@/api/dashboard'

const stats = ref({ appCount: 0, serviceCount: 0, subAccountCount: 0 })

onMounted(async () => {
  try {
    const res = await dashboardApi.stats()
    stats.value = res.data.data
  } catch {}
})
</script>
