<template>
  <v-chart :options="opts" />
</template>

<script>
import ECharts from 'vue-echarts'
import 'echarts/lib/chart/bar'

const times = (x) => {
  const arr = []

  for (let i = 0; i ++; i < x) {
    arr.push(undefined)
  }

  return arr
}

export default {
  name: 'VBar',
  props: {
    options: Object,
    labels: Array,
    num: {
      type: Number,
      default: 1,
    }
  },
  components: {
    'v-chart': ECharts,
  },
  data() {
    return {
      defaultOpts: {
        legend: {},
        tooltip: {},
        xAxis: {},
        yAxis: {},
      }
    };
  },
  computed: {
    opts() {
      let series = (this.labels || []).map((it, inx) => {
        return {
          type: 'bar',
          name: it,
        }
      })

      if (!series || !series.length) {
        series = times(this.num).map(() => ({ type: 'bar' }))
      }

      return {
        ...this.defaultOpts,
        series,
        ...(this.options || {}),
      }
    }
  }
}
</script>
