<template>
  <div class="total_box ">
    <div class="strong mb10 pl10">{{ props.item.title }}</div>
    <div class="pl10 pt14 pr10 pb14 br flex">
      <div class="total_item_box" v-for="it in props.item.total" :key="it">
        <div class="total_item" @click="queryInformation(props.item.title, it.label, it.type)">
          <span class="f20">{{ it.value }}</span>
          <div class="mt10 f14">{{ it.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from "vue"
const props = defineProps({
  item: Object
})

// 声明要触发的事件
const emit = defineEmits(["query-info"])

// 点击时触发事件，将参数传递给父组件
const queryInformation = (title, label, type) => {
  emit("query-info", { title, label, type})
}
</script>
<style lang="scss" scoped>
.total_box {
  color: #000;

  .br {
    border-radius: 10px;
    background: #f5f7fa;

    .total_item_box {
      background: var(--el-color-primary);
      border-radius: 8px;
      width: 70px;
      height: 70px;
      margin: 0 5px;
      cursor: pointer;
      .total_item {
        color: #fff;
        padding: 12px 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background: url("~@/assets/images/total_bg.png") no-repeat no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>
