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

<script>

import base from './c-base'
const props = {
  caption: {
    type: String,
    default: 'Sortuj:'
  }
}

import { mapGetters, mapActions } from 'vuex'

export default {
  extends: base,
  data: function () {
    return {
      componentClass: 'c-sorter',
      listVisible: false
    }
  },
  props,
  created() {
    // we register the item-template component here
    // without having to declare it in the components() section
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetSortIdents',
      'getDataSetSortIdent',
      'getDataSetSortActiveTranslatedDesc',
      'getDataSetSortActiveIdent'
    ]),
    getSortIdents: function () {
        return this.getDataSetSortIdents(this.dataSet)
    },
    getSortIdent: function () {
      return this.getDataSetSortIdent(this.dataSet)
    },
    getSortActiveTranslatedDesc: function () {
      return this.getDataSetSortActiveTranslatedDesc(this.dataSet)
    },
    getSortActiveIdent: function () {
      return this.getDataSetSortActiveIdent(this.dataSet)
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetSortIdent'
    ]),
    onItemClick: function (sortIdent) {
      this.setDataSetSortIdent({appWindowIdent: this.appWindowIdent, dataSet: this.dataSet, sortIdent: sortIdent})
      if(this.listVisible) this.listVisible = false
    },
    toggleList: function () {
      this.listVisible = !this.listVisible
    }
  },
}</script>
