<template>
  <div class="defect-rank">
    <div v-for="(item, index) in list" :key="index" class="rank-item">
      <div class="rank-badge" :class="`rank-badge-${index + 1}`">{{ index + 1 }}</div>
      <div class="rank-label" :title="item.processName">{{ item.processName }}</div>
      <div class="rank-bar-container">
        <div class="rank-bar" :style="getBarStyle(item.defectRate, index)" />
      </div>
      <div class="rank-value">{{ (item.defectRate * 100).toFixed(0) }}%</div>
    </div>
    <div v-if="!list || list.length === 0" class="empty-text">暂无数据</div>
  </div>
</template>

<script>
export default {
  name: 'ProcessDefectRank',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getBarStyle(rate, index) {
      const colors = [
        '#f472b6', '#fb923c', '#2dd4bf', '#3b82f6', '#3b82f6',
        '#3b82f6', '#3b82f6', '#3b82f6', '#3b82f6', '#3b82f6'
      ]
      const color = colors[index] || '#3b82f6'
      // Scale bar relative to max or absolute. We assume absolute rate is 0~1.
      // But if max is 40%, we might want to scale it relative to the max so it fills the space better.
      // Let's use relative scaling.
      const maxRate = this.list.length ? Math.max(...this.list.map(i => i.defectRate)) : 1;
      const width = maxRate > 0 ? (rate / maxRate) * 100 : 0;
      return {
        width: `${width}%`,
        backgroundColor: color,
        borderRadius: '4px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.defect-rank {
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rank-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.rank-badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin-right: 12px;
  background-color: #e5e7eb; // default
  color: #6b7280;

  &-1 { background-color: #fce7f3; color: #db2777; }
  &-2 { background-color: #ffedd5; color: #ea580c; }
  &-3 { background-color: #ccfbf1; color: #0d9488; }
}

.rank-label {
  width: 80px;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
}

.rank-bar-container {
  flex: 1;
  height: 8px;
  background-color: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 12px;
}

.rank-bar {
  height: 100%;
  transition: width 0.5s ease-out;
}

.rank-value {
  width: 40px;
  text-align: right;
  color: #6b7280;
  font-weight: 500;
}

.empty-text {
  text-align: center;
  color: #909399;
  font-size: 14px;
  padding: 20px 0;
}
</style>
