<script setup lang='ts'>
import { ref } from 'vue'
import { resourceServer } from '@/main'

const props = defineProps({
  resourceName: String,
  resourceId: String,
})

let _class: String = ref("")
let _title: String = ref("")

const init = async (props) => {
  const url = props.resourceId ? `${props.resourceName}/${props.resourceId}` : props.resourceName 
  await resourceServer.get(url).then(
    resp => {
      _class.value = `hasResponseStatus status-${resp.status}`
      _title.value = `Response code: ${resp.status} - ${resp.statusText}`
    }
  ).catch(
    err => {
      _class.value = `hasResponseStatus status-${err.response.status}`
      _title.value = `Response code: ${err.response.status} - ${err.response.statusText}`
    }
  )
}

init(props);

</script>

<template>
  <button :class="_class" :title="_title" @click="$emit('getResource', $event)"></button>
</template>
