<script>
export default {
  name: 'UiChartGrid',
  inject: ['UiChart'],
  props: {
    show: {
      type: Boolean,
      default: true
    },
    left: {
      type: String
    },
    top: {
      type: String
    },
    right: {
      type: String
    },
    bottom: {
      type: String
    }
  },
  computed: {
    options() {
      if (!this.show) {
        return {
          show: false,
          left: '2',
          top: '2',
          right: '2',
          bottom: '2'
        }
      } else {
        const opts = {}
        if (this.left) {
          opts.left = this.left
        }
        if (this.top) {
          opts.top = this.top
        }
        if (this.right) {
          opts.right = this.right
        }
        if (this.bottom) {
          opts.bottom = this.bottom
        }
        return opts
      }
    }
  },
  created() {
    this.UiChart.setOption('grid', this.options)
  },
  render() {
    return null
  }
}
</script>
