<script setup>
const props = defineProps({
  info: Object
})

const entries = ref([])
const retrieve = async () => {
  if(props.info?.id) {
    const res = await $fetch('/api/materials/products/'+props.info.id+'/substitute', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      entries.value = res.records.map(item => {
        return {
          id: item?.id || item?.uid || '',
          client: item?.AD_Client_ID?.identifier || '',
          clientId: item?.AD_Client_ID?.id || '',
          organization: item?.AD_Org_ID?.identifier || '',
          organizationId: item?.AD_Org_ID?.id || '',
          isActive: item?.IsActive ?? true,
          name: item?.Name || '',
          description: item?.Description || '',
          product: item?.M_Product_ID?.identifier || item?.M_Product_ID?.Name || '',
          productId: item?.M_Product_ID?.id || '',
          substitute: item?.Substitute_ID?.identifier || '',
          substituteId: item?.Substitute_ID?.id || '',
          alert: {
            status: '',
            message: '',
            processing: false,
          }
        }
      })
    }
  }
}
onMounted(retrieve)
watch(() => props.info, () => {
  retrieve()
})
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Name</th>
            <th>Substitute</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(entries.length) === 0">
            <td colspan="3" class="align-center">No record found.</td>
          </tr>
          <tr v-for="(entry, index) in entries" :key="index">
            <td>{{ entry.name }}</td>
            <td>{{ entry.substitute }}</td>
            <td>{{ entry.description }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>