<template>
  <div class="bases">
    <div class="item" v-for="(item, i) in items" :key="i">
      <div class="inner">
        <div class="infoTitle" @click="getItem(item)">
          <img :src="getImgUrl(item.icon)" class="icon" />
          <div style=" font-size: 18px; font-weight: 400;">{{ item.nameTitle }}</div>
        </div>
        <!-- 修改这里：给每个子项添加独立的点击事件 -->
        <div class="infoLabel" :style="`grid-template-columns: repeat(${item.nameLabel.length}, 1fr);`">
          <div 
            v-for="(nameLabel, index) in item.nameLabel" 
            :key="index"
            class="sub-item"
            @click="getSubItem(item, index)"
          >
            <div style="font-size: 20px;font-weight: 500;color: #333;">{{ item.count[index] }}</div>
            <div style=" font-size: 16px;color: #888888; font-weight: 400;">{{ nameLabel }}</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", "getSubItem"])

// 标题点击
const getItem = item => {
  emit("getItem", item)
}

// 子项点击
const getSubItem = (item, subIndex) => {
  emit("getSubItem", { item, subIndex })
}
</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 {
      margin-top: 5px;
      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(4, 1fr);
      }
    }
  }
}
// /* 添加子项悬停效果 */
// .sub-item {
//   cursor: pointer;
//   transition: background-color 0.3s;
//   padding: 5px;
//   border-radius: 4px;
// }

// .sub-item:hover {
//   background-color: #f5f5f5;
// }
</style>
