<template>
  <div>
    <slot
      :response="response"
      :loading="loading"
    />
  </div>
</template>

<script>
// require modules
const _ = require('lodash');
let host = require('../js/const').apiHost;

export default {
  name: 'FetchUpdateItems',
  data() {
    return {
      loading: true,
      response: '',
      isDev: process.env.NODE_ENV === 'development'
    }
  },
  computed: {
    jwt: function () {
      return this.$store.getters['User/jwt']
    },
  },
  mounted() {
    const vm = this
    // /* eslint-disable no-console */
  
    vm.getItems();
  },
  methods: {
    getItems() {
      const vm = this;

    

      if(vm.isDev) {
        host = require('../js/const').devApiHost;
      }

   
      const qs = require('qs');
      const query = qs.stringify({
        sort: ['id:asc'],
        pagination: {
          pageSize: 10,
          page: 1,
        },
      }, {
        encodeValuesOnly: true,
      });

      let url = `${host}/api/update-items?${query}`;

      const jwt = vm.jwt;
      if(jwt === null) {
        vm.loading = false;
        vm.response = null;
        return
      }

      fetch(url, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
          Authorization: `Bearer ${jwt}`
        }
      })
        .then(response => response.json())
        .then((response) => {
          // /* eslint-disable no-console */
        

          setTimeout(() => {
            vm.loading = false;
            vm.response = response
          }, 10);
        });
    }
  },
}
</script>

<style scoped>

</style>