<template >
  <div class="legend-label">
    <LegendItem v-for="(item,index) in realData"
      :key="index"
      :color="item.color || item.itemStyle.color"
      :name="item.name"
      :percent="item.value / total * 100"
    />
  </div>
</template>

<script>


const LegendItem = {
  props: {
    color: {
      type: String,
      default: '#fff'
    },
    name: {
      type: String,
      default: ''
    },
    percent: {
      type: Number,
      default: 0
    }
  },
  render(h) {
    return h('div', { class: 'legend-item', style: 'color: #fff;' }, [
      h('div', { class: 'name-block' }, [
        h('div', { class: 'perfix', style: `background: ${this.color};` }),
        h('div', { class: 'name', style: 'color: #fff;' }, this.name)
      ]),
      h('div', { class: 'percent', style: 'color: #fff;' }, `${this.percent}%`),
    ])
  }
}

export default {
  name: 'LegendLabel',
  components: {
    LegendItem
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    reverse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    this.realData =  this.data
    return {
      total: 1,
    }
  },
  created() {
    this.realData = this.reverse ? this.data.reverse() : this.data
    this.total = this.data.reduce((total, item) => total + item.value, 0)
  }
}
</script>

<style scoped lang='less'>
.legend-label {
  font-size: 12px;
  /deep/ .legend-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 150px;
    height: 28px;
    background-color: #ffffff10;
    padding: 0px 10px;
    margin-bottom: 5px;
    .name-block {
      display: flex;
      align-items: center;
      .perfix {
        width: 10px;
        height: 10px;
        margin-right: 5px;
      }
    }
  }
}
</style>
