<script setup>
import BACK_TOP_ICON from "../static/icons/backtop.png";

const emits = defineEmits(['top', 'setScroll']);
const {tabs} = defineProps({
    tabs: {
        type: [],
        default: () => []
    }
});
</script>

<template>
    <view class="bg-[rgba(29,33,41,1)] rounded-[12rpx] p-[8rpx] fixed top-1/2 -translate-y-1/2 right-0 z-[999]">
        <view
            @click="emits('top')"
            class="py-[18rpx] px-[24rpx] !flex justify-around flex-col items-center h-[100rpx] bg-[rgba(78,89,105,1)] rounded-[8rpx]">
            <image class="!h-[12rpx]" :src="BACK_TOP_ICON" mode="heightFix"></image>
            <view class="text-[rgba(201,205,212,1)] test-28r">顶部</view>
        </view>
        <view class="h-[16rpx] !flex justify-center items-center">
            <view class="w-[40rpx] bg-[#4E5969] h-[2rpx]"></view>
        </view>
        <template v-for="(v, index) in tabs">
            <view class="py-[18rpx] px-[24rpx]" @click="emits('setScroll', v.value)">
                <view :class="['text-[rgba(201,205,212,1)] test-28r', v.now ? 'text-white' : '']">{{ v.name1 }}</view>
                <view :class="['text-[rgba(201,205,212,1)] test-28r', v.now ? 'text-white' : '']">{{ v.name2 }}</view>
            </view>
            <view class="h-[16rpx] !flex justify-center items-center" v-if="index < tabs.length-1">
                <view class="w-[40rpx] bg-[#4E5969] h-[2rpx]"></view>
            </view>
        </template>
    </view>
</template>

<style scoped lang="scss">
.text-white {
    color: #fff;
}
</style>
