<template>
  <!-- 排名列表组件容器 -->
  <div class="ranking-list-container">
    <div class="ranking-list">
      <!-- 排名列表 -->
      <div class="ranking-item" v-for="(item, index) in filteredData" :key="index" :class="['rank-' + (index + 1)]">
        <div class="rank-number" v-if="showRankIcon">
          <img :src="index < mergedRankIcons.length ? mergedRankIcons[index] : mergedRankIcons[mergedRankIcons.length - 1]" alt="排名图标">
        </div>
        <div class="rank-content">
          <div class="label-text" :style="themedStyles.text.label">{{ item.label }}</div>
          <div class="progress-bar" :style="{ backgroundColor: barBackgroundColor }">
            <div class="progress-fill" :style="{ width: calculatePercentage(item) + '%', background: fillBackgroundColor }"></div>
            <div v-if="calculatePercentage(item)" class="progress-line" :style="{ backgroundColor: lineBackgroundColor }"></div>
          </div>
        </div>
        <div class="value-text" :style="themedStyles.text.value">{{ item.value }}</div>
      </div>

      <!-- 加载状态显示已移除，由父组件管理 -->
    </div>
  </div>
</template>

<script>
// 导入排名图标图片资源
import sort1 from './sort1.png'
import sort2 from './sort2.png'
import sort3 from './sort3.png'
import sort4 from './sort4.png'
import sort5 from './sort5.png'
import sort6 from './sort6.png'
import sort7 from './sort7.png'
import sort8 from './sort8.png'
import sort9 from './sort9.png'
import sort10 from './sort10.png'

/**
 * 排名列表组件
 * 用于展示带排名的数据列表，支持进度条显示、自动加载更多等功能
 */
