<template>
    <view class="tab-container">
        <view class="uni-margin-wrap">
            <swiper
                class="swiper"
                :current="current"
                :circular="false"
                :indicator-dots="false"
                :autoplay="false"
                :duration="500"
            >
                <swiper-item @touchmove.stop="false">
                    <slot name="tab0"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab1"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab2"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab3"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab3"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab4"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab5"></slot>
                </swiper-item>
                <swiper-item @touchmove.stop="false">
                    <slot name="tab6"></slot>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
export default {
    name: 'tab',
    data() {
        return {};
    },
    props: {
        current: {
            type: Number,
            default: 0,
        },
    },
};
</script>

<style lang="stylus" scoped>
.tab-container
    // flex: 1
    height: 100%
    width: 100%
    display: flex
    align-items: center
    justify-content: center
    flex-direction: row
.uni-margin-wrap
    width: 100%
    height: 100%
.swiper
    width: 100%
    height: 100%
.swiper-item
    display: block;
    width: 100%
    height: 100%
</style>
