<template>
  <div class="dashboard-card detail-section">
    <div class="card-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>
defineProps({
  selectedPerson: { type: Object, default: null }
});
</script>

<style scoped>
.detail-section { height: 600px; }
.detail-content { height: calc(100% - 60px); overflow-y: auto; }
.no-selection { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #64748b; text-align: center; }
.empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.person-detail { padding: 20px; }
.detail-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid #e2e8f0; }
.detail-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; }
.detail-info h4 { margin: 0 0 4px 0; font-size: 20px; }
.detail-info p { margin: 0; color: #64748b; font-size: 14px; }
.detail-placeholder { text-align: center; padding: 40px 20px; color: #64748b; }
.detail-placeholder p:first-child { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.placeholder-text { font-size: 14px; opacity: 0.8; }
</style>