<template>
	<div class="v-error" v-if="error"><h3>Error:<pre> {{ error }}</pre></h3></div>
  <div class="v-loaded" v-else-if="results">
    <h3>{{ results }}</h3>
		<h3>PersonID: {{ personId }}, FirstName: {{ firstName }}, LastName: {{ lastName }}</h3>
  </div>
</template>

<script setup>

import { useFetch } from '../composables/useFetch.js'
import { isProxy, toRaw, ref } from 'vue';
const personId = ref('');
const firstName = ref('');
const lastName = ref('');


const apiURL = jsData.api_url;

const { makeFetch, results, error } = useFetch();

await makeFetch(apiURL);

console.log("results value", results.value);

if(isProxy(results.value)) {
	const rawObj = toRaw(results.value);
	console.log("rawObj", rawObj);

	console.log('personId', Object.keys(rawObj)[0]);
	personId.value = Object.keys(rawObj)[0];

	console.log('firstName', rawObj[Object.keys(rawObj)[0]].firstName);
	firstName.value = rawObj[Object.keys(rawObj)[0]].firstName;

	console.log('lastName', rawObj[Object.keys(rawObj)[0]].lastName);
	lastName.value = rawObj[Object.keys(rawObj)[0]].lastName;
}

console.log('ListData error:', error.value);

</script>

<style scoped>

.vue-loaded h3 {
  color: #555555;
  padding: 20px;
}

</style>