<template>
    <div
      v-if="paginationInfo.pages > 0"
      class="d-flex align-items-center mb-4"
      :class="pagination.alignment['between']"
    >
      <div>
        <span>{{
          paginationInfo.offset * paginationInfo.limit + paginationInfo.limit
        }}</span>
        <span> - </span>
        <span>{{ paginationInfo.offset * paginationInfo.limit }}</span>
        <span> از </span>
        <span>{{ paginationInfo.total }}</span>
        <span> رکورد</span>
      </div>

      <div class="d-flex align-items-center ">
        <div class="form-group d-flex align-items-center ml-3 mb-0">
          <label for="exampleFormControlSelect1" class="no-wrap mx-2 mb-0">
            تعداد سطرها
          </label>

          <select
            v-model="paginationInfo.limit"
            @change="limitChanged"
            class="form-control"
            id="exampleFormControlSelect1"
          >
            <option :value="5">5</option>
            <option :value="10">10</option>
            <option :value="15">15</option>
            <option :value="20">20</option>
            <option :value="25">25</option>
            <option :value="50">50</option>
            <option :value="75">75</option>
            <option :value="100">100</option>
          </select>
        </div>
        <paginate
          v-model="paginationInfo.page"
          :page-count="paginationInfo.pages"
          :page-range="3"
          :margin-pages="2"
          :click-handler="clickCallback"
          :prev-text="'قبلی'"
          :next-text="'بعدی'"
          :last-button-text="'آخر'"
          :first-button-text="'ابتدا'"
          :container-class="pagination.containerClass"
          :page-class="pagination.pageClass"
          :page-link-class="pagination.linkClass"
          :prev-class="pagination.prevClass"
          :prev-link-class="pagination.prevLinkClass"
          :next-class="pagination.nextClass"
          :next-link-class="pagination.nextLinkClass"
        >
        </paginate>
      </div>
    </div>
</template>

<script>
// import tableAndListMixin from "../mixins/tableAndListMixin";

export default {
props:{
  paginationInfo:{
    default(){
      return {
        
      }
    }
  }
}
};
</script>

<style lang="scss">
.my-handle {
  cursor: move;
}

// .sortable-ghost {
//   visibility: hidden;
//   opacity: 0;
//   display: none;
// }
// .sortable-choosen {
//   visibility: hidden;
//   opacity: 0;
//   display: none;
// }
</style>
