<template>
  <div v-bind:class="[componentClass, listVisible && 'c-list-visible']">
    <div class="caption c-caption">{{caption}}</div>
    <div class="selvalue">
      <input 
        class="edit"
        :id="componentId + 'e'"
        v-model="layoutActiveTranslatedDesc"
        :disabled="isDisabled"
      />
      <i v-on:click="toggleList()"></i>
      <ul class="c-list">
        <li v-for="(obj, index) in layouts" v-bind:key="index" v-on:click="onItemClick(obj.layoutIdent)" v-bind:class="{'active' : (obj.layoutIdent==layoutIdent)}">
          <div class="cap">{{obj.layoutTranslatedDesc}}</div>
        </li>
      </ul>
    </div>
    <div class="checkbox default" v-if="canEdit">
      <input 
        :id="componentId + 'g'"
        type="checkbox"
        v-model="isDefault"
      />
      <label
        :for="componentId + 'g'"
        class="c-checkbox"
      ></label>
      <label class="c-label" :for="componentId + 'g'">Domyślny</label>
    </div>
    <c-btna class="saveLayout"
      v-if="canEdit"
      @beforeExec="beforeSave()"
      :appWindowIdent="appWindowIdent"
      :dataSetIdent="dataSetIdent"
      actionIdent="saveLayout"
    />
    <c-btna class="deleteLayout ManageD"
      v-if="canEdit"
      :appWindowIdent="appWindowIdent"
      :dataSetIdent="dataSetIdent"
      :label="delLabel"
      actionIdent="deleteLayout"
    />
  </div>
</template>

<script>

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

import { mapGetters, mapActions } from 'vuex'

export default {
  extends: base,
  components:{
    'c-btna': cBtna
  },
  data: function () {
    return {
      componentClass: 'c-layouts-manager',
      listVisible: false,
      isDisabled: false,
      layoutName: null
    }
  },
  props,
  created() {
    // we register the item-template component here
    // without having to declare it in the components() section
  },
  computed: {
    ...mapGetters('csAppWindowsUtils', [
      'getDataSetLayoutIdents',
      'getDataSetLayoutIdent',
      'getDataSetLayoutActiveTranslatedDesc',
      'getDataSetLayoutStandard'
    ]),
    layouts: function () {
        return this.getDataSetLayoutIdents(this.dataSet)
    },
    canEdit: function(){
      return this.layout ? this.layout.usrDef === 1 && this.layout.owner === 1 : false
    },
    layoutActiveTranslatedDesc: {
      get: function () {
        return this.getDataSetLayoutActiveTranslatedDesc(this.dataSet)
      },
      set: function(value){
        this.layoutName = value
      }
    },
    isDefault: {
      get: function () {
        return this.layout ? this.layout.default === 1 : false
      },
      set: function(value){
        this.setLayoutAttr({
          layout: this.layout,
          key: 'default',
          value: value ? 1 : 0
        })
      }
    },
    delLabel:function(){
      return this.getDataSetLayoutStandard(this.dataSet, this.layoutIdent) 
        ? 'Przywróć standardowy'
        : undefined
    }
  },
  methods: {
    ...mapActions('csAppWindowsUtils', [
      'setDataSetLayoutIdent',
      'setLayoutAttr'
    ]),
    onItemClick: function (layoutIdent) {
      this.setDataSetLayoutIdent({appWindowIdent: this.appWindowIdent, dataSet: this.dataSet, layoutIdent: layoutIdent})
      if(this.listVisible) this.listVisible = false
    },
    toggleList: function () {
      this.listVisible = !this.listVisible
    },
    beforeSave: function (){
      if (this.layoutName == null)
        return
      let layout = this.layout
      this.setLayoutAttr({
        layout: layout,
        key: 'layoutIdent',
        value: this.layoutName
      })
      this.setLayoutAttr({
        layout: layout,
        key: 'layoutTranslatedDesc',
        value: this.layoutName
      })
      this.setDataSetLayoutIdent({appWindowIdent: this.appWindowIdent, dataSet: this.dataSet, layoutIdent: this.layoutName})
    }
  },
  watch:{
    layoutIdent: function(){
      this.layoutName = null
    }
  }
}</script>
