<template>
  <div class="dashboard-card">
    <div class="card-header">
      <h3>{{ rankingType === 'red' ? '销售月度业绩排行榜（红榜）' : '销售月度业绩排行榜（黑榜）' }}</h3>
      <div class="ranking-toggle">
        <button 
          :class="['toggle-btn', { active: rankingType === 'red' }]"
          @click="handleRankingTypeChange('red')"
        >
          红榜
        </button>
        <button 
          :class="['toggle-btn', { active: rankingType === 'black' }]"
          @click="handleRankingTypeChange('black')"
        >
          黑榜
        </button>
      </div>
    </div>
    <div class="ranking-list">
      <div v-for="(item, index) in displayData" :key="item.id" class="ranking-item" :class="{ 'top-three': index < 3, 'black-list': rankingType === 'black' }">
        <div class="rank-number" :class="getRankClass(index)">
          <span v-if="index === 0" class="crown">👑</span>
          <span v-else-if="index === 1" class="medal">🥈</span>
          <span v-else-if="index === 2" class="medal">🥉</span>
          <span v-else>{{ index + 1 }}</span>
        </div>
        <div class="employee-info">
          <div class="employee-name">{{ item.name }}</div>
          <div class="employee-dept">{{ item.department }}</div>
        </div>
              <div class="employee-stats">
            <span class="conversion">转化率: {{ item.conversionRate }}%</span>
          </div>
        <div class="performance-section">
          <div class="performance-value">
           成交： {{ item.performance }}
          </div>
        </div>
      </div>
    </div>
    <div v-if="displayData.length === 0" class="empty-state">
      <p>暂无数据</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed } from 'vue';

const props = defineProps({
  rankingData: {
    type: Array,
    default: () => []
  },
  formatNumber: {
    type: Function,
    default: (num) => {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万';
      }
      return num.toLocaleString();
    }
  },
  getRankClass: {
    type: Function,
    default: (index) => {
      if (index === 0) return 'gold';
      if (index === 1) return 'silver';
      if (index === 2) return 'bronze';
      return '';
    }
  }
});

const emit = defineEmits(['periods-change', 'ranking-type-change']);

const rankingPeriod = ref('month');
const rankingType = ref('red'); // 'red' 为红榜，'black' 为黑榜

// 模拟数据
const mockData = [];

const displayData = computed(() => {
  const data = props.rankingData.length > 0 ? props.rankingData : mockData;
  
  if (rankingType.value === 'red') {
    // 红榜：按业绩从高到低排序
    return [...data].sort((a, b) => b.performance - a.performance);
  } else {
    // 黑榜：按业绩从低到高排序
    return [...data].sort((a, b) => a.performance - b.performance);
  }
});

const handlePeriodChange = () => {
  emit('periods-change', rankingPeriod.value);
};

const handleRankingTypeChange = (type) => {
  rankingType.value = type;
  emit('ranking-type-change', type);
};
</script>

<style scoped>
.dashboard-card {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 400px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.ranking-toggle {
  display: flex;
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 4px;
  gap: 2px;
}

.toggle-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: transparent;
  color: #6c757d;
}

.toggle-btn:hover {
  background-color: #e9ecef;
  color: #495057;
}

.toggle-btn.active {
  background-color: #fff;
  color: #2c3e50;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  font-weight: 600;
}

.toggle-btn.active:hover {
  background-color: #fff;
  color: #2c3e50;
}

.periods-select {
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
  transition: border-color 0.3s ease;
}

.periods-select:hover {
  border-color: #3498db;
}

.periods-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}

.ranking-list {
  flex: 1;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 8px;
}

.ranking-list::-webkit-scrollbar {
  width: 6px;
}

.ranking-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.ranking-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.ranking-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  border-radius: 8px;
  margin-bottom: 8px;
}

.ranking-item:hover {
  background-color: #f8f9fa;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.ranking-item.top-three {
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  border: 1px solid #e9ecef;
}

.ranking-item.black-list {
  background: linear-gradient(135deg, #fff 0%, #fdf2f2 100%);
  border: 1px solid #f5c6cb;
}

.ranking-item.black-list.top-three {
  background: linear-gradient(135deg, #fff 0%, #fdf2f2 100%);
  border: 1px solid #f5c6cb;
}

.ranking-item.black-list:hover {
  background-color: #fef5f5;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank-number {
  font-size: 18px;
  font-weight: bold;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border-radius: 50%;
  background-color: #f8f9fa;
}

.rank-number.gold {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #fff;
  box-shadow: 0 4px 8px rgba(255, 215, 0, 0.3);
}

.rank-number.silver {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color: #fff;
  box-shadow: 0 4px 8px rgba(192, 192, 192, 0.3);
}

.rank-number.bronze {
  background: linear-gradient(135deg, #CD7F32, #B8860B);
  color: #fff;
  box-shadow: 0 4px 8px rgba(205, 127, 50, 0.3);
}

.crown, .medal {
  font-size: 20px;
}

.employee-avatar {
  width: 48px;
  height: 48px;
  margin-right: 16px;
}

.employee-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e9ecef;
}

.employee-info {
  flex-grow: 1;
  margin-right: 16px;
}

.employee-name {
  font-weight: 600;
  font-size: 16px;
  color: #2c3e50;
  margin-bottom: 4px;
}

.employee-dept {
  font-size: 13px;
  color: #7f8c8d;
  margin-bottom: 6px;
}

.employee-stats {
  display: flex;
  gap: 12px;
}

.employee-stats span {
  font-size: 12px;
  color: #95a5a6;
  background-color: #ecf0f1;
  padding: 2px 6px;
  border-radius: 4px;
}

.performance-section {
  text-align: right;
  min-width: 120px;
}

.performance-value {
  font-weight: 700;
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 4px;
}

.performance-trend {
  font-size: 12px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
}

.performance-trend.up {
  color: #27ae60;
  background-color: #d5f4e6;
}

.performance-trend.down {
  color: #e74c3c;
  background-color: #fdeaea;
}

.performance-trend.stable {
  color: #f39c12;
  background-color: #fef9e7;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #95a5a6;
}

.empty-state p {
  margin: 0;
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-card {
    padding: 16px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .ranking-item {
    padding: 12px 0;
  }
  
  .employee-avatar {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }
  
  .employee-name {
    font-size: 14px;
  }
  
  .performance-value {
    font-size: 16px;
  }
  
  .employee-stats {
    flex-direction: column;
    gap: 4px;
  }
}
</style>