<script>
import Chart from "@molecules/VChart/VChart.vue";
import moment from 'moment'

export default {
  name: 'PackChart',
  components: {
    Chart,
  },
  props: {
    curerentTableData: {
      type: Array,
      default: () => []
    },
    displayView: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      currentSizes: {
        width: document.documentElement.clientWidth - 700,
        height: document.documentElement.clientHeight - 350
      },
      maxWidth: document.documentElement.clientWidth - 300,
      maxHeight: document.documentElement.clientHeight - 300,
    }
  },
  computed: {
  },
  methods: {
    chartData: function(params) {
      console.log('params', params)
      const yAxisAata = params.columns.map(column => {
        const value = params.dataSource.map((el) => {
          const dt = moment(el[column.pack_dt]).format('DD.MM.YYYY HH:mm')
          return {
            datetime: dt, param: column.key, state: el[column.key] ? el[column.key] : 0
          }
        })
        return {key: column.key, name: column.title, value}
      })
      console.log('yAxisAata', yAxisAata)
      const xAxisData = params.dataSource.map((el) => {
        const dt = moment(el.pack_dt).format('DD.MM.YYYY HH:mm')
        return dt
      })
      return {charts: yAxisAata, names: {yAxis: ' ', xAxis: 'Дата и время'}, xAxisData, title: 'График'}
    },
  }
}

</script>


<template>
  {{ console.log('currentSizes.heigth', maxHeight) }}
  <div
    v-if="displayView === 'chart'"
    id="packChartWrapper"
    class="relative flex flex-wrap justify-center w-full h-full mb-3"
  >
    <Chart
      id="packChart"
      type="packLines"
      height="800"
      :data="chartData(curerentTableData)"
      :sizes="currentSizes"
      :maxWidth="`${maxWidth}px`"
      :maxHeight="`${maxHeight}px`"
    />
  </div>
</template>
