<script>
import { unique } from '@huntianning/components/src/utils/string'

export default {
  name: 'UiChartBar',
  inject: ['UiChart'],
  props: {
    data: {
      type: Array
    },
    barWidth: {
      type: String,
      default: '16'
    },
    barColor: {
      type: String
    },
    yAxisIndex: {
      type: Number
    }
  },
  computed: {
    series() {
      return {
        id: this.id,
        type: 'bar',
        yAxisIndex: this.yAxisIndex,
        data: [],
        barWidth: this.barWidth,
        itemStyle: {
          color: this.barColor,
          borderRadius: [8, 8, 8, 8]
        }
      }
    }
  },
  created() {
    this.id = unique()
    this.UiChart.addSeries(this.series)
  },
  watch: {
    data() {
      this.UiChart.updateSeries(this.id, {
        data: this.data
      })
    }
  },
  render() {
    return null
  },
  beforeDestroy() {
    this.UiChart.removeSeries(this.id)
  }
}
</script>
