<template>
  <div class="rank-panel">
    <div class="panel-title">{{ title }}</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    title: String,
    data: {
      type: Array,
      default: () => []
    },
    /** 👇 新增：名称列宽度 */
    nameWidth: {
      type: Number,
      default: 140   // 工具 / 物料保持原来的宽度
    }
  },
  watch: {
    data: {
      immediate: true,
      handler() {
        this.$nextTick(this.render)
      }
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
  },
  methods: {
    render() {
      if (!this.chart) return

      this.chart.clear()
      // 数据为空 → 清空图表
      if (!this.data || !this.data.length) {
        this.chart.setOption({
          graphic: [{
            type: 'text',
            left: 'center',
            top: 'middle',
            style: {
              text: '暂无数据',
              fill: '#6c8aa5',
              fontSize: 20
            }
          }]
        })
        return
      }

      const names = this.data.map(i => i.name)
      const values = this.data.map(i => i.number)

      this.chart.setOption({
        animation: false,
        animationDuration: 800,
        animationEasing: 'cubicOut',
        animationDurationUpdate: 800,
        animationEasingUpdate: 'cubicOut',

        grid: {
          top: 10,
          bottom: 10,
          left: this.nameWidth + 20,      // 👈 关键：给名称留足空间
          right: 30
        },
        tooltip: {
          trigger: 'item',
          formatter: p => `${p.name}<br/>数量：${p.value}`
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: { show: false }
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data: names,
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#fff',
            width: this.nameWidth,      // 👈 关键
            overflow: 'break',
            lineHeight: 16,
            formatter(str) {
              const max = 10        // 每行最多“中文字符数”
              let result = ''
              let count = 0
              for (let char of str) {
                // 判断是否中文
                if (/[\u4e00-\u9fa5]/.test(char)) {
                  count += 1
                }
                result += char
                // 到达一行上限，强制换行
                if (count >= max) {
                  result += '\n'
                  count = 0
                }
              }
              return result
            }
          }
        },
        series: [{
          type: 'bar',
          data: values,
          barWidth: 14,
          /** 👇 关键：排名变化平滑过渡 */
          universalTransition: true,
          itemStyle: {
            color: params => {
              return ['#fadb14', '#a0d911', '#8292f8'][params.dataIndex] || '#4fd2ff'
            },
            borderRadius: [0, 6, 6, 0]
          },
          label: {
            show: true,
            position: 'right',
            color: '#fff'
          }
        }]
      }, true) // 👈 不合并，确保每次刷新都有动画
    }
  }
}
</script>

<style scoped>
.rank-panel {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-title {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #00eaff;
  letter-spacing: 1px;
}

.panel-title::before {
  content: '';
  width: 6px;
  height: 16px;
  background: linear-gradient(180deg, #00eaff, #4fd2ff);
  margin-right: 10px;
  border-radius: 3px;
}

.chart {
  flex: 1; /* 👈 吃满剩余空间 */
}
</style>
