<template>
  <div class="wrap">
    <el-card>
      <template #header>
        <div class="h">
          <div class="title">统计</div>
          <el-button @click="refresh">刷新</el-button>
        </div>
      </template>

      <el-row :gutter="12">
        <el-col :span="6"><el-statistic title="总单词" :value="stats.total_words ?? 0" /></el-col>
        <el-col :span="6"><el-statistic title="已掌握" :value="stats.mastered_words ?? 0" /></el-col>
        <el-col :span="6"><el-statistic title="待复习" :value="stats.need_review ?? 0" /></el-col>
        <el-col :span="6"><el-statistic title="今日复习" :value="stats.today_reviewed ?? 0" /></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getStatistics } from '../services/api'

import type { Stats } from '../services/api'

const stats = ref<Stats>({
  total_words: 0,
  mastered_words: 0,
  need_review: 0,
  today_reviewed: 0
})
async function refresh() {
  const res = await getStatistics()
  stats.value = res.data ?? res
}

onMounted(() => refresh().catch(console.error))
</script>

<style scoped>
.wrap{padding:24px;}
.h{display:flex; align-items:center; justify-content:space-between;}
.title{font-size:22px; font-weight:700;}
</style>
