<script>
import {mapActions} from "vuex";
import {ECharts} from '@store/hooks/Echarts';
export default {
  name: 'VChart',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    sizes: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      required: true,
      default: ''
    },
    type: {
      type: String,
      required: true,
      default: ''
    },
    height: {
      type: String,
      default: ''
    },
    maxWidth: {
      type: String,
      default: ''
    },
    maxHeight: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chartStyles: {
        maxWidth: `${this.maxWidth}`,
        maxHeight: `${this.maxHeight}`,
        top: "15px",
        padding: "10px",
        margin: "10px",
        boxShadow: "rgb(0 0 0 / 12%) 2px 3px 7px",
        border: "1px solid rgba(0, 0, 0, 0.15)"
      }
    }
  },
  computed: {
    // ...mapGetters('main', ['activeChartData', 'prevGroupByData', 'activeMenuChartData']),
  },
  watch: {
  },
  mounted () {
    this.$nextTick(function () {
      const chart = new ECharts(this.id, this.sizes)
      this.setTypeFunc(this.type, chart, this.data)
      chart.onClickedBarCharts(this.updateCharts)
    })
  },
  updated () {
    this.$nextTick(function () {
      const chart = new ECharts(this.id, this.sizes)
      this.setTypeFunc(this.type, chart, this.data)
      chart.onClickedBarCharts(this.updateCharts)
    })
  },
  methods: {
    ...mapActions('layout_machines', ['updateCharts']),
    setTypeFunc: function(type, chart, data) {
      switch(type) {
      case 'pie': return chart.makePieCharts({...data, type: type})
      case 'mount': return chart.makeBarMountCharts({...data, type: type, height: this.height})
      case 'mainMl': return chart.makeBarCharts({...data, type: type})
      case 'default': return chart.makeBarTypesCharts({...data, type: type})
      case 'types': return chart.makeBarTypesCharts({...data, type: type})
      case 'without_first_layout': return chart.makeBarTypesCharts({...data, type: type})
      case 'ml': return chart.makeBarTypesCharts({...data, type: type})
      case 'packLines': return chart.makeLinesPackCharts({...data, type: type})
      }
    }
  }
}

</script>

<template>
  <div
    :id="id"
    class="flex grow justify-center relative overflow-hidden bg-white"
    :style="chartStyles"
  />
  <div
    id="button_close"
    class="flex absolute h-max top-[50px] right-[45px]"
  />
</template>

<style scoped>
</style>