<template>
  <div ref="chart" :style="style" />
</template>

<script>
import props from './props'
import resize from '../mixins/resize'
import responsive from '../mixins/responsive'

export default {
  name: 'BarChart',
  mixins: [responsive, resize],
  props: {
    ...props
  },
  computed: {
    style() {
      const { width, height } = this
      return {
        width,
        height
      }
    },
    option() {
      let baseOption = {
        grid: {
          top: 60,
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: this.xAxis,
        yAxis: this.yAxis
      }

      if (this.dataZoom) {
        baseOption = {
          ...baseOption,
          dataZoom: this.dataZoom
        }
      }
      if (this.title) {
        baseOption = {
          ...baseOption,
          title: this.title
        }
      }
      if (this.legend) {
        baseOption = {
          ...baseOption,
          legend: this.legend
        }
      }
      if (this.tooltip) {
        baseOption = {
          ...baseOption,
          tooltip: this.tooltip
        }
      }
      if (this.color) {
        baseOption = {
          ...baseOption,
          color: this.color
        }
      }
      if (this.backgroundColor) {
        baseOption = {
          ...baseOption,
          backgroundColor: this.backgroundColor
        }
      }
      if (this.grid) {
        baseOption = {
          ...baseOption,
          grid: this.grid
        }
      }

      if (this.series) {
        let serieses = []
        const result = []
        if (Array.isArray(this.series)) {
          serieses = this.series
        } else {
          serieses = [this.series]
        }
        serieses && serieses.length > 0 && serieses.forEach(element => {
          const obj = {
            type: element.type || 'bar',
            ...element
          }
          result.push(obj)
        })
        baseOption = {
          ...baseOption,
          series: result
        }
      }

      return this.options || baseOption
    }
  }
}
</script>

<style>

</style>
