<template>
  <div>

    <template v-f="dogs.length > 0">
      <table class="table table-striped">
        <thead>
          <th>Breed</th>
          <th>Age</th>
          <th>Sex</th>
        </thead>
        <tbody>
          <template v-for="dog in dogs">
            <tr :key="dog.id">
              <td>{{ dog.breed }}</td>
              <td>{{ dog.age }}</td>
              <td>{{ dog.sex }}</td>
            </tr>
          </template>
        </tbody>
      </table>

      <laravue-paginator v-if="pagination"
        :pagination="pagination"
        :plus-min-range="2"
        change-event="page:updated"
        :event-emitter="eventHub"
      ></laravue-paginator>

    </template>

    <h4 v-else>No dogs :(</h4>

  </div>
</template>

<script>
  import LaravuePaginator from 'laravue-paginator'

  export default {
    components: {LaravuePaginator},

    data() {
      return {
        eventHub,
        dogs: [],
        pagination: null
      }
    },

    created() {
      this.fetch_dogs()

      this.eventHub.$on('page:updated', (event) => {
        this.fetch_dogs(event.page)
      })
    },

    computed: {
      req_params() {
        page: this.pagination.current_page,
        perPage: this.pagination.per_page,
      }
    },

    methods: {
      fetch_dogs(page = 1) {
        const params = Object.assign(this.req_params, {page})
        axios.get('/api/dogs', {params})
          .then(this.map_response_data)
          .catch((err) => {console.error(err)})
      },
      map_response_data({data: {data, ...pagination}}) {
        this.dogs = data
        this.pagination = pagination
      }
    }

  }
</script>