<template>
  <div class="ui-chart-rank-item" @click="handleClick">
    <div class="ui-chart-rank__index">{{ number }}</div>
    <div class="ui-chart-rank__label" :style="{width: labelWidth}" :title="label">
      <slot name="label">{{ label }}</slot>
    </div>
    <div class="ui-chart-rank__main">
      <slot name="bar">
        <chart-rank-item-bar
          :value="value"
          :total="total"
        ></chart-rank-item-bar>
      </slot>
    </div>
  </div>
</template>
<script>
import { unique } from './utils'
import ChartRankItemBar from './chart-rank-item-bar'

export default {
  name: 'UiChartRankItem',
  inject: ['UiChartRank'],
  components: {
    ChartRankItemBar
  },
  props: {
    label: {
      type: String
    },
    value: {
      type: Number
    }
  },
  created() {
    this.id = unique()
    this.UiChartRank.addItem({
      id: this.id
    })
  },
  computed: {
    index() {
      return this.UiChartRank.getItemIndex(this.id)
    },
    total() {
      return this.UiChartRank.total || 0
    },
    number() {
      return this.index + 1
    },
    labelWidth() {
      return this.UiChartRank.labelWidth
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  },
  beforeDestroy() {
    this.UiChartRank.removeItem(this.id)
  }
}
</script>
<style lang="less">
.ui-chart-rank-item{
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 28px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.ui-chart-rank__index{
  width: 30px;
  color: #606C80;
}
.ui-chart-rank__label{
  margin-right: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-chart-rank__main{
  flex: 1;
}
</style>
