<template>
    <div class="DataDiv">
        <div class="DataTitle">{{ title }}</div>
        <div class="aiUseCount">
            <div class="aiUseArea" v-for="(area, areaIndex) in useData" :key="areaIndex">
                <div class="aiUseItem" v-for="(item, itemIndex) in area" :key="itemIndex">
                    <div class="useColor" :style="{ backgroundColor: item.color }"></div>
                    <div>{{ item.label }}</div>
                    <div>{{ item.percentage }}</div>
                    <div>{{ item.range }}</div>
                </div>
            </div>
        </div>
        <div class="imgArea">
            <img src="../../../assets/img/BaseData3.png" alt="">
        </div>
    </div>
</template>
<script>
export default {
  name: "countPercentage",
  props: {
    title: {
      type: String,
      default: "应用使用分类", // 默认标题
    },
    useData: {
      type: Array,
      default: () => [
        [
          { color: "#3681fc", label: "高频", percentage: "45%", range: "(40-80人)" },
          { color: "#1f94ff", label: "中高频", percentage: "30%", range: "(0-25人)" },
        ],
        [
          { color: "#8979ff", label: "中频", percentage: "45%", range: "(0-25人)" },
          { color: "#f4cf3b", label: "低频", percentage: "45%", range: "(0-25人)" },
        ],
      ],
    },
  },
};
</script>
<style scoped>
.DataDiv {
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0px 4px 29px rgba(0, 0, 0, 0.1);
}
.DataDiv img {
    width: 100%;
    height: 100%;
}
.DataTitle {
    font-weight: bold;
    font-size: 17px;
}
.aiUseCount {
    display: flex;
    gap: 28px;
}

.aiUseArea {
    margin-top: 10px;
}

.aiUseItem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    margin-top: 5px;
}
.useColor {
    width: 11px;
    border-radius: 10px;
    height: 11px;
}
.imgArea {
    padding: 65px 92px;
}
</style>