<template>
    <view>
        <view class="segmented-container">
            <view class="segmented-title">
                {{ title }}
            </view>
            <!-- <view class="segmented-tabs">
                <view :class="'tab-item' + (current === index ? ' active' : '')" v-for="(item, index) in items" :key="index" @click="change(index)">
                    {{item.label}}
                </view>
            </view> -->
            <view class="segmented-tabs">
                    <uv-subsection mode="subsection" :list="tabList" :current="current" @change="change"></uv-subsection>
            </view>
        </view>
        <view v-if="keepAlive">
            <view v-for="(item, index) in items" :key="index">
                <ref-fb-component v-show="current === index" :componentClass="item.component.componentClass"
                    :input="input" />
            </view>
        </view>
        <view v-else>
            <view v-for="(item, index) in items" :key="index">
                <ref-fb-component v-if="current === index" :componentClass="item.component.componentClass"
                    :input="input" />
            </view>
        </view>
    </view>
</template>

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

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

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

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

<style lang="less" scoped>
.segmented-container {
    display: flex;
    margin-bottom: 10px;
    .segmented-title {
        flex: 1;
    }
    
    .segmented-tabs {
        // display: flex;
        flex: 1;
        // border: 1px #1456f0 solid;
        // border-radius: 50px;
        // color: #999;
        // font-size: 14px;

        .tab-item {
            padding: 0 10px;
            padding: 5px 10px;
            border-radius: 20px;

            &.active {
                background-color: #1456F0;
                color: #fff;
            }
        }

    }
}
</style>