<template>
  <div v-bind:class="[componentClass]">
    <c-pivot-settings :appWindowIdent="appWindowIdent" :dataSetIdent="dataSetIdent" />
    <div class="c-header">
      <div class="c-settings-container" :style="{'min-width': rowsHeadersWidth + aggrsHeadersWidth + 'px'}">
        <button class="c-setting-button c-show-aggr" :class="[{'c-show':showColsAggrs}]" @click="onShowColsAggrsChange()" >&#931;</button>
        <a class="c-newtab c-setting-button" target="_blank" title="Otwórz w nowym oknie" :href="getFullPathHref">&#xe989;</a>
        <div v-if="state === 1">
          <slot
            name="c-settings-container-slot"
          >
          </slot>
          <table v-if="showColsAggrs" cellspacing="0">
            <tbody>
              <tr v-for="(aggrField, aggrIndex) in aggrFields4Cols" :key="rowAggrKey(0, aggrField.dataFieldIdent)" :ref="aggrIndex === aggrFields.length - 1 && 0 === pivotRows.length - 1 ? 'lastRowHeader' : null">
                <td
                  v-if="aggrIndex === 0"
                  :rowspan="spanSize(pivotRows, 0, 0) + aggrFields4Cols.length - 1"
                  :style="{'width': rowsHeadersWidth  + 'px'}"
                >
                  <slot
                    name="cols-aggr-slot"
                  >Missing slot
                  </slot>
                </td>
                <td :style="{ 'height': rowsHeight + 'px', 'max-height': rowsHeight + 'px', 'width': aggrsHeadersWidth + 'px', 'max-width': aggrsHeadersWidth + 'px'}">{{aggrField.aggrTranslatedDesc}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="c-cols-headers" ref="scrolledLeft">
        <table cellspacing="0" v-if="state === 1">
          <thead>
            <tr v-for="(colField, colFieldIndex) in colFieldsVisible()" :key="colField.key">
              <th
                v-bind:class="[{'c-rotate':colField.rotate}]"
                v-for="(col, colIndex) in pivotColsIndexVisible(colFieldIndex)"
                :key="getPivotRowKey(colIndex, null)"
                :colspan="spanSize(pivotCols, colFieldIndex, colIndex)"
                :ref="colIndex === pivotColsIndexVisible(colFieldIndex).length - 1 ? 'lastColHeader' : null"
              >
                <slot
                  v-if="colField.headerSlotName"
                  :name="colField.headerSlotName"
                  v-bind:value="col[colFieldIndex][1]"
                  v-bind:col="col"
                >Missing slot
                  <code>{{ colField.headerSlotName }}</code>
                </slot>
                <template v-else>{{ col[colFieldIndex][1] }}</template>
              </th>
              <th class="c-top-right-dz"></th>
            </tr>
            <template v-if="showColsAggrs && state === 1">
              <tr v-for="(aggrField, aggrIndex) in aggrFields4Cols" 
                :key="rowAggrKey(0, aggrField.dataFieldIdent)" :ref="aggrIndex === aggrFields.length - 1 && 0 === pivotRows.length - 1 ? 'lastRowHeader' : null"
                class="c-cols-aggr"
              >
                <th
                  v-for="(col, colIndex) in pivotColsIndexVisible(0)"
                  :key="getPivotRowKey(colIndex, null)"
                  :colspan="spanSize(pivotCols, 0, colIndex)"
                  :style="{ 'height': rowsHeight + 'px', 'min-width': rowsWidth + 'px'}"
                  :class="getFormatTypeClass(aggrField.formatType)"
                >
                  {{col[aggrField.dataFieldIdent]}}
                </th>
                <th class="c-top-right-dz"></th>
              </tr>
            </template>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
    <div class="c-rows">
      <div class="c-rows-headers" ref="scrolledTop" :style="{'min-width': rowsHeadersWidth + aggrsHeadersWidth + 'px'}">
        <table cellspacing="0">
          <tbody>
            <template v-for="(row, rowIndex) in pivotRows">
              <tr v-for="(aggrField, aggrIndex) in aggrFields" :key="rowAggrKey(rowIndex, aggrField.dataFieldIdent)" :ref="aggrIndex === aggrFields.length - 1 && rowIndex === pivotRows.length - 1 ? 'lastRowHeader' : null">
                <td
                  v-for="(rowField, rowFieldIndex) in rowFieldsVisible(rowIndex, aggrIndex)"
                  :key="rowField.key"
                  :rowspan="spanSize(pivotRows, rowFieldIndex, rowIndex) + aggrFields.length - 1"
                  :style="{'min-width': rowField.width + 'px', 'max-width': rowField.width + 'px', 'height': rowField.height + 'px', 'max-height': rowField.height + 'px'}"
                >
                  <slot
                    v-if="rowField.headerSlotName"
                    :name="rowField.headerSlotName"
                    v-bind:value="row[rowFieldIndex][1]"
                    v-bind:row="row"
                  >Missing slot
                    <code>{{ rowField.headerSlotName }}</code>
                  </slot>
                  <template v-else>{{ row[rowFieldIndex][1] }}</template>
                </td>
                <td :style="{ 'height': rowsHeight + 'px', 'max-height': rowsHeight + 'px', 'width': aggrsHeadersWidth + 'px', 'max-width': aggrsHeadersWidth + 'px'}">{{aggrField.aggrTranslatedDesc}}</td>
              </tr>
            </template>
            <tr class="c-bootom-left-dz"></tr>
          </tbody>
        </table>
      </div>
      <div class="c-rows-data" @scroll="handleScroll" v-show="state === 1 && !pivotIsEmpty"  ref="rowData">
        <div class="c-rows-data-background" v-if="state === 1 && !pivotIsEmpty"  :style="{ 'padding-top': virtDataTop + 'px', 'padding-left': virtDataLeft + 'px', 'min-width': virtDataWidth + 'px', 'min-height': virtDataHeight + 'px'}">
          <table cellspacing="0">
            <tbody>
              <template v-for="(row, rowIndex) in virtRowsCount">
                <tr v-for="aggrField in aggrFields" :key="rowAggrKey(rowIndex, aggrField.dataFieldIdent)">
                  <td v-for="(col, colIndex) in virtColsCount" :key="valueKey(colIndex, rowIndex, aggrField)"
                    v-bind:class="[
                      getFormatTypeClass(aggrField.formatType), 
                      hasValueSlot($scopedSlots, aggrField.dataFieldIdent, aggrField.isReadOnly, isEditable) ? 'c-has-slot': null,
                      dataSet.pivotCurrentColIndex === colShift + colIndex ? 'c-current-col' : null,
                      dataSet.pivotCurrentRowIndex === rowShift + rowIndex && dataSet.pivotCurrentDataFieldIdent === aggrField.dataFieldIdent ? 'c-current-row' : null
                    ]"
                    :style="{ 'height': rowsHeight + 'px', 'min-width': rowsWidth + 'px'}"
                    v-on:focusin="handleCellFocusIn(colShift + colIndex, rowShift + rowIndex, aggrField.dataFieldIdent)" 
                    :ref="getCellRef(colShift + colIndex, rowShift + rowIndex, aggrField.dataFieldIdent)"
                    v-on:keydown.tab.prevent = "tabScroll($event, colShift + colIndex, rowShift + rowIndex, aggrField.dataFieldIdent)"
                    tabindex=1>
                   <slot
                      v-if="hasValueSlot($scopedSlots, aggrField.dataFieldIdent, aggrField.isReadOnly, isEditable)"
                      :name="getSlotValueName(aggrField.dataFieldIdent, aggrField.isReadOnly || !isEditable)"
                      v-bind:value="getPivotValue(getPivotRowKey(colShift + colIndex, rowShift + rowIndex), aggrField.dataFieldIdent)"
                      v-bind:row="getPivotRow(colShift + colIndex, rowShift + rowIndex)"
                    />
                    <template v-else-if="!hasValueSlot($scopedSlots, aggrField.dataFieldIdent, aggrField.isReadOnly, isEditable) && (!isEditable || aggrField.isReadOnly)">
                      {{ getPivotValue(getPivotRowKey(colShift + colIndex, rowShift + rowIndex), aggrField.dataFieldIdent) }}
                    </template>
                    <c-edit
                      v-else
                      :style="{ 'width': rowsWidth - 6 + 'px', 'height': rowsHeight - 6 + 'px' }"
                      :appWindowIdent="appWindowIdent"
                      :dataSetIdent="dataSetIdent"
                      :pivotRow="rowShift + rowIndex"
                      :pivotCol="colShift + colIndex"
                      :row="getPivotRow(colShift + colIndex, rowShift + rowIndex)"
                      :dataFieldIdent="aggrField.dataFieldIdent"
                      sourceKind="pivotValues"
                      :showClear="false"
                      :formatType="aggrField.formatType"
                      labelLocation="none"
                    ></c-edit>
                  </td>
                </tr>
              </template>
            </tbody>
          </table>
        </div>
      </div>
      <div v-if="state === 0" v-bind:class="[{'c-progress':true}]">
        <slot v-if="$scopedSlots.value" name="c-progress"></slot>
        <template v-else>
          <c-spinner></c-spinner>
        </template>
      </div>
      <div v-if="state === -1" v-bind:class="[{'c-errors':true}]">
        <slot name="c-errors"></slot>
      </div>
      <div v-if="state === 1 && pivotIsEmpty" v-bind:class="[{'c-empty':true}]">
        <slot name="c-empty"></slot>
      </div>
    </div>
    <div class="c-status-bar" v-if="(state === 1 || state === 0) && !pivotIsEmpty">
      <c-pager class="c-pager-rows" :appWindowIdent="appWindowIdent" :dataSetIdent="dataSetIdent" kind="determinate" sourceKind="pivot-rows" labelCount="wierszy"/>
      <c-pager class="c-pager-cols" :appWindowIdent="appWindowIdent" :dataSetIdent="dataSetIdent" kind="determinate" sourceKind="pivot-cols" labelCount="kolumn"/>
    </div>
  </div>
