<template>
  <div class="bases">
    <div class="item" v-for="(item, i) in items" :key="i" @click="getItem(item)">
      <div class="inner">
        <div class="infoTitle">
          <img :src="getImgUrl(item.icon)" class="icon" />
          <div class="infos" v-for="(nameTitle, index) in item.nameTitle">
            <div style="margin-left: 30px;">
              <div style=" font-size: 18px;color: #888888; font-weight: 400;">{{ nameTitle.name }}</div>
              <div style="font-size: 24px;font-weight: 500;">{{ nameTitle.count.toLocaleString() }}</div>
            </div>
          </div>
        </div>
        <div class="infoLabel" v-if="item.nameLabel.length > 0">
          <div v-for="(nameLabel, index) in item.nameLabel">
            <div style=" font-size: 16px;color: #888888; font-weight: 400;">{{ nameLabel.label }}
              <span style="font-size: 20px;font-weight: 500;color: #333;margin-left: 10px;">{{
                nameLabel.count.toLocaleString() }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="clearfix"></div>
  </div>
</template>

<script setup>
import { getImgUrl } from "@/utils/tools.js"
const props = defineProps({ items: Array, num: Number })
const emit = defineEmits(["getItem"])
const getItem = item => {
  emit("getItem", item)
}
</script>
<style lang="scss" scoped>
.bases {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
  align-items: start;
  background: rgb(239, 239, 239, 1);

  .item {
    height: 100%;
    cursor: pointer;

    .inner {
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;
      padding: 5px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 124px;

      .infoTitle {
        height: 60px;
        color: #333;
        display: flex;
        padding-bottom: 5px;

        .icon {
          width: 50px;
          height: 50px;
          margin-top: 2.5px;
          margin-bottom: 2.5px;
        }

        .infos {
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }

      .infoLabel {
        height: 60px;
        color: #333;
        display: grid;
        margin-top: 5px;
        gap: 5px;
        grid-template-columns: repeat(2, 1fr);
      }
    }
  }
}
</style>
