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

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

  export default {
    name: 'DvLineBarChart',
    mixins: [EchartComponent],
    props: {
      dimensions: {
        type: Array,
        required: false,
        default () {
          return [];
        }
      },
      indexes: {
        type: Array,
        required: false,
        default () {
          return [];
        },
      },
      xAxis: {
        type: [Array, Object],
        default () {
          return {
            splitLine: {
              show: false
            }
          };
        }
      },
      yAxis: {
        type: [Array, Object],
        default () {
          return {
          };
        }
      },
      reverse: {
        type: Boolean,
        default: false
      },
      tooltip: {
        type: Object,
        default () {
          return {
            show: false
          };
        }
      },
      items: {
        type: Array,
        default () {
          return [];
        }
      }
    },
    computed: {
      legendData () {
        return this.indexes.map((index) => {
          return index.title || index.name;
        });
      },
      xAxisDefines () {
        return this.dimensions.map((dimension) => {
          return Object.assign({
            type: 'category',
            data: this.items.map(item => item[dimension.name]),
            axisPointer: {
              type: 'shadow'
            },
            name: dimension.title
          },  this.xAxis, dimension.xAxis);
        });
      },
      yAxisDefines () {
        const yAxisDefines = this.indexes.filter(index => index.yAxis).map((index) => {
          return Object.assign({}, index, {
            type: 'value',
            name: index.title
          }, this.yAxis, index.yAxis);
        });
        if (yAxisDefines.length === 0) {
          return this.yAxis;
        }
        return yAxisDefines;
      }
    },
    watch: {
      items: {
        handler () {
          this.onDataReady();
        },
        deep: true
      },
      dimensions: {
        handler () {
          this.onDataReady();
        },
        deep: true
      },
      indexes: {
        handler () {
          this.onDataReady();
        },
        deep: true
      }
    },
    methods: {
      getLegend () {
        return Object.assign({}, this.legend, {
          data: this.legendData
        });
      },
      getSeries () {
        return this.indexes.map((index) => {
          return Object.assign({
            name: index.title || index.name,
            type: index.type || 'line',
            data: this.items.map(item => item[index.name])
          }, index.config);
        });
      },
      onDataReady () {
        this.chart.clear();
        if (!this.reverse) {
          this.chart.setOption({
            ...this.getBaseOptions(),
            xAxis: this.xAxisDefines,
            yAxis: this.yAxisDefines,
            series: this.getSeries(),
          });
        }
        else {
          this.chart.setOption({
            ...this.getBaseOptions(),
            yAxis: this.xAxisDefines,
            xAxis: this.yAxisDefines,
            series: this.getSeries(),
          });
        }
      }
    }
  };
</script>