export default {
  name: 'RankingList',
  props: {
    /**
     * 排名数据列表
     * 每个对象应包含label（标签）和value（数值）属性
     */
    rankingData: {
      type: Array,
      required: true,
      default: () => []
    },
    /**
     * 是否显示排名图标
     * @default true
     */
    showRankIcon: {
      type: Boolean,
      default: true
    },
    /**
     * 自定义排名图标数组
     * 当提供时，将覆盖默认的排名图标
     */
    rankIcons: {
      type: Array,
      default: () => []
    },
    /**
     * 百分比计算模式
     * 'max': 基于最大值计算百分比
     * 'sum': 基于所有值的总和计算百分比
     * 'total': 基于自定义基数(total)计算百分比
     * @default 'max'
     */
    percentMode: {
      type: String,
      default: 'max',
      validator: (value) => ['max', 'sum', 'total'].includes(value)
    },
    /**
     * 最大显示条数
     * 设置为null或undefined时显示全部数据并启用滚动加载
     * @default 10
     */
    maxShowCount: {
      type: [Number, null, undefined],
      default: 10
    },
    /**
     * 自定义基数
     * 当percentMode为'total'时使用此值作为计算百分比的分母
     * @default 0
     */
    total: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0
    },
    /**
     * 进度条颜色配置对象
     * 可自定义进度条的容器背景、填充背景和线条背景颜色
     */
    progressColors: {
      type: Object,
      default: () => ({
        // 进度条容器背景色
        bar: 'rgba(99, 195, 255, 0.08)',
        // 进度条填充背景色（支持渐变格式）
        fill: 'linear-gradient(270deg, rgba(5, 105, 255, 0.4983) 0%, #01E8FE 100%)',
        // 进度条线条背景色
        line: '#EEFEFF'
      })
    },
    /**
     * 文本样式配置对象
     * 可自定义标签和数值的字体样式
     */
    textStyle: {
      type: Object,
      default: () => ({
        // 标签文本样式
        label: {
          fontSize: '16px',
          color: '#E2E8FF'
        },
        // 数值文本样式
        value: {
          fontSize: '18px',
          color: '#FFFFFF'
        }
      })
    },
    
    /**
     * 主题配置对象
     * 用于全局配置组件样式，与其他样式属性优先级关系：theme < progressColors/textStyle
     */
    theme: {
      type: Object,
      default: () => ({
        // 容器样式
        container: {
          backgroundColor: '#0c264c',
          scrollbarColor: '#1890ff'
        },
        // 进度条颜色
        progress: {
          first: '#ffd700',  // 第一名颜色
          second: '#c0c0c0', // 第二名颜色
          third: '#cd7f32'   // 第三名颜色
        },
        // 文本颜色
        text: {
          primary: '#FFFFFF',
          secondary: '#E2E8FF'
        }
      })
    }
  },
  data() {
    return {
      // 排名图标数组，默认使用内置图标
      defaultRankIcons: [sort1, sort2, sort3, sort4, sort5, sort6, sort7, sort8, sort9, sort10]
    }
  },
  mounted() {
    // 只有当maxShowCount为空时才添加滚动事件监听
    if (this.maxShowCount === undefined || this.maxShowCount === null) {
      this.$el.addEventListener('scroll', this.handleScroll);
    }
  },
  beforeDestroy() {
    // 移除滚动事件监听器
    this.$el.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    /**
     * 处理滚动事件，检测是否滚动到底部
     * 当滚动距离小于等于10px时触发加载更多事件
     * @private
     */
    handleScroll() {
      const container = this.$el;
      const { scrollTop, scrollHeight, clientHeight } = container;
      const scrollDistance = scrollHeight - scrollTop - clientHeight;
      
      // 当滚动距离小于等于阈值时触发加载更多
      if (scrollDistance <= 10) {
        this.loadMore();
      }
    },
    
    /**
     * 计算数据项的百分比值
     * 根据配置的百分比模式，使用不同的基准值进行计算
     * @param {Object} item - 数据项对象，必须包含value属性
     * @returns {Number} 计算后的百分比值
     */
    calculatePercentage(item) {
      // 参数验证
      if (!item || typeof item.value !== 'number') {
        return 0;
      }
      
      let percentage = 0;
      
      switch (this.percentMode) {
        case 'max':
          // 基于数据列表中的最大值计算百分比
          if (this.rankingData && this.rankingData.length > 0) {
            const maxValue = Math.max(...this.rankingData.map(data => data.value || 0));
            percentage = maxValue > 0 ? (item.value / maxValue) * 100 : 0;
          }
          break;
        case 'sum':
          // 基于数据列表中所有值的总和计算百分比
          if (this.rankingData && this.rankingData.length > 0) {
            const sumValue = this.rankingData.reduce((sum, data) => sum + (data.value || 0), 0);
            percentage = sumValue > 0 ? (item.value / sumValue) * 100 : 0;
          }
          break;
        case 'total':
          // 基于自定义基数（total）计算百分比
          percentage = this.total > 0 ? (item.value / this.total) * 100 : 0;
          break;
      }
      
      // 确保百分比值在合理范围内（0-100）
      return Math.min(Math.max(percentage, 0), 100);
    },
    
    /**
     * 触发加载更多数据操作
     * 当滚动到底部时自动调用，向父组件发出加载更多的事件
     * 父组件可以通过@load-more监听器响应此事件
     */
    loadMore() {
      // 发出load-more事件，通知父组件加载更多数据
      this.$emit('load-more');
    }
  },
  
  computed: {
    /**
     * 获取过滤后的显示数据列表
     * 根据maxShowCount属性决定是显示全部数据还是限制显示条数
     * @returns {Array} 经过处理后的显示数据数组
     */
    filteredData() {
      // 参数验证
      if (!Array.isArray(this.rankingData)) {
        return [];
      }

      // 如果设置了最大显示条数，则进行数据切片
      if (this.maxShowCount !== undefined && this.maxShowCount !== null) {
        return this.rankingData.slice(0, this.maxShowCount);
      }

      // 否则返回完整数据列表
      return this.rankingData;
    },
    /**
     * 获取合并后的排名图标数组
     * 优先使用props中提供的自定义图标，如果没有则使用默认图标
     * @returns {Array} 合并后的排名图标数组
     */
    mergedRankIcons() {
      // 如果props中提供了自定义图标且不为空，则使用自定义图标
      if (Array.isArray(this.rankIcons) && this.rankIcons.length > 0) {
        return this.rankIcons;
      }
      // 否则使用默认图标
      return this.defaultRankIcons;
    },
    /**
     * 获取进度条容器的实际背景色
     * @returns {String} 背景色值
     */
    barBackgroundColor() {
      return this.progressColors?.bar;
    },
    /**
     * 获取进度条填充的实际背景色
     * @returns {String} 背景色值，支持渐变
     */
    fillBackgroundColor() {
      return this.progressColors?.fill;
    },
    /**
     * 获取进度条线条的实际背景色
     * @returns {String} 背景色值
     */
    lineBackgroundColor() {
      return this.progressColors?.line;
    },
    /**
     * 获取主题化的样式
     * 结合theme、progressColors和textStyle提供完整的样式配置
     * @returns {Object} 合并后的样式配置对象
     */
    themedStyles() {
      return {
        // 容器样式
        container: {
          backgroundColor: this.theme?.container?.backgroundColor || '#0c264c'
        },
        // 文本样式（保持与textStyle的兼容性，但增加theme支持）
        text: {
          label: {
            ...this.theme?.text,
            ...this.textStyle?.label
          },
          value: {
            ...this.theme?.text,
            ...this.textStyle?.value
          }
        },
        // 进度条颜色（保持与progressColors的兼容性）
        progress: {
          ...this.theme?.progress,
          bar: this.progressColors?.bar,
          fill: this.progressColors?.fill,
          line: this.progressColors?.line
        }
      };
    }
  },

}
</script>

<style>
/* 排名列表组件样式 */
.ranking-list-container {
  height: 470px;
  overflow-y: auto;
}

.ranking-list-container .ranking-list {
  padding: 0 10px;
}

/* 自定义滚动条 */
.ranking-list-container::-webkit-scrollbar {
  width: 4px;
}

.ranking-list-container::-webkit-scrollbar-track {
  background: v-bind('theme.container.backgroundColor');
}

.ranking-list-container::-webkit-scrollbar-thumb {
  background: v-bind('theme.container.scrollbarColor');
  border-radius: 2px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ranking-item:hover {
  transform: translateX(5px);
}

.ranking-item .rank-number {
  width: 48px;
  height: 21px;
}

.ranking-item .rank-number img {
  width: 100%;
  height: 100%;
}

.ranking-item .rank-content {
  flex: 1;
  margin: 0 10px;
}

.ranking-item .label-text {
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.ranking-item .progress-bar {
  height: 6px;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ranking-item .progress-fill {
  height: 100%;
}

.ranking-item .progress-line {
    height: 100%;
    width: 3px;
  }

.ranking-item .value-text {
    width: 80px;
    text-align: right;
    font-weight: 800;
  }

/* 排名样式 - 使用主题化的前三名特殊颜色 */
.ranking-item.rank-1 .rank-number {
  color: v-bind('theme.progress.first');
}

.ranking-item.rank-2 .rank-number {
  color: v-bind('theme.progress.second');
}

.ranking-item.rank-3 .rank-number {
  color: v-bind('theme.progress.third');
}


</style>