<template>
  <div class="ui-chart-rank">
    <slot />
  </div>
</template>
<script>
export default {
  name: 'UiChartRank',
  provide() {
    return {
      UiChartRank: this
    }
  },
  props: {
    total: {
      type: Number
    },
    labelWidth: {
      type: String,
      default: '60px'
    }
  },
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem(item) {
      if (!item || !item.id) {
        return
      }
      if (this.items.some(v => v.id === item.id)) {
        return
      }
      this.items.push(item)
    },
    removeItem(id) {
      const index = this.getItemIndex(id)
      if (index >= 0) {
        this.items.splice(index, 1)
      }
    },
    getItemIndex(id) {
      let index = -1
      this.items.some((v, i) => {
        if (v.id === id) {
          index = i
          return true
        }
      })
      return index
    }
  }
}
</script>
