<template>
    <view class="wrapper">
        <view class="fb-tabs">
            <uv-subsection :list="tabList" :current="current" @change="change"></uv-subsection>
        </view>
        <view class="fb-tabs-placeholder"></view>
        <view class="fb-tabs-content">
            <view class="wrapper" v-if="keepAlive">
                <view class="wrapper" v-for="(item, index) in items" :key="index">
                    <ref-fb-component v-show="current === index" :componentClass="item.component.componentClass"
                        :input="input" />
                </view>
            </view>
            <view class="wrapper" v-else>
                <view class="wrapper" v-for="(item, index) in items" :key="index">
                    <ref-fb-component v-if="current === index" :componentClass="item.component.componentClass" :input="input" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';

import type { TabsLayoutProps } from '../../types/components/layout';

const { items, keepAlive, defaultActiveTab } = defineProps<TabsLayoutProps>()

console.log('items', items)

const tabList: string[] = items.map(item => item.label)
const current = ref(defaultActiveTab)
const change = (index: number) => {
    current.value = index
}
</script>

<style lang="less" scoped>
.wrapper {
    display: contents;
}

.fb-tabs {
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 999;
}

.fb-tabs-placeholder {
    height: 32px;
}

.fb-tabs-content {
    height: calc(100% - 32px);
}

</style>