<script setup>
const boMTab = useBoMTab()

defineProps({
  action: String,
  info: Object
})

const tab = ref(boMTab.value ?? 'bom')  
const tabs = ref([
  {value: 'bom', text: 'BOM'},
  {value: 'components', text: 'Components'},
  {value: 'substitute', text: 'Substitute'},
  {value: 'related', text: 'Related'},
  {value: 'replenish', text: 'Replenish'},
  {value: 'purchasing', text: 'Purchasing'},
  {value: 'partner', text: 'Business Partner'},
  {value: 'price', text: 'Price'},
  {value: 'accounting', text: 'Accounting'},
  {value: 'transaction', text: 'Transactions'},
  {value: 'translation', text: 'Translation'},
  {value: 'located_at', text: 'Located at'},
  {value: 'conversion', text: 'UOM Conversion'},
  {value: 'cost', text: 'Costs'},
  {value: 'reserved_quantity_log', text: 'Reserved Quantity Log'},
  {value: 'ordered_quantity_log', text: 'Ordered Quantity Log'}
])

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

<template>
  <div class="bt-2px_dashed_hexe2e2e2">
    <DetailRecordTab v-model="tab" :tabs="tabs" @handler="(val) => openTab(val.value)" />
    <MaterialsProductDetailRecordBom v-if="tab === 'bom'" :action="action" :info="info" />  
    <MaterialsProductDetailRecordComponents v-else-if="tab === 'components'" :action="action" :info="info" />
    <MaterialsProductDetailRecordSubstitute v-else-if="tab === 'substitute'" :action="action" :info="info" />
    <MaterialsProductDetailRecordRelated v-else-if="tab === 'related'" :action="action" :info="info" />
    <MaterialsProductDetailRecordReplenish v-else-if="tab === 'replenish'" :action="action" :info="info" />
    <MaterialsProductDetailRecordPurchasing v-else-if="tab === 'purchasing'" :action="action" :info="info" />
    <MaterialsProductDetailRecordPartner v-else-if="tab === 'partner'" :action="action" :info="info" />
    <MaterialsProductDetailRecordPrice v-else-if="tab === 'price'" :action="action" :info="info" />
    <MaterialsProductDetailRecordAccounting v-else-if="tab === 'accounting'" :action="action" :info="info" />
    <MaterialsProductDetailRecordTransaction v-else-if="tab === 'transaction'" :action="action" :info="info" />
    <MaterialsProductDetailRecordTranslation v-else-if="tab === 'translation'" :action="action" :info="info" />
    <MaterialsProductDetailRecordLocatedAt v-else-if="tab === 'located_at'" :action="action" :info="info" />
    <MaterialsProductDetailRecordConversion v-else-if="tab === 'conversion'" :action="action" :info="info" />
    <MaterialsProductDetailRecordCost v-else-if="tab === 'cost'" :action="action" :info="info" />
    <MaterialsProductDetailRecordReservedQtyLog v-else-if="tab === 'reserved_quantity_log'" :action="action" :info="info" />
    <MaterialsProductDetailRecordOrderedQtyLog v-else-if="tab === 'ordered_quantity_log'" :action="action" :info="info" />
  </div>
</template>