<template>
  <div class="dv-chart-wrap">
    <div class="dv-pie-chart dv-chart"></div>
  </div>
</template>

<script>
  import 'echarts';
  import EchartComponent from "./../../../mixins/EchartComponent";
  import variables from './../../../style/variables';

  export default {
    name: 'DvPieChart',
    mixins: [EchartComponent],
    props: {
      center: {
        type: Array,
        default () {
          return ['50%', '50%'];
        }
      },
      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: {
              label: {
                textStyle: {
                  color: variables.screenContentTextColor,
                  fontSize: 12
                }
              }
            },
            emphasis: {
            }
          };
        }
      },
      labelPosition: {
        type: String
      },
      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 = [];
        const index = this.indexes[0];
        const dimension = this.dimensions[0];
        const radius = dimension.radius;
        let label = Object.assign({
          position: this.labelPosition
        }, dimension.label || {});
        const itemStyle = dimension.itemStyle || this.itemStyle;
        const serie = {
          name: index.title || index.name,
          type: 'pie',
          radius,
          label,
          center: this.center,
          itemStyle,
          ...index.config
        };
        serie.data = this.items.map((dataItem) => {
          return {
            name: dataItem[dimension.name],
            value: dataItem[index.name]
          };
        });
        series.push(serie);
        return series;
      },
      bindEvent () {
        this.chart.on('click', ({ seriesIndex, dataIndex, data }) => {
          this.$emit('select', false, data, seriesIndex, dataIndex);
        });
      },
      onDataReady () {
        this.chart.setOption({
          legend: this.getLegend(),
          series: this.getSeries()
        });
      }
    },
    mounted() {
      this.onDataReady();
    }
  };
</script>
