<template>
  <div class="dashboard-card detail-section">
    <div class="card-header custom-header">
      <h3>数据详情</h3>
    </div>
    <div class="detail-content">
      <div v-if="!selectedPerson" class="no-selection">
        <div class="empty-icon">📊</div>
        <p>请点击左侧表格中的人员查看详细数据</p>
      </div>
      <div v-else class="person-detail">
        <div class="detail-header">
          <div class="detail-avatar">{{ selectedPerson.name.charAt(0) }}</div>
          <div class="detail-info">
            <h4>{{ selectedPerson.name }}</h4>
            <p>{{ selectedPerson.position }} - {{ selectedPerson.department }}</p>
          </div>
        </div>
        <div class="detail-placeholder">
          <p>详细数据面板</p>
          <p class="placeholder-text">此处将显示选中人员的详细数据分析，包括业绩趋势、客户分析等信息</p>
        </div>
      </div>
    </div>
  </div>
</template>

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

defineProps({
  selectedPerson: Object
});
</script>

<style scoped>
.dashboard-card.detail-section {
  grid-column: 3 / 4;
}

.custom-header {
  margin-left: 1rem !important;
}

.detail-content .no-selection {
  text-align: center;
  padding: 40px 20px;
  color: #999;
}

.no-selection .empty-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.person-detail .detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.detail-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #2196F3;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  margin-right: 20px;
}

.detail-info h4 {
  margin: 0;
  font-size: 20px;
}

.detail-info p {
  margin: 0;
  color: #666;
}

.detail-placeholder {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.placeholder-text {
  font-size: 14px;
  color: #999;
}
</style>