<template>
  <div class="ui-chart-rank-item">
    <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__bar">
      <div class="ui-chart-rank__bar-progress" :style="{width: percent + '%'}"></div>
    </div>
    <div class="ui-chart-rank__value">{{ value }}</div>
  </div>
</template>
<script>
import { unique } from './utils'

export default {
  name: 'UiChartRankItem',
  inject: ['UiChartRank'],
  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
    },
    percent() {
      if (!this.total) {
        return 0
      }
      return Math.min((this.value / this.total), 1) * 100
    },
    labelWidth() {
      return this.UiChartRank.labelWidth
    }
  },
  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: 20px;
  color: #606C80;
}
.ui-chart-rank__label{
  margin-right: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-chart-rank__value{
  min-width: 42px;
  text-align: right;
}
.ui-chart-rank__bar{
  height: 9px;
  border-radius: 4.5px;
  background-color: #F7F8FB;
  flex: 1;
  min-width: 0;
  margin-right: 6px;
}
.ui-chart-rank__bar-progress{
  height: 100%;
  background-color: #0088FF;
  border-radius: 4.5px;
}
</style>
