<script setup lang="ts">
const prop = defineProps(['data'])

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 prop.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;
  // flex-wrap: wrap;
  margin-top: -20px;
  .item {
    padding-top: 15px;
    min-width: 10%;
    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(2) {
      .icon {
        background-image: url(/center_resource/home-icon2.png);
      }
    }
    &:nth-child(3) {
      .icon {
        background-image: url(/center_resource/home-icon3.png);
      }
    }
    &:nth-child(4) {
      .icon {
        background-image: url(/center_resource/home-icon4.png);
      }
    }
    &:nth-child(5) {
      .icon {
        background-image: url(/center_resource/home-icon5.png);
      }
    }
    &:nth-child(6) {
      .icon {
        background-image: url(/center_resource/home-icon6.png);
      }
    }
    &:nth-child(7) {
      .icon {
        background-image: url(/center_resource/home-icon7.png);
      }
    }
    &:nth-child(8) {
      .icon {
        background-image: url(/center_resource/home-icon8.png);
      }
    }

    &:nth-child(9) {
      .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: 5px;
      white-space: nowrap;
      span {
        font-size: 12px;
      }
    }
    .text {
      font-size: 14px;
      line-height: 100%;
      color: #8e8e8e;
      text-align: center;
    }
  }
}
</style>
