<script lang='ts' setup>
interface TabPaneProps {
  name: string | number;
  title: string;
  disabled?: boolean;
  closable?: boolean;
  lazy?: boolean;
}

const props = defineProps<TabPaneProps>();

// 注入父组件上下文
const tabsContext = inject<any>("tabs-context");
if (!tabsContext) {
  throw new Error("TabPane must be used inside Tabs");
}

// 当前是否为活跃状态
const isActive = computed(() => tabsContext.currentTab.value === props.name);

// 是否已经渲染过（用于lazy加载）
const hasRendered = ref(false);

// 监听active状态变化
watch(isActive, (active) => {
  if (active && !hasRendered.value) {
    hasRendered.value = true;
  }
}, { immediate: true });

// 注册到父组件
onMounted(() => {
  tabsContext.registerTabPane({
    name: props.name,
    title: props.title,
    disabled: props.disabled,
    closable: props.closable,
  });
});

// 卸载时注销
onUnmounted(() => {
  tabsContext.unregisterTabPane({
    name: props.name,
    title: props.title,
    disabled: props.disabled,
    closable: props.closable,
  });
});

// 计算pane样式类
const paneClasses = computed(() => [
  "ui-tab-pane",
  {
    "ui-tab-pane--active": isActive.value,
    "ui-tab-pane--animated": tabsContext.animated.value,
  },
]);
</script>

<template>
  <!-- Tab Content -->
  <div
    v-if="!lazy || hasRendered"
    v-show="isActive"
    :class="paneClasses"
    :style="tabsContext.paneStyle.value"
  >
    <slot />
  </div>
</template>

<style scoped>
@reference "tailwindcss";

/* Tab Panes */
.ui-tab-pane {
  @apply w-full;
}

.ui-tab-pane--animated {
  @apply transition-opacity duration-200;
}
</style>
