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

const tab = ref(props.zoom?.detail || 'users')
const tabs = ref([
  {value: 'users', text: 'Contacts (Users)'},
  //{value: 'interest_area', text: 'Interest Area'},
  //{value: 'bp_access', text: 'BP Access'},
  {value: 'locations', text: 'Locations'},
  {value: 'bank_accounts', text: 'Bank Accounts'},
  {value: 'shipping_accounts', text: 'Shipping Accounts'},
  {value: 'customer_accounting', text: 'Customer Accounting'},
  {value: 'vendor_accounting', text: 'Vendor Accounting'}
])


const openTab = async (val) => {
  if(tab.value !== val) {
    tab.value = val
    sessionStorage.setItem('partner_detail_record', tab.value)
  }
}
onMounted(() => {
  const getSessionStorageTab = sessionStorage.getItem('partner_detail_record')
  if(getSessionStorageTab) {
    openTab(getSessionStorageTab)
  }
})
watch(() => props.zoom, () => {
  if(props.zoom?.detail) {
    openTab(props.zoom.detail)
  }
})
</script>

<template>
  <div class="bt-2px_dashed_hexe2e2e2">
    <DetailRecordTab v-model="tab" :tabs="tabs" @handler="(val) => openTab(val.value)" />
    <PartnersPartnerDetailRecordLocation v-if="tab === 'locations'" :action="action" :info="info" :zoom="zoom" />
    <PartnersPartnerDetailRecordUser v-else-if="tab === 'users'" :action="action" :info="info" :zoom="zoom" />
    <PartnersPartnerDetailRecordBankAccount v-else-if="tab === 'bank_accounts'" :action="action" :info="info" />
    <PartnersPartnerDetailRecordShippingAccount v-else-if="tab === 'shipping_accounts'" :action="action" :info="info" />
    <PartnersPartnerDetailRecordCustomerAccounting v-else-if="tab === 'customer_accounting'" :action="action" :info="info" />
    <PartnersPartnerDetailRecordVendorAccounting v-else-if="tab === 'vendor_accounting'" :action="action" :info="info" />
  </div>
</template>