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

<script>
import LoginVue from '../../views/Login.vue';
  // require modules
  /* eslint-disable no-unused-vars */
  const _ = require('lodash');
  let host = require('../js/const').host;
  const apikey = require('../js/const').apikey;

  export default {
    name: "FetchCondensate",
    props: ['condensate'],
    data() {
      return {
        response: null,
        loading: false,
        isDev: process.env.NODE_ENV === 'development'
      }
    },
    mounted() {
      const vm = this
      // /* eslint-disable no-console */
      // console.log(vm.locus);
      vm.getItems();
    },
    methods: {
      getItems() {
        const vm = this

        // /* eslint-disable no-console */
        // console.log(vm.incDesc);

        vm.loading = true

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

        let url = `${host}/condensates/${vm.condensate}`;
       

       console.log("url is", url);

        if (vm.condensate && !_.isEmpty(vm.condensate)) {
          fetch(url, {
            method: 'GET',
            mode: 'cors',
            cache: 'no-cache',
            headers: {
              Authorization: `Bearer ${apikey}`
            }
          })
            .then(response => response.json())
            .then((response) => {
              // /* eslint-disable no-console */
              // console.log(response);

              setTimeout(() => {
                vm.loading = false;
                vm.response = response

                // console.log(response);
                // if (response && !_.isEmpty(response)) {
                //   this.response = _.flatMap(response, (n) => [{ text: n.name, style: 'background-color: ' + n.color }]);
                // }
              }, 10);
            });
        } else {
          vm.loading = false;
          vm.response = ''
        }
      }
    },
  }
</script>

<style scoped>
    .mainContent {
        padding: 20px;
    }
</style>