<script>
  import axios from 'axios'
  export default {
    data () {
      return {
        search: '',
        totalItems: 0,
        items: [],
        loading: true,
        pagination: {},
        headers: [
          { text: 'Username', value: 'username' },
          { text: 'Email', value: 'email' }
        ]
      }
    },
    watch: {
      pagination: {
        handler () {
          this.getDataFromApi()
        },
        deep: true
      }
    },
    mounted () {
      this.getDataFromApi()
    },
    methods: {
      getDataFromApi () {
        this.loading = true
        const { sortBy, descending, page, rowsPerPage } = this.pagination
        const searchval = this.search
        let ordering = null
        let offset = null
        if (descending) {
          ordering = '-' + sortBy
        } else {
          ordering = sortBy
        }
        offset = (page - 1) * rowsPerPage
        axios({
          method: 'get',
          baseURL: '/api/users/?offset=' + offset + '&limit=' + rowsPerPage + '&ordering=' + ordering + '&search=' + searchval,
          headers: {
            Authorization: 'Token bc7ff5323264d2e80afb50a9ec2d93d15bb3c696'
          }
        })
        .then((response) => {
          console.log(response)
          this.items = response.data.results
          this.totalItems = response.data.count
          this.loading = false
        })
        .catch((error) => {
          console.log(error)
          this.loading = false
        })
      }
    }
  }
</script>