<script setup lang="ts">
import Statistics from '../components/Statistics.vue'
import Newest from '../components/Newest.vue'
import Hottest from '../components/Hottest.vue'
import RecentLearning from '../components/RecentLearning.vue'
import { getUtilData } from '../api'
const flag = ref(false)
const data = reactive<{ statistics: object[]; latest: object[]; hot: object[]; learn: object[] }>({
  statistics: [],
  latest: [],
  hot: [],
  learn: []
})

// 所有数据
getUtilData().then(res => {
  flag.value = true
  let { latest = [], hot = [], learn = [] }: { latest: object[]; hot: object[]; learn: object[] } = res.data
  if (learn === null) learn = []
  // 统计资源数据整合
  const statisticsData = [
    { key: 'video_count', unit: '个', number: 0, text: '视频资源' },
    { key: 'courseware_count', unit: '个', number: 0, text: '课件资源' },
    { key: 'other_information_count', unit: '个', number: 0, text: '其他资料' },
    { key: 'question_count', unit: '个', number: 0, text: '题库资源' },
    { key: 'paper_count', unit: '套', number: 0, text: '试卷资源' },
    { key: 'memory_size', unit: '', number: 0, text: '资源总体量' },
    { key: 'length', unit: '小时', number: 0, text: '资源总时长' },
    { key: 'learn_times', unit: '人次', number: 0, text: '总学习人次' },
    { key: 'learn_time_length', unit: '小时', number: 0, text: '总学习时长' }
  ]
  data.statistics = statisticsData.map((item: any) => {
    item.number = res.data[item.key] || 0
    return item
  })
  // 最近数据
  data.latest =
    latest.map((item: any, index: number) => {
      item.index = index + 1
      return item
    }) || []
  // 最热资源
  data.hot =
    hot.map((item: any, index: number) => {
      item.index = index + 1
      return item
    }) || []
  data.learn =
    learn.map((item: any, index: number) => {
      item.index = index + 1
      return item
    }) || []
})
</script>
<template>
  <div v-if="flag">
    <AppCard title="资源统计">
      <Statistics :data="data.statistics"></Statistics>
    </AppCard>
    <AppCard title="最新资源">
      <Newest :data="data.latest"></Newest>
    </AppCard>
    <AppCard :data="data.hot" title="最热资源">
      <Hottest :data="data.hot"></Hottest>
    </AppCard>
    <AppCard title="最近学习">
      <RecentLearning :data="data.learn"></RecentLearning>
    </AppCard>
  </div>
</template>