</template>
<script>
import base from "./c-base";
import controlUtils from "../classes/controlUtils";
import { mapGetters, mapActions } from "vuex";
import dataSetUtils from '../classes/dataSetUtils'
import Vue from 'vue'
import vuescroll from 'vue-scroll'
 
Vue.use(vuescroll)

export default {
  extends: base,
  data: function () {
    return {
      componentClass: "c-pivot-table",
      scrollTop: 0,
      scrollLeft: 0,
      isEditable: true,
      rowsHeight: 30,
      rowsWidth: 60,
      rowsHeadersWidth: 0,
      aggrsHeadersWidth: 0,
      clientHeight: 0,
      clientWidth: 0,
      setFocus:false
    };
  },
  created: function () {
    this.rowsHeight = this.rowsLastHeight
    this.rowsWidth = this.rowsLastWidth,
    this.rowsHeadersWidth = this.rowsSumWidth
    this.aggrsHeadersWidth = this.aggrsMaxWidth
  },
  mounted: function () {
    this.$nextTick(() => {
      this.clientHeight = this.$el.clientHeight
      this.clientWidth = this.$el.clientWidth
    })
    window.addEventListener('resize', this.handleResize)
  },
  updated: function(){
    if(this.setFocus && this.$refs['currentCell'] != null && this.$refs['currentCell'].length > 0)
      this.$nextTick(function () {
        this.$refs.currentCell[0].focus()
        this.setFocus = false
        if (this.dataSet.scrollDirection === dataSetUtils.scrollDirection.right || this.dataSet.scrollDirection === dataSetUtils.scrollDirection.left)
            this.$refs.rowData.scrollTop = this.scrollTop
        else if (this.dataSet.scrollDirection === dataSetUtils.scrollDirection.top || this.dataSet.scrollDirection === dataSetUtils.scrollDirection.bottom)
          this.$refs.rowData.scrollLeft = this.scrollLeft
        let payload = {
          dataSet: this.dataSet,
          scrollDirection: 0
        }
        this.setScrollDirection(payload)
      })
  },
  beforeDestroy: function () {
    window.removeEventListener('resize', this.handleResize)
  },
  watch: {
    state: function (val) {
      if (val === 1){
        this.setFocus = true
        switch(this.dataSet.scrollDirection){
          case dataSetUtils.scrollDirection.right:
            this.scrollLeft = 0
            this.$nextTick(() => {
              this.$refs.rowData.scrollTop = this.scrollTop
              this.$refs.rowData.scrollLeft = this.scrollLeft
            })
            break
          case dataSetUtils.scrollDirection.left:
            this.scrollLeft = 0
            this.$nextTick(() => {
              this.$refs.rowData.scrollTop = this.scrollTop
              this.$refs.rowData.scrollLeft = this.scrollLeft
            })
            break
          case dataSetUtils.scrollDirection.top:
            this.scrollTop = 0
            this.$nextTick(() => {
              this.$refs.rowData.scrollTop = this.scrollTop 
              this.$refs.rowData.scrollLeft = this.scrollLeft
            })
            break
          case dataSetUtils.scrollDirection.bottom:
            this.scrollTop = 0
            this.$nextTick(() => {
              this.$refs.rowData.scrollTop = this.scrollTop 
              this.$refs.rowData.scrollLeft = this.scrollLeft
            })
            break
          default:
            this.resetScrolls()
            break
        }
      }
      else if (val === 0)
        if (this.dataSet.scrollDirection === dataSetUtils.scrollDirection.right || this.dataSet.scrollDirection === dataSetUtils.scrollDirection.left)
          this.scrollLeft = 0
        else if (this.dataSet.scrollDirection === dataSetUtils.scrollDirection.top || this.dataSet.scrollDirection === dataSetUtils.scrollDirection.bottom)
          this.scrollTop = 0
        else
          this.resetScrolls()
    },
    scrollTop: function (val, oldVal) {
      let o = this.$refs.scrolledTop
      let goPageNoPrev = o.scrollTop === 0 && val < oldVal
      let goPageNoNext = o.scrollHeight - o.offsetHeight - val < 23 && val > oldVal && this.pivotRowsPageNo < this.pivotRowsPagesCount
      this.$nextTick(() => {
        if (!goPageNoNext && !goPageNoPrev) {
          o.scrollTop = val
        }
        if (goPageNoNext) {
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          };
          this.setDataSetPivotRowsPageNoNext(payloadPageOperation);
        }
        if (goPageNoPrev) {
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          };
          if (this.pivotRowsPageNo > 1) {
            this.setDataSetPivotRowsPageNoPrev(payloadPageOperation);
          }
        }
      });
    },
    scrollLeft: function (val, oldVal) {
      let o = this.$refs.scrolledLeft
      let goPageNoPrev = o.scrollLeft === 0 && val < oldVal
      let goPageNoNext = o.scrollWidth - o.offsetWidth - val < 22 && val > oldVal && this.pivotColsPageNo < this.pivotColsPagesCount
      this.$nextTick(() => {
        if (!goPageNoNext && !goPageNoPrev) {
          o.scrollLeft = val
        }
        if (goPageNoNext) {
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          };
          this.setDataSetPivotColsPageNoNext(payloadPageOperation);
        }
        if (goPageNoPrev) {
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          };
          if (this.pivotColsPageNo > 1) {
            this.setDataSetPivotColsPageNoPrev(payloadPageOperation);
          }
        }
      });
    }
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getFullPathHref'
    ]),
    rowShift: function () {
      return Math.floor(this.scrollTop / (this.aggrFields.length * this.rowsHeight))
    },
    rowMinVisible: function () {
      return Math.floor(this.scrollTop / (this.aggrFields.length * this.rowsHeight)) + 1
    },
    rowMaxVisible: function () {
      let result = Math.ceil((this.clientHeight + 78 + this.scrollTop) / (this.aggrFields.length * this.rowsHeight))
      return result <= this.pivotRows.length ? result : this.pivotRows.length
    },
    virtRowsCount: function () {
      return this.rowMaxVisible - this.rowMinVisible + 1
    },
    colShift: function () {
      return Math.floor(this.scrollLeft / this.rowsWidth)
    },
    colMinVisible: function () {
      return Math.floor(this.scrollLeft / this.rowsWidth) + 1
    },
    colMaxVisible: function () {
      let result = Math.ceil((this.clientWidth + 78 + this.scrollLeft) / (this.rowsWidth))
      return result <= this.pivotCols.length ? result : this.pivotCols.length
    },
    colMaxVisibleExt: function () {
      let result = Math.ceil((this.clientWidth + 78 + this.scrollLeft) / (this.rowsWidth))
      return result
    },
    virtColsCount: function () {
      return this.colMaxVisible - this.colMinVisible + 1
    },
    virtDataWidth: function () {
      return this.pivotCols.length * this.rowsWidth + 78
    },
    virtDataHeight: function () {
      return (this.pivotRows.length * this.aggrFields.length * this.rowsHeight) + 78
    },
    virtDataTop: function () {
      return (this.rowMinVisible - 1) * this.aggrFields.length * this.rowsHeight
    },
    virtDataLeft: function () {
      return (this.colMinVisible - 1) * this.rowsWidth
    },
    pivotCols: function () {
      return this.dataSet.pivotCols
    },
    pivotColsVisible: function () {
      return this.pivotCols.filter(item => item.c >= 1 && item.c <= 10)
    },
    pivotRows: function () {
      return this.dataSet.pivotRows
    },
    pivotRowsVisible: function () {
      return this.pivotRows.filter(item => item.r >= 1 && item.r <= 3)
    },
    pivotValues: function () {
      return this.dataSet.pivotValues
    },
    rowFields: function () {
      return this.getDataSetRowFields(this.dataSet);
    },
    colFields: function () {
      return this.getDataSetColFields(this.dataSet);
    },
    colFieldsCount: function () {
      return this.getDataSetColFieldsCount(this.dataSet);
    },
    rowFieldsCount: function () {
      return this.getDataSetRowFieldsCount(this.dataSet);
    },
    colsAndRows: function () {
      return [this.pivotCols, this.pivotRows];
    },
    colFieldsReverse: function () {
      return this.colFields.slice().reverse();
    },
    rowFieldsReverse: function () {
      return this.rowFields.slice().reverse();
    },
    colHeaderSize: function () {
      return this.colFields.filter(
        colField => colField.showHeader === undefined || colField.showHeader
      ).length;
    },
    colFooterSize: function () {
      return this.colFields.filter(colField => colField.showFooter).length;
    },
    rowHeaderSize: function () {
      return this.rowFields.filter(
        rowField => rowField.showHeader === undefined || rowField.showHeader
      ).length;
    },
    rowFooterSize: function () {
      return this.rowFields.filter(rowField => rowField.showFooter).length;
    },
    firstColFieldHeaderIndex: function () {
      return this.colFields.findIndex(
        colField => colField.showHeader === undefined || colField.showHeader
      );
    },
    firstColFieldFooterIndex: function () {
      return this.colFieldsReverse.findIndex(colField => colField.showFooter);
    }
  },
  methods: {
    ...mapActions("csAppWindowsUtils", [
      "setDataSetPivotColsPageNoPrev",
      "setDataSetPivotRowsPageNoPrev",
      "setDataSetPivotColsPageNoNext",
      "setDataSetPivotRowsPageNoNext",
      'setDataSetCurrentPivotIndex',
      'setScrollDirection',
      'setDataSetAggrFieldsCalc4Cols'
    ]),
    onShowColsAggrsChange: function(){
      let calc4Cols = this.showColsAggrs ? 0 : 1
      let payload = {
        dataSet: this.dataSet,
        calc4Cols: calc4Cols
      }
      this.setDataSetAggrFieldsCalc4Cols(payload)
    },
    handleCellFocusIn: function (colIndex, rowIndex, aggrFieldIdent) {
      let payload = {
        appWindowIdent: this.appWindowIdent,
        dataSetIdent: this.dataSetIdent,
        pivotCurrentRowIndex: rowIndex,
        pivotCurrentColIndex: colIndex,
        pivotCurrentDataFieldIdent: aggrFieldIdent
      }
      this.setDataSetCurrentPivotIndex(payload)
    },
    handleScroll: function (evt) {
      this.scrollTop = evt.target.scrollTop;
      this.scrollLeft = evt.target.scrollLeft;
    },
    handleResize: function () {
      this.clientHeight = this.$el.clientHeight
      this.clientWidth = this.$el.clientWidth
      if(this.$refs['lastRowHeader'] != null && this.$refs['lastRowHeader'].length > 0)
        this.rowsHeight = this.$refs.lastRowHeader[0].getBoundingClientRect().height
      if(this.$refs['lastColHeader'] != null && this.$refs['lastColHeader'].length > 0)
        this.rowsWidth = this.$refs.lastColHeader[0].getBoundingClientRect().width
    },
    spanSize: function (values, fieldIndex, valueIndex) {
      if (
        valueIndex > 0 &&
        values[valueIndex - 1][fieldIndex] === values[valueIndex][fieldIndex] &&
        (fieldIndex === 0 ||
          this.spanSize(values, fieldIndex - 1, valueIndex) === 0)
      ) {
        return 0;
      }
      let size = 1;
      let i = valueIndex;
      while (
        i + 1 < values.length &&
        values[i + 1][fieldIndex] === values[i][fieldIndex] &&
        (fieldIndex === 0 ||
          (i + 1 < values.length &&
            this.spanSize(values, fieldIndex - 1, i + 1) === 0))
      ) {
        i++;
        size++;
      }
      return size
    },
    getPivotRow: function (colIndex, rowIndex) {
      return this.pivotValues[this.getPivotRowKey(colIndex, rowIndex)]
    },
    rowAggrKey: function (rowIndex, aggrDataFieldIdent) {
      return this.getPivotRowKey(null, rowIndex) + (aggrDataFieldIdent !== null ? 'a' + aggrDataFieldIdent : '')
    },
    valueKey: function (colIndex, rowIndex, aggr) {
      return this.getPivotRowKey(colIndex, rowIndex) + (aggr !== null ? 'a' + aggr.dataFieldIdent : '')
    },
    getPivotValue: function (key, dataFieldIdent) {
      let values = this.pivotValues[key]
      let value = (values ? values['1'] : null)
      return value !== null && value !== undefined ? value[dataFieldIdent] : null
    },
    resetScrolls: function () {
      this.scrollTop = 0;
      this.scrollLeft = 0;
    },
    getFormatTypeClass: function (formatType) {
      return controlUtils.checkFormatType(formatType).formatTypeClass;
    },
    rowFieldsVisible: function (rowIndex, aggrIndex) {
      return this.rowFields.filter((rowField, rowFieldIndex) => {
        return (
          (rowField.showHeader === undefined || rowField.showHeader) &&
          this.spanSize(this.pivotRows, rowFieldIndex, rowIndex) !== 0 &&
          aggrIndex === 0
        );
      });
    },
    colFieldsVisible: function () {
      return this.colFields.filter(colField => {
        return colField.showHeader === undefined || colField.showHeader;
      });
    },
    pivotColsIndexVisible: function (colFieldIndex) {
      return this.pivotCols.filter((col, colIndex) => {
        return this.spanSize(this.pivotCols, colFieldIndex, colIndex) !== 0;
      });
    },
    getSlotValueName: function (dataFieldIdent, isReadOnly) {
      return 'slot-value-' + dataFieldIdent + '-' + (isReadOnly ? 'ro' : 'ed')
    },
    hasValueSlot: function (scopedSlots, dataFieldIdent, isReadOnly, isEditable) {
      return scopedSlots[this.getSlotValueName(dataFieldIdent, isReadOnly || !isEditable)] ? true : false
    },
    tabScroll: function(event, colIndex, rowIndex, aggrFieldIdent){
      if(event.shiftKey) { 
        if (this.colMinVisible > 1){
          this.$refs.rowData.scrollLeft -= this.rowsWidth
          this.handleCellFocusIn(colIndex - 1, rowIndex, aggrFieldIdent)
        }
        else if (colIndex === 0 && this.pivotColsPageNo > 1){
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          }
          this.setDataSetPivotColsPageNoPrev(payloadPageOperation);
        }
        else if(event.currentTarget.previousSibling != null)
          event.currentTarget.previousSibling.focus()
      }
      else {
        if (this.colMaxVisibleExt - 2 <  this.pivotCols.length){
          this.$refs.rowData.scrollLeft += this.rowsWidth
          this.handleCellFocusIn(colIndex + 1, rowIndex, aggrFieldIdent)
        }
        else if (colIndex === this.pivotCols.length - 1 && this.pivotColsPageNo < this.pivotColsPagesCount){
          let payloadPageOperation = {
            appWindowIdent: this.appWindowIdent,
            dataSet: this.dataSet
          }
          this.setDataSetPivotColsPageNoNext(payloadPageOperation);
        }
        else if(event.currentTarget.nextSibling != null)
          event.currentTarget.nextSibling.focus()
      }
    },
    getCellRef:function(colIndex, rowIndex, aggrFieldIdent){
      let result = null
      if (this.dataSet.pivotCurrentColIndex === colIndex && this.dataSet.pivotCurrentRowIndex === rowIndex && this.dataSet.pivotCurrentDataFieldIdent === aggrFieldIdent)
        result = 'currentCell'      
      return result
    }
  }
};
</script>

