<template>
  <div class="performance-ranking">
    <h2>团队成员业绩排名</h2>
    <div class="team-list">
      <div class="ranking-table">
        <div class="table-header">
          <span>排名</span>
          <span>姓名</span>
          <span>转化率</span>
          <span>加微率</span>
          <span>入群率</span>
        </div>
        <div 
          v-for="(member, index) in displayMembers" 
          :key="member.user_name || member.id"
          class="table-row"
          :class="{ active: selectedMember && (selectedMember.user_name === member.user_name || selectedMember.id === member.id) }"
          @click="selectMember(member)"
          @dblclick="handleDoubleClick(member)"
        >
          <span class="rank">{{ index + 1 }}</span>
          <span class="name">{{ member.user_name || member.name }}</span>
          <span class="conversion">{{ member.conversion_rate || member.conversion || '0%' }}</span>
          <span class="wechat-rate">{{ member.plus_v_rate || member.wechatRate || '0%' }}</span>
          <span class="group-rate">{{ member.group_rate || member.groupRate || '0%' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

// 用户store实例
const userStore = useUserStore()

// 路由实例
const router = useRouter()

// 定义props
const props = defineProps({
  teamMembers: {
    type: Array,
    default: () => []
  },
  selectedMember: {
    type: Object,
    default: () => null
  },
  groupRanking: {
    type: Object,
    default: () => ({})
  }
})

// 定义emits
const emit = defineEmits(['select-member'])

// 计算显示的成员数据
const displayMembers = computed(() => {
  let members = []
  
  // 如果有groupRanking数据，优先使用
  if (props.groupRanking && props.groupRanking.team_data && props.groupRanking.team_data.group_list) {
    members = props.groupRanking.team_data.group_list
  } else {
    // 否则使用teamMembers数据
    members = props.teamMembers
  }
  
  // 过滤掉当前登录用户本人的数据
  if (userStore.userInfo && userStore.userInfo.username) {
    const currentUserName = userStore.userInfo.username
    return members.filter(member => {
      const memberName = member.user_name || member.name
      return memberName !== currentUserName
    })
  }
  
  return members
})

// 格式化金额
const formatAmount = (amount) => {
  if (typeof amount === 'number') {
    return amount.toLocaleString()
  }
  return amount || '0'
}

// 选择成员函数
const selectMember = (member) => {
  emit('select-member', member)
}

// 双击成员跳转到Sale页面
const handleDoubleClick = (member) => {
  const memberName = member.user_name || member.name
  router.push({
    path: '/sale',
    query: {
      user_name: memberName,
      user_level: '1'
    }
  })
}
</script>

<style lang="scss" scoped>
// Performance Ranking
.performance-ranking {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: 600px; // 固定高度
  display: flex;
  flex-direction: column;
  overflow: hidden;
  
  h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
    flex-shrink: 0;
  }
  
  .team-list {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
    min-height: 0;
    
    // 自定义滚动条样式
    &::-webkit-scrollbar {
      width: 6px;
    }
    
    &::-webkit-scrollbar-track {
      background: #f1f5f9;
      border-radius: 3px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 3px;
      
      &:hover {
        background: #94a3b8;
      }
    }
  }
  
  .ranking-table {
    flex: 1;
    display: flex;
    flex-direction: column;
    
    .table-header {
      display: grid;
      grid-template-columns: 60px 1fr 80px 90px 90px;
      gap: 0.8rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid #e2e8f0;
      font-weight: 600;
      color: #64748b;
      font-size: 0.85rem;
      white-space: nowrap;
    }
    
    .table-row {
      display: grid;
      grid-template-columns: 60px 1fr 80px 90px 90px;
      gap: 0.8rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid #f1f5f9;
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
      
      &:last-child {
        border-bottom: none;
      }
      
      &:hover {
        background-color: #f8fafc;
      }
      
      &.active {
        background-color: #eff6ff;
        border-left: 3px solid #3b82f6;
        padding-left: calc(0.75rem - 3px);
      }
      
      .rank {
        font-weight: 600;
        color: #3b82f6;
      }
      
      .name {
        color: #1e293b;
      }
      
      .performance {
        color: #059669;
        font-weight: 500;
      }
      
      .conversion {
        color: #64748b;
      }
      
      .wechat-rate {
        color: #7c3aed;
        font-weight: 500;
      }
      
      .group-rate {
        color: #dc2626;
        font-weight: 500;
      }
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .performance-ranking {
    padding: 1rem;
    height: auto;
    max-height: 400px;
    
    h2 {
      font-size: 1.1rem;
    }
    
    .ranking-table {
      .table-header {
        grid-template-columns: 40px 1fr 70px 55px 55px;
        gap: 0.3rem;
        font-size: 0.75rem;
        padding: 0.5rem 0;
        white-space: nowrap;
      }
      
      .table-row {
        grid-template-columns: 40px 1fr 70px 55px 55px;
        gap: 0.3rem;
        font-size: 0.8rem;
        padding: 0.5rem 0;
        white-space: nowrap;
        
        .rank {
          font-size: 0.8rem;
        }
        
        .name {
          font-size: 0.8rem;
        }
        
        .performance {
          font-size: 0.75rem;
        }
        
        .conversion {
          font-size: 0.75rem;
        }
        
        .wechat-rate {
          font-size: 0.75rem;
        }
        
        .group-rate {
          font-size: 0.75rem;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .performance-ranking {
    padding: 0.75rem;
    border-radius: 8px;
    
    .ranking-table {
      .table-header {
        grid-template-columns: 30px 1fr 55px 45px 45px;
        gap: 0.2rem;
        font-size: 0.7rem;
        white-space: nowrap;
      }
      
      .table-row {
        grid-template-columns: 30px 1fr 55px 45px 45px;
        gap: 0.2rem;
        font-size: 0.75rem;
        white-space: nowrap;
      }
    }
  }
}
</style>