<template>
  <div v-bind:class="[componentClass, listVisible && 'c-list-visible']">
    <div class="capcont">
      <div class="caption">{{caption}}</div>
      <div class="selvalue">{{this.getPageSizesActiveTranslatedDesc}}</div>
      <i v-on:click="toggleList()"></i>
    </div>
    <ul class="c-list">
     <li v-for="(obj, index) in this.getPageSizesIdents" v-bind:key="index" v-on:click="onItemClick(obj.pageSizesIdent)" v-bind:class="{'active' : (obj.pageSizesIdent==getPageSizesIdent)}">
          <div class="cap">{{obj.pageSizesTranslatedDesc}}</div>
      </li>
    </ul>
  </div>
</template>

<script>

import base from './c-base'
const props = {
  caption: {
    type: String,
    default: 'Rekordów na stronie:'
  }
}

import { mapGetters, mapActions } from 'vuex'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-pagesizer',
      listVisible: false
    }
  },
  props,
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetPageSizesIdents',
      'getDataSetPageSizesIdent',
      'getDataSetPageSizesActiveTranslatedDesc'
    ]),
    ...mapGetters("csDeviceDetection", ["deviceType"]),
    getPageSizesIdents: function () {
        return this.getDataSetPageSizesIdents(this.dataSet)
    },
    getPageSizesIdent: function () {
      return this.getDataSetPageSizesIdent(this.dataSet)
    },
    getPageSizesActiveTranslatedDesc: function () {
      return this.getDataSetPageSizesActiveTranslatedDesc(this.dataSet)
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetPageSizesIdent'
    ]),
    onItemClick: function (pageSizesIdent) {
      this.setDataSetPageSizesIdent({appWindowIdent: this.appWindowIdent, dataSet: this.dataSet, pageSizesIdent: pageSizesIdent})
      if(this.listVisible) this.listVisible = false
    },
    toggleList: function () {
      this.listVisible = !this.listVisible
    }
  }
}</script>
