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

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

export default {
  mixins: [responsive, resize],
  props: {
    ...props
  },
  computed: {
    style() {
      const { width, height } = this
      return {
        width,
        height
      }
    },
    option() {
      let baseOption = {}
      if (this.backgroundColor) {
        baseOption = {
          ...baseOption,
          backgroundColor: this.backgroundColor
        }
      }
      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.graphic) {
        baseOption = {
          ...baseOption,
          graphic: this.graphic
        }
      }
      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 || 'pie',
            ...element
          }
          result.push(obj)
        })
        baseOption = {
          ...baseOption,
          series: result
        }
      }
      return this.options || baseOption
    }
  }
}
</script>

<style>
</style>
