<script setup>
const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  parentProps: {
    type: Object,
    default: () => ({}),
  },
})

const tabsRef = ref(null)
const type = ref(props?.tabs[0].value)
const updateTab = value => {
  type.value = value

  setTimeout(() => {
    if (tabsRef.value.barElRef) {
      // const width = tabsRef.value.barElRef.style.width
      // console.log(width, 'width')
      const index = props.tabs.findIndex(tab => tab.value === value)
      tabsRef.value.barElRef.style.left = `${index * 56 + index * 36}px`
    }
  }, 0)
}
</script>

<template>
  <n-tabs
    ref="tabsRef"
    class="h-full w-full"
    tab-style="padding-top:0;width: 56px;display:flex;justify-content: center;"
    @update:value="updateTab"
  >
    <n-tab-pane
      type="line"
      class="overflow-auto"
      v-for="(tab, index) in tabs"
      :key="index"
      :name="tab.value"
      :tab="tab.name"
    >
      <component :is="tab.component" :type="type" />
    </n-tab-pane>
  </n-tabs>
</template>

<style scoped lang="scss"></style>
