<script setup lang="ts">
import CountUp from '@/components/CountUp.vue'
import { getTopInfo } from '../api'

interface InfoType {
  book: number
  class: number
  experiment: number
  learning: number
  school: number
  student: number
  time: number
  video: number
}
const detail = reactive<InfoType>({
  book: 0,
  class: 0,
  experiment: 0,
  learning: 0,
  school: 0,
  student: 0,
  time: 0,
  video: 0
})
function fetchInfo() {
  getTopInfo().then(res => {
    Object.assign(detail, res.data)
  })
}
const list = $computed(() => {
  return [
    { name: '服务学校', num: detail.school, unit: '个' },
    { name: '服务班级', num: detail.class, unit: '个' },
    { name: '服务学生', num: detail.student, unit: '个' },
    { name: '实验数量', num: detail.experiment, unit: '个' },
    { name: '实验指导书数量', num: detail.book, unit: '个' },
    { name: '操作视频数量', num: detail.video, unit: '个' },
    { name: '累计学习时长', num: detail.time, unit: '小时' },
    { name: '累计学习人次', num: detail.learning, unit: '人次' }
  ]
})
onMounted(() => {
  fetchInfo()
})
</script>

<template>
  <div class="total">
    <template v-for="(item, index) in list" :key="index">
      <div class="line"></div>
      <dl>
        <dt>
          <span><CountUp :endVal="item.num"></CountUp></span>
          <em>{{ item.unit }}</em>
        </dt>
        <dd>{{ item.name }}</dd>
      </dl>
    </template>
  </div>
</template>

<style lang="scss">
.total {
  display: flex;
  justify-content: space-between;
  dl {
    text-align: left;
  }

  .line {
    border-left: 1px dashed #d9d9d9;
    &:first-child {
      display: none;
    }
  }
  dt {
    span {
      font-size: 30px;
      font-weight: bold;
      color: var(--main-color);
    }
    em {
      padding-left: 10px;
      font-size: 14px;
      color: #666;
    }
  }
  dd {
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999;
  }
}
</style>
