<template>
  <highcharts :class="[componentClass]" :options="options" :updateArgs="[true, true]"></highcharts>
</template>

<script>
import Vue from 'vue'
import {Chart} from 'highcharts-vue'
import base from './c-base'
import Highcharts from 'highcharts'
import exportingInit from 'highcharts/modules/exporting'

export default {
  extends: base,
  components: {
    highcharts: Chart 
  },
  props: {
    chartOptions: {
      type: Object,
      required: true
    },
    dataField4Series: {
      type: String,
      default: null
    }
  },
  data: function () {
    return {
      componentClass: 'c-highcharts',
      options: null
    }
  },
  beforeCreate: function(){
    exportingInit(Highcharts)
    Highcharts.setOptions({
      lang:{
        decimalPoint: ",",
        downloadSVG: "Pobierz wektorowy obraz SVG",
        downloadJPEG: "Pobierz obraz JPEG",
        downloadPNG: "Pobierz obraz PNG",
        downloadPDF: "Pobierz wykres w PDF",
        viewFullscreen: "Pełny ekran",
        printChart: "Wydrukuj wykres",
        exitFullscreen: "Wyjdź z trybu pełnoekranowego"
      }
    })
  },
  created: function(){
    if (this.chartOptions.series)
      this.chartOptions.series.forEach(serie => {
        serie.data = this.dataField4Series && this.state === 1 ? 
          this.rows.filter(row => row[this.dataField4Series] === serie.name) : 
          this.rows
      })
    this.options = Vue.observable(this.chartOptions)
  },
  watch: {
    state: function(val) {
      if (val !== 1)
        return
      if (this.rowsIsEmpty || !this.options.series)
        return
      this.options.series.forEach(serie => {
        serie.data = this.dataField4Series && this.state === 1 ? 
          this.rows.filter(row => row[this.dataField4Series] === serie.name) : 
          this.rows
      })
    }
  }
}</script>
