<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 = {
        title: {},
        radar: {}
      }
      if (this.title) {
        baseOption = {
          ...baseOption,
          title: this.title
        }
      }
      if (this.tooltip) {
        baseOption = {
          ...baseOption,
          tooltip: this.tooltip
        }
      }
      if (this.legend) {
        baseOption = {
          ...baseOption,
          legend: this.legend
        }
      }
      if (this.radar) {
        baseOption = {
          ...baseOption,
          radar: this.radar
        }
      }
      if (this.color) {
        baseOption = {
          ...baseOption,
          color: this.color
        }
      }
      if (this.backgroundColor) {
        baseOption = {
          ...baseOption,
          backgroundColor: this.backgroundColor
        }
      }
      if (this.visualMap) {
        baseOption = {
          ...baseOption,
          visualMap: this.visualMap
        }
      }
      if (this.series) {
        baseOption = {
          ...baseOption,
          series: this.series
        }
      }
      return this.options || baseOption
    }
  }
}
</script>

<style>
</style>
