<template>
  <div class="chart-container">
    <div class="chart-header">
      <h3>客户迫切解决的问题排行榜</h3>
    </div>
    <div class="chart-content">
      <div v-if="sortedData.length > 0" class="problem-ranking">
        <div 
          v-for="(item, index) in sortedData" 
          :key="item.name" 
          class="ranking-item" 
          :class="getRankingClass(index)"
        >
          <div class="rank-number">
            <span class="rank-badge" :class="getRankBadgeClass(index)">{{ index + 1 }}</span>
          </div>
          <div class="problem-info">
            <div class="problem-name">{{ item.name }}</div>
          </div>
          <div class="problem-percentage">
            <span class="percentage">{{ getPercentage(item.value) }}%</span>
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: getPercentage(item.value) + '%' }"></div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <p>暂无排行榜数据</p>
      </div>
    </div>
  </div>
</template>

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

// 定义Props，接收一个包含 { name: string, value: string | number } 的数组
const props = defineProps({
  rankingData: {
    type: Array,
    default: () => [] // 默认值为空数组
  }
});

// --- 计算属性 ---
// 对传入的数据进行排序
const sortedData = computed(() => {
  if (Array.isArray(props.rankingData) && props.rankingData.length > 0) {
    // 创建一个副本进行排序，以避免直接修改 props
    return [...props.rankingData].sort((a, b) => {
      // 统一将值转换为数字进行比较
      const aValue = parseFloat(String(a.value).replace('%', '')) || 0;
      const bValue = parseFloat(String(b.value).replace('%', '')) || 0;
      return bValue - aValue;
    });
  }
  return []; // 如果没有有效数据，返回空数组
});

// --- 辅助方法 ---
// 获取百分比数值，兼容 "55%" 和 55 两种格式
const getPercentage = (value) => {
  return parseFloat(String(value).replace('%', '')) || 0;
};

// 根据排名索引返回不同的CSS类
const getRankingClass = (index) => {
  return ['rank-first', 'rank-second', 'rank-third'][index] || 'rank-other';
};

// 根据排名索引返回徽章的CSS类
const getRankBadgeClass = (index) => {
  return ['badge-gold', 'badge-silver', 'badge-bronze'][index] || 'badge-default';
};
</script>

<style lang="scss" scoped>
/* 外部容器样式 */
.chart-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  height: 400px; /* 保持与其他卡片高度一致 */
  display: flex;
  flex-direction: column;
}

.chart-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #ebeef5;
  h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.chart-content {
  padding: 20px;
  flex-grow: 1;
  overflow: hidden; /* 防止内容溢出 */
}

/* 排行榜核心样式 */
.problem-ranking {
  overflow-y: auto;
  /* 自定义滚动条样式 (可选) */
  &::-webkit-scrollbar {
    width: 6px;
  }
  &::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  &:last-child {
    margin-bottom: 0;
  }
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.rank-number {
  margin-right: 16px;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  &.badge-gold {
    background: linear-gradient(135deg, #ffd700, #ffb300);
  }
  &.badge-silver {
    background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
  }
  &.badge-bronze {
    background: linear-gradient(135deg, #cd7f32, #b8860b);
  }
  &.badge-default {
    background: linear-gradient(135deg, #6c757d, #495057);
  }
}

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

.problem-name {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}

.problem-percentage {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 80px;
}

.percentage {
  font-size: 16px;
  font-weight: bold;
  color: #495057;
  margin-bottom: 4px;
}

.progress-bar {
  width: 60px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
  
  .rank-first & { background: linear-gradient(90deg, #ffd700, #ffb300); }
  .rank-second & { background: linear-gradient(90deg, #c0c0c0, #a8a8a8); }
  .rank-third & { background: linear-gradient(90deg, #cd7f32, #b8860b); }
  .rank-other & { background: linear-gradient(90deg, #007bff, #0056b3); }
}

/* 空状态样式 */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #909399;
  font-size: 16px;
}
</style>