<template>
 <div v-bind:class="[componentClass]">
  <span
   v-if="state === 0 && showDataProgress"
   v-bind:class="[slotClasses, slotSubClass, { progress: true }]"
  >
   <slot v-if="$scopedSlots.value" name="progress"></slot>
   <template v-else>
    <c-data-progress></c-data-progress>
   </template>
  </span>
  <span
   v-if="state === -1"
   v-bind:class="[slotClasses, slotSubClass, { errors: true }]"
  >
   <slot v-if="$scopedSlots.value" name="errors"></slot>
   <template v-else>
    <c-data-errors></c-data-errors>
   </template>
  </span>
  <template v-if="state === 1 && !rowsIsEmpty">
   <span
    v-for="(row, index) in rows"
    :key="index"
    v-on:click="onClickRow(row)"
    v-bind:class="[slotClasses, slotSubClass, { active: row == currentRow }]"
   >
    <slot v-bind:name="slotName" v-bind:row="row"></slot>
   </span>
  </template>
  <span
   v-if="state === 1 && rowsIsEmpty && showDataEmpty"
   v-bind:class="[slotClasses, slotSubClass, { empty: true }]"
  >
   <slot v-if="$scopedSlots.value" name="empty"></slot>
   <template v-else>
    <c-data-empty></c-data-empty>
   </template>
  </span>
 </div>
</template>

<script>
import base from "./c-base";
import { mapGetters } from "vuex";
import cDataProgress from "./c-data-progress"
import cDataEmpty from "./c-data-empty"

export default {
 extends: base,
 components: {
  "c-data-progress": cDataProgress,
  "c-data-empty": cDataEmpty,
 },
 data: function() {
  return {
   componentClass: "c-breadcrumb"
  };
 },
 props: {
  slotNamedDataSetIdent: {
   type: String,
   default: null
  },
  slotNamedDataFieldIdent: {
   type: String,
   default: null
  },
  slotClasses: {
   type: String,
   default: null
  },
  slotSubClassPrefix: {
   type: String,
   default: null
  },
  addSlotSubClass: {
   type: Boolean,
   default: false
  },
  showDataProgress: {
    type: Boolean,
    default: true
  },
  showDataEmpty: {
    type: Boolean,
    default: true
  }
 },
 computed: {
  ...mapGetters("csAppWindowsUtils", [
   "getDataSet",
   "getDataSetRowsFieldValue"
  ]),
  slotName: function() {
   return this.slotNamedDataSetIdent !== null &&
    this.slotNamedDataFieldIdent !== null
    ? this.getDataSetRowsFieldValue(
       this.getDataSet(this.appWindowIdent, this.slotNamedDataSetIdent),
       this.slotNamedDataFieldIdent
      )
    : "item";
  },
  slotSubClass: function() {
   return this.addSlotSubClass && this.slotSubClassPrefix
    ? this.slotSubClassPrefix + this.slotName
    : null;
  }
 },
 methods: {
  onClickRow: function(row) {
   this.setDataSetCurrentRow({
    appWindowIdent: this.appWindowIdent,
    dataSet: this.dataSet,
    row: row
   });
  }
 }
};
</script>
