<template>
  <div class="dashboard-card">
    <div class="card-header">
      <h3>客户画像</h3>
    </div>
    <div class="customer-profile">
      <div class="profile-section">
        <h4>家长类型分布</h4>
        <div class="parent-types">
          <div v-for="type in parentTypes" :key="type.name" class="parent-type-item">
            <div class="type-info">
              <span class="type-name">{{ type.name }}</span>
              <span class="type-percentage">{{ type.percentage }}%</span>
            </div>
            <div class="type-bar">
              <div class="type-fill" :style="{ width: type.percentage + '%', backgroundColor: type.color }"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="profile-section" style="margin-bottom: 25px;">
        <h4>热门问题排行</h4>
        <div class="hot-questions">
          <div v-for="(question, index) in hotQuestions.slice(0, 3)" :key="question.id" class="question-item">
            <div class="question-rank">{{ index + 1 }}</div>
            <div class="question-content">
              <div class="question-text">{{ question.text }}</div>
              <div class="question-count">{{ question.count }}次咨询</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  parentTypes: Array,
  hotQuestions: Array
});
</script>

<style scoped>
.dashboard-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
  /* flex: 1; */
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

.customer-profile .profile-section h4 {
  font-size: 16px;
  margin-bottom: 15px;
}

.parent-type-item {
  margin-bottom: 10px;
}

.type-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 14px;
}

.type-bar {
  background-color: #f0f0f0;
  border-radius: 4px;
  height: 8px;
}

.type-fill {
  height: 100%;
  border-radius: 4px;
}

.hot-questions .question-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.question-rank {
  font-size: 16px;
  font-weight: bold;
  width: 30px;
  text-align: center;
}

.question-text {
  font-size: 14px;
}

.question-count {
  font-size: 12px;
  color: #666;
}
</style>