<template>
  <div class="dv-liquid-chart dv-chart"></div>
</template>

<script>
import 'echarts';
import EchartComponent from './../../../mixins/EchartComponent';
import 'echarts-liquidfill';
export default {
  name: 'DvLiquidChart',
  mixins: [EchartComponent],
  props: {
    tooltip: {
      type: Object,
      default () {
        return {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        };
      }
    },
    dimensions: {
      type: Array,
      required: false,
      default () {
        return [];
      }
    },
    indexes: {
      type: Array,
      required: false,
      default () {
        return [];
      },
    },
    itemStyle: {
      type: Object,
      default () {
        return {
          normal: {
          },
          emphasis: {
          }
        };
      }
    },
    items: {
      type: Array,
      default () {
        return [];
      }
    }
  },
  computed: {
    legendData () {
      return this.items.map((item) => {
        return item[this.dimensions[0].name];
      });
    },
  },
  data () {
    return {
      selected: {}
    };
  },
  watch: {
    items: {
      handler () {
        this.onDataReady();
      },
      deep: true
    },
    indexes: {
      handler () {
        this.onDataReady();
      },
      deep: true
    }
  },
  methods: {
    getLegend () {
      return Object.assign({}, this.legend, {
        data: this.legendData
      });
    },
    getSeries () {
      const series = [];
      this.indexes.forEach(index => {
        const data = [];
        if (this.items.length) {
          for(let i = 0; i < 5; i++) {
            data.push(this.items[0][index.name]);
          }
        }
        const serie = {
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          data,
          ...index.config
        };
        series.push(serie);
      });
      return series;
    },
    bindEvent () {
      this.chart.on('click', (params) => {
        this.$emit('select', params);
      });
    },
    onDataReady () {
      this.chart.setOption({
        legend: this.getLegend(),
        series: this.getSeries()
      });
    }
  },
  mounted() {
    this.onDataReady();
  }
};
</script>
