<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'
let flag = $ref(false)
const data = reactive<{ statistics: object[]; latest: object[]; hot: object[]; learn: object[] }>({
  statistics: [],
  latest: [],
  hot: [],
  learn: [],
})

// 所有数据
getUtilData().then((res) => {
  flag = true
  let { latest = [], hot = [], learn = [] }: { latest: object[]; hot: object[]; learn: object[] } = res.data
  if (learn === null) learn = []
  // 统计资源数据整合
  const statisticsData = [
    { key: '1', unit: '个', number: 10, text: '案例数量' },
    { key: '2', unit: '个', number: 79, text: '案例PPT资源数量' },
    { key: '3', unit: '个', number: 87, text: '案例指导书数量' },
    { key: '4', unit: '个', number: 19, text: '案例数据集' },
    { key: '5', unit: '个', number: 149, text: '案例操作视频' },
    { key: '6', unit: '个', number: 84, text: '行业数据集' },
    { key: '7', unit: 'GB', number: 15.7, text: '资源总体量' },
    { key: '8', unit: '小时', number: 22.63, 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>
