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

/*const entries = ref([])
const retrieve = async () => {
  if(props.info?.id) {
    const res = await $fetch('/api/materials/products/'+props.info.id+'/price', {
      headers: useRequestHeaders(['cookie'])
    })
    if(res) {
      entries.value = res.records
    }
  }
}
onMounted(retrieve)
watch(() => props.info, () => {
  retrieve()
})*/
</script>

<template>
  <div class="detailRecordResponsive">
    <div class="tableResponsive">
      <table class="table tableList tableFlush">
        <thead>
          <tr> 
            <th>Price List Version</th>
            <th>Valid from</th>
            <th>List Price</th>
            <th>Standard Price</th>
            <th>Margin</th>
            <th>Limit Price</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="Number(items.length) === 0">
            <td colspan="6" class="align-center">No record found.</td>
          </tr>
          <tr v-for="(entry, index) in items" :key="index">
            <td>{{ entry?.M_PriceList_Version_ID?.identifier || '' }}</td>
            <td>{{ entry?.Created?.split('T')?.[0] || '' }}</td>
            <td>{{ entry?.PriceList || 0 }}</td>
            <td>{{ entry?.PriceStd || 0 }}</td>
            <td>{{ entry?.Margin || 0 }}</td>
            <td>{{ entry?.PriceLimit || 0 }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>