<script setup>
const props = defineProps({
  action: String,
  info: Object,
  tab: String
})

const tab = ref(props.modelValue || 'invoice_line')
const tabs = ref([
  {value: 'invoice_line', text: 'Invoice Line'},
  {value: 'invoice_tax', text: 'Invoice Tax'},
  {value: 'payment_schedule', text: 'Payment Schedule'}
])

watch(() => props.tab, () => {
  tab.value = props.tab
})

const openTab = async (val) => {
  if(tab.value !== val) {
    tab.value = val
    sessionStorage.setItem('procurements_invoice_detail_record', tab.value)
  }
}
onMounted(() => {
  const getSessionStorageTab = sessionStorage.getItem('procurements_invoice_detail_record')
  if(getSessionStorageTab) {
    openTab(getSessionStorageTab)
  }
})
</script>

<template>
  <div class="card sd-none bd-1px_solid_hexe4e3e6">
    <DetailRecordTab v-model="tab" :tabs="tabs" @handler="(val) => openTab(val.value)" />
    <ProcurementsInvoiceDetailRecordLine v-if="tab === 'invoice_line'" :action="action" :info="info" />
    <ProcurementsInvoiceDetailRecordTax v-else-if="tab === 'invoice_tax'" :action="action" :info="info" />
    <ProcurementsInvoiceDetailRecordPaymentSchedule v-else-if="tab === 'payment_schedule'" :action="action" :info="info" />
  </div>
</template>