<script setup lang="ts">
import { getCourseStatistics } from '../api'

// 统计数据
interface IList {
  key: string
  unit: string
  number: number
  text: string
}

let data = ref<IList[]>([
  { key: 'platform_course_count', unit: '门', number: 0, text: '平台课程总数' },
  { key: 'department_course_count', unit: '门', number: 0, text: '部门课程总数' },
  { key: 'my_course_count', unit: '门', number: 0, text: '我的课程总数' },
  { key: 'learn_times', unit: '人次', number: 0, text: '总学习人次' },
  { key: 'learn_time_length', unit: '小时', number: 0, text: '总学习时长' }
])

onMounted(() => {
  getCourseStatistics().then(res => {
    data.value.map((item: any) => {
      item.number = res.data[item.key] || 0
      return item
    })
  })
})

const bytesToSize = (bytes: number) => {
  if (bytes === 0) return { number: 0, unit: 'B' }
  const k = 1000, // or 1024
    sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
    i = Math.floor(Math.log(bytes) / Math.log(k))

  return { number: (bytes / Math.pow(k, i)).toPrecision(3), unit: sizes[i] }
}
</script>
<template>
  <div class="statistics-list">
    <div class="item" v-for="(item, index) in data" :key="index">
      <template v-if="item.key === 'memory_size'">
        <div class="icon"></div>
        <div class="num">
          {{ bytesToSize(item.number).number }}<span>{{ bytesToSize(item.number).unit }}</span>
        </div>
        <div class="text">{{ item.text }}</div>
      </template>
      <template v-else-if="item.key === 'learn_time_length' || item.key === 'length'">
        <div class="icon"></div>
        <div class="num">
          {{ Number((item.number / 60 / 60).toString().match(/^\d+(?:\.\d{0,2})?/)) }}<span>{{ item.unit }}</span>
        </div>
        <div class="text">{{ item.text }}</div>
      </template>
      <template v-else>
        <div class="icon"></div>
        <div class="num">
          {{ item.number }}<span>{{ item.unit }}</span>
        </div>
        <div class="text">{{ item.text }}</div>
      </template>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.statistics-list {
  display: flex;
  margin-top: -20px;
  justify-content: space-around;
  .item {
    padding-top: 15px;
    min-width: 19%;
    height: 140px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
    margin-right: 1%;
    margin-top: 20px;
    // &:nth-child(1) {
    //   .icon {
    //     background-image: url(/center_resource/home-icon1.png);
    //   }
    // }
    &:nth-child(1) {
      .icon {
        background-image: url(/center_resource/home-icon2.png);
      }
    }
    &:nth-child(2) {
      .icon {
        background-image: url(/center_resource/home-icon3.png);
      }
    }
    &:nth-child(3) {
      .icon {
        background-image: url(/center_resource/home-icon4.png);
      }
    }
    &:nth-child(4) {
      .icon {
        background-image: url(/center_resource/home-icon8.png);
      }
    }

    &:nth-child(5) {
      .icon {
        background-image: url(/center_resource/home-icon9.png);
      }
    }
    .icon {
      width: 40px;
      height: 40px;
      background-size: 100% 100%;
      margin: 0 auto;
    }
    .num {
      font-size: 26px;
      line-height: 100%;
      color: #bf9d6b;
      text-align: center;
      padding: 10px;
      span {
        font-size: 12px;
      }
    }
    .text {
      font-size: 14px;
      line-height: 100%;
      color: #8e8e8e;
      text-align: center;
    }
  }
}
</style>
