<template>
    <div class="table-container">
      <b-row>
        <b-col v-if="lengthChange" md="4" class="mb-3">
          <b-form inline>
            <label class="mr-2">Show</label>
            <b-form-select v-model="perPage" :options="pageOptions" class="mr-2" @input="onContextChanged" />
            <label>entries per page</label>
          </b-form>
        </b-col>
      </b-row>
      <slot />
      <b-row>
        <b-col md="4" class="mx-auto">
          <b-pagination v-if="paging && totalRows > perPage" v-model="currentPage" :total-rows="totalRows" :per-page="perPage"
                        class="justify-content-center" @input="onContextChanged"
          />
        </b-col>
      </b-row>
    </div>
  </template>
  
  <script>
  import axios from 'axios'
  
  export default {
    name: 'Datatable',
    props: {
      lengthChange: {
        type: Boolean,
        default: true
      },
      paging: {
        type: Boolean,
        default: true
      },
      infos: {
        type: Boolean,
        default: true
      },
      searchRoute: {
        type: String,
        default: null
      }
    },
    data () {
      return {
        currentPage: 1,
        perPage: 10,
        totalRows: 0,
        pageOptions: [5, 10, 15, 25, 50],
        searchQuery: null,
        selected: [],
        action: null
      }
    },
    mounted () {
      if (this.actions) {
        this.action = Object.keys(this.actions)[0]
      }
    },
    methods: {
      onContextChanged () {
        this.$emit('context-changed')
      },
      async loadData (sortBy, sortDesc) {
        try {
          const { data } = await axios.get(this.searchRoute, {
            params: {
              page: this.currentPage,
              perPage: this.perPage,
              column: sortBy,
              direction: sortDesc ? 'desc' : 'asc'
            }
          })
          this.totalRows = data.total
          return data.data
        } catch (e) {
          console.error(e)
          return []
        }
      }
    }
  }
  </script>