<template>
  <div class="dashboard-card">
    <div class="card-header">
      <h3>团队业绩排行榜</h3>
      <select v-model="rankingPeriod" class="periods-select" @change="onPeriodChange">
        <option value="periods">本期</option>
        <option value="month">月度</option>
        <option value="year">年度</option>
      </select>
    </div>
    <div class="ranking-list">
      <div v-for="(item, index) in rankingData.slice(0, 8)" :key="item.id" class="ranking-item">
        <div class="rank-number" :class="getRankClass(index)">
          {{ index + 1 }}
        </div>
        <div class="employee-info-container">
          <div class="employee-info">
            <div class="employee-name">{{ item.name }}</div>
          </div>
          <!-- <div class="employee-dept">转化率：{{ item.average_deals_per_member }}</div> -->
          <div class="performance-value">
            成单数：{{ formatNumber(item.performance) }}
          </div>
        </div>
    
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits, computed, onMounted } from 'vue';
import { getCenterPerformanceRank } from '@/api/top';

const props = defineProps({
  formatNumber: Function,
  getRankClass: Function
});

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

const rankingPeriod = ref('periods');
const centerSalesRank = ref({});

// 计算属性：转换 centerSalesRank 数据格式
const rankingData = computed(() => {
  if (!centerSalesRank.value) {
    return []; // 返回空数组
  }

  // 根据不同的时间段获取对应的数据字段
  let rankList = null;
  if (rankingPeriod.value === 'periods' && centerSalesRank.value.center_performance_periods_rank) {
    rankList = centerSalesRank.value.center_performance_periods_rank;
  } else if (rankingPeriod.value === 'month' && centerSalesRank.value.center_performance_month_rank) {
    rankList = centerSalesRank.value.center_performance_month_rank;
  } else if (rankingPeriod.value === 'year' && centerSalesRank.value.center_performance_year_rank) {
    rankList = centerSalesRank.value.center_performance_year_rank;
  }

  if (!rankList) {
    return [];
  }
  
  // 转换数据格式并按total_deals从大到小排序
  return rankList
    .map((item, index) => ({
      id: index + 1,
      name: item.center_leader,
      performance: item.total_deals,
      average_deals_per_member: item.average_deals_per_member
    }))
    .sort((a, b) => b.performance - a.performance); // 按total_deals从大到小排序
});

// 获取全中心业绩排行榜数据
async function getCenterSalesRank(data) {
  const params = {
    check_type: data // periods、month、year
  };
  try {
    const res = await getCenterPerformanceRank(params);
    console.log('获取中心业绩排行榜:', res);
    centerSalesRank.value = res.data;
    /**
     * 0
: 
{center_leader: "潘加俊", total_deals: 0, average_deals_per_member: 0}
average_deals_per_member
: 
0
center_leader
: 
"潘加俊"
total_deals
: 
0
1
: 
{center_leader: "张三丰", total_deals: 44, average_deals_per_member: 1}
average_deals_per_member
: 
1
center_leader
: 
"张三丰"
total_deals
: 
44
2
: 
{center_leader: "朱一航", total_deals: 0, average_deals_per_member: 0}
average_deals_per_member
: 
0
center_leader
: 
"朱一航"
total_deals
: 
0
3
: 
{center_leader: "程琦", total_deals: 0, average_deals_per_member: 0}
average_deals_per_member
: 
0
center_leader
: 
"程琦"
total_deals
: 
0
4
: 
{center_leader: "王卓琳", total_deals: 6, average_deals_per_member: 0}
average_deals_per_member
: 
0
center_leader
: 
"王卓琳"
total_deals
: 
6
5
: 
{center_leader: "伍晶晶", total_deals: 5, average_deals_per_member: 0}
average_deals_per_member
: 
0
center_leader
: 
"伍晶晶"
     */
  } catch (error) {
    console.error('获取全中心业绩排行榜失败:', error);
  }
}

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

// 组件挂载时获取初始数据
onMounted(() => {
  getCenterSalesRank(rankingPeriod.value);
});
</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;
  flex: 1;
  height: 400px;
}

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

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

.periods-select {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 10px;
}

.ranking-list .ranking-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

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

.rank-number {
  font-size: 16px;
  font-weight: bold;
  width: 30px;
  text-align: center;
  margin-right: 15px;
}

.rank-number.gold {
  color: #FFD700;
}

.rank-number.silver {
  color: #C0C0C0;
}

.rank-number.bronze {
  color: #CD7F32;
}

.employee-info-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  gap: 10px;
}

.employee-info {
  flex: 1;
}

.employee-name {
  font-weight: bold;
}

.employee-dept {
  font-size: 12px;
  color: #666;
  flex: 1;
  text-align: center;
}

.performance-value {
  font-weight: bold;
  flex: 1;
  text-align: right;
}
</style>