<template>
    <view>
        <view class="worldcup-sortbar">
            <text class="worldcup-sortbar__label">{{ title }}</text>
        </view>

        <view v-if="list.length" class="rank-table rank-table--players">
            <view class="rank-table__row rank-table__row--head">
                <text class="rank-table__player">{{ header[0] }}</text>
                <text class="rank-table__club">{{ header[1] }}</text>
                <text class="rank-table__points">{{ header[2] }}</text>
            </view>
            <view v-for="item in list" :key="item.person_id" class="rank-table__row">
                <view class="rank-table__player">
                    <text class="rank-table__rank">{{ item.rank }}</text>
                    <image v-if="item.person_logo" class="rank-table__avatar" :src="item.person_logo" mode="aspectFill" />
                    <text class="rank-table__name">{{ item.person_name }}</text>
                </view>
                <view class="rank-table__club">
                    <image v-if="item.team_logo" class="rank-table__logo" :src="item.team_logo" mode="aspectFit" />
                    <text class="rank-table__name">{{ item.team_name || '-' }}</text>
                </view>
                <text class="rank-table__points">{{ item.count }}</text>
            </view>
        </view>
        <view v-else class="worldcup-empty">
            <u-empty text="暂无数据" mode="data" />
        </view>
    </view>
</template>

<script setup lang="ts">
defineProps<{
    title: string
    header: string[]
    list: any[]
}>()
</script>

<style scoped lang="scss">
.worldcup-sortbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4rpx;
    margin-bottom: 16rpx;
}

.worldcup-sortbar__label {
    font-size: 32rpx;
    font-weight: 700;
    color: #111827;
}

.rank-table {
    overflow: hidden;
    border-radius: 18rpx;
    background: #fff;
}

.rank-table__row {
    display: flex;
    align-items: center;
    padding: 22rpx 16rpx;
    border-bottom: 1rpx solid #edf0f5;

    &:last-child {
        border-bottom: none;
    }

    &--head {
        background: #fff;
        color: #8b93a7;
        font-size: 22rpx;
    }
}

.rank-table__player {
    width: 280rpx;
    display: flex;
    align-items: center;
    gap: 10rpx;
    flex-shrink: 0;
}

.rank-table__club {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10rpx;
}

.rank-table__rank {
    width: 24rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: 700;
    color: #185dff;
    flex-shrink: 0;
}

.rank-table__logo,
.rank-table__avatar {
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
    border-radius: 50%;
}

.rank-table__avatar {
    width: 52rpx;
    height: 52rpx;
}

.rank-table__name {
    flex: 1;
    min-width: 0;
    font-size: 26rpx;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rank-table__points {
    width: 72rpx;
    text-align: right;
    font-size: 24rpx;
    color: #111827;
    flex-shrink: 0;
}

.worldcup-empty {
    padding: 100rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
