<template>
    <view class="worldcup-rank-nav">
        <view v-for="item in tabs" :key="item.key" class="worldcup-rank-nav__item"
            :class="{ 'worldcup-rank-nav__item--active': modelValue === item.key }"
            @tap="$emit('update:modelValue', item.key)">
            <text>{{ item.label }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
type RankingMode = 'standings' | 'goals' | 'assists'

defineProps<{
    modelValue: RankingMode
}>()

defineEmits<{
    (e: 'update:modelValue', value: RankingMode): void
}>()

const tabs: { key: RankingMode; label: string }[] = [
    { key: 'standings', label: '积分榜' },
    { key: 'goals', label: '射手榜' },
    { key: 'assists', label: '助攻榜' }
]
</script>

<style scoped lang="scss">
.worldcup-rank-nav {
    display: flex;
    align-items: center;
    gap: 14rpx;
    margin-bottom: 18rpx;
}

.worldcup-rank-nav__item {
    padding: 12rpx 20rpx;
    border-radius: 999rpx;
    background: #fff;
    color: #6b7280;
    font-size: 24rpx;
    flex-shrink: 0;

    &--active {
        background: #185dff;
        color: #fff;
        font-weight: 600;
    }
}
</style>
