<template>
  <div class="stats-container">
    <div class="stat-card">
      <div class="stat-item single">
        <span class="stat-number">{{ props.homeInfoFirst?.bfkhsl || 0 }}</span>
        <span class="stat-label">拜访客户数量</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-item">
        <span class="stat-number">{{ props.homeInfoFirst?.sykhsl || 0 }}</span>
        <span class="stat-label">商业客户</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{ props.homeInfoFirst?.ylkhsl || 0 }}</span>
        <span class="stat-label">医疗客户数量</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-item single">
        <span class="stat-number">{{ props.homeInfoFirst?.visitCount || 0 }}</span>
        <span class="stat-label">客户拜访总次数</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-item">
        <span class="stat-number">{{ props.homeInfoFirst?.sykfcs || 0 }}</span>
        <span class="stat-label">商业拜访次数</span>
      </div>
      <div class="stat-item">
        <span class="stat-number">{{ props.homeInfoFirst?.ylkfcs || 0 }}</span>
        <span class="stat-label">日常拜访次数</span>
      </div>
    </div>
    <div class="stat-card">
      <div class="stat-item single">
        <span class="stat-number">{{ props.homeInfoFirst?.ywysl || 0 }}</span>
        <span class="stat-label">业务员数量</span>
      </div>
    </div>
    <!-- <div class="stat-card">
      <div class="stat-item single">
        <span class="stat-number">{{ statsData.card2.number }}</span>
        <span class="stat-label">{{ statsData.card2.label }}</span>
      </div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  homeInfoFirst: {
    type: [Object, String],
    // eslint-disable-next-line vue/require-valid-default-prop
    default: {}
  }
})
onMounted(() => {})
</script>

<style scoped lang="css">
@media (max-width: 1024px) {
  .stats-container {
    justify-content: center; /* 中等屏幕居中排列 */
  }

  .stat-card {
    flex-basis: 45%; /* 两行排列，每行约45%宽度 */
  }
}

@media (max-width: 768px) {
  .stat-card {
    flex-basis: 100%; /* 小屏幕单行排列 */
  }
}
.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 20px 100px;
  gap: 20px; /* 卡片之间的间距 */
  flex-wrap: wrap; /* 适配小屏幕，自动换行 */
}

.stat-card {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 16px;
  min-width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-item {
  text-align: center;
  margin: 0 10px;
}

.stat-item.single {
  margin: 0;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  display: block;
  color: #000;
}

.stat-label {
  font-size: 14px;
  color: #666;
}
</style>