<script setup>
defineProps({
  action: String,
  info: Object
})

const tab = ref('freight')
const tabs = ref([
  {value: 'freight', text: 'Freight'},
  {value: 'packaging', text: 'Packaging'},
  {value: 'label_type', text: 'Label Type'},
  {value: 'pickup_type', text: 'Pickup Types'},
])

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

<template>
  <div class="bt-2px_dashed_hexe2e2e2">
    <DetailRecordTab v-model="tab" :tabs="tabs" @handler="(val) => openTab(val.value)" />
    <MaterialsShipperDetailRecordFreight v-if="tab === 'freight'" :action="action" :info="info" />
    <MaterialsShipperDetailRecordPackaging v-else-if="tab === 'packaging'" :action="action" :info="info" />
    <MaterialsShipperDetailRecordLabelType v-else-if="tab === 'label_type'" :action="action" :info="info" />
    <MaterialsShipperDetailRecordPickupType v-else-if="tab === 'pickup_type'" :action="action" :info="info" />
  </div>
</template>