<template>
  <div v-bind:class="[componentClass]" >
    <div class="c-pivot-settings-btn" title="Ustawienia" v-if="!settingsVisible" v-on:click="showSettings">&#xe913;</div>
    <div class="c-pivot-settings-content" v-if="settingsVisible">
      <div class="c-settings-tabs">
        <div class="c-settings-tab" :class="{'c-active':settingsTabSelected === 1}" v-on:click="settingsTabSelected = 1">Układ danych</div>
        <div class="c-settings-tab" :class="{'c-active':settingsTabSelected === 2}" v-on:click="settingsTabSelected = 2">Eksporty</div>
      </div>
      <div class="c-pivot-settings-btn-close" v-on:click="hideSettings">Zamknij</div>
      <div class="c-pivot-settings-area" v-if="settingsTabSelected === 1">
        <div class="c-display-flex-direction-row c-flex-1">
          <div class="c-pivot-settings-fields">
            <div>Dostępne pola</div>
            <div>
              <div
                v-for="(field) in fieldsIdents"
                :key="field.dataFieldIdent"
                draggable="true"
              >{{ field.dataFieldColTranslatedDesc }}</div>
            </div>
          </div>
          <div class="c-pivot-settings-cols">
            <div>Kolumny</div>
            <div>
              <div
                v-for="(colField) in colFields"
                :key="colField.dataFieldIdent"
                draggable="true"
              >{{ colField.dataFieldColTranslatedDesc }}</div>
            </div>
          </div>
          <div class="c-pivot-settings-rows">
            <div>Wiersze</div>
            <div>
              <div
                v-for="(rowField) in rowFields"
                :key="rowField.dataFieldIdent"
                draggable="true"
              >{{ rowField.dataFieldColTranslatedDesc }}</div>
            </div>
          </div>
          <div class="c-pivot-settings-aggrs">
            <div>Agregaty</div>
            <div>
              <div v-for="(aggrField) in aggrFields" :key="aggrField.dataFieldIdent" draggable="true">
                <div>{{ aggrField.aggrType }}({{ aggrField.aggrTranslatedDesc }})</div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-pivot-settings-add c-display-flex-direction-column">
          <div class="c-display-flex">
              <!-- <input type="checkbox" :id="appWindowIdent + '.' + dataSetIdent + '.showColsAggrs'" :checked="showColsAggrs" v-on:change="onShowColsAggrsChange($event)" />
              <label class="c-checkbox" :for="appWindowIdent + '.' + dataSetIdent + '.showColsAggrs'"  />Pokaż agregacje dla kolumn -->
          </div>
          <!-- <div class="c-display-flex">
              <input type="checkbox" :id="appWindowIdent + '.' + dataSetIdent + '.showRowsAggrs'" :checked="showRowsAggrs" v-on:change="onShowRowsAggrsChange($event)" />
              <label class="c-checkbox" :for="appWindowIdent + '.' + dataSetIdent + '.showRowsAggrs'"  />Pokaż agregacje dla wierszy
          </div> -->
        </div>
      </div>
      <div class="c-pivot-exports-area"  v-if="settingsTabSelected === 2">
        <div class="c-settings-export">
            <c-btna style="width: 180px;"
              :appWindowIdent="appWindowIdent"
              :dataSetIdent="dataSetIdent"
              actionIdent="exportXLSX"
            />
        </div>
      </div>
      <div class="c-pivot-settings-footer">
        <div class="c-settings-btn-refresh c-btna ManageU" v-on:click="clear">Wyczyść</div>
        <div class="c-settings-btn-refresh c-btna ManageI" v-on:click="refresh">Odśwież</div>
        <div class="c-settings-btn-refresh c-btna ManageD" v-on:click="hideSettings">Zamknij</div>
      </div>
    </div>
  </div>
</template>

<script>
import base from "./c-base";
import { mapActions } from 'vuex'
import cBtna from "./c-btna"

export default {
  extends: base,
  data: function () {
    return {
      componentClass: "c-pivot-settings",
      settingsVisible: false,
      settingsTabSelected: 1
    };
  },
  components: {
    "c-btna": cBtna,
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetAggrFieldsCalc4Cols',
      'setDataSetAggrFieldsCalc4Rows'
    ]),
    showSettings: function () {
      this.settingsVisible = true;
    },
    hideSettings: function () {
      this.settingsVisible = false;
    },
    onShowColsAggrsChange: function(event){
      let calc4Cols = event.target.checked ? 1 : 0
      let payload = {
        dataSet: this.dataSet,
        calc4Cols: calc4Cols
      }
      this.setDataSetAggrFieldsCalc4Cols(payload)
    },
    onShowRowsAggrsChange: function(event){
      let calc4Rows = event.target.checked ? 1 : 0
      let payload = {
        dataSet: this.dataSet,
        calc4Rows: calc4Rows
      }
      this.setDataSetAggrFieldsCalc4Rows(payload)
    }
  }
};
</script>
