<template>
    <view>
        <view class="worldcup-sortbar">
            <text class="worldcup-sortbar__label">积分排名</text>
        </view>

        <view v-if="groups.length">
            <view v-for="group in groups" :key="group.group_name" class="rank-group">
                <view class="worldcup-group__title">
                    <view class="worldcup-group__dot"></view>
                    <text>{{ group.group_name }}</text>
                </view>

                <view class="rank-table">
                    <view class="rank-table__row rank-table__row--head">
                        <text class="rank-table__team rank-table__team--head">{{ group.header[0] }}</text>
                        <view class="rank-table__stats rank-table__stats--head">
                            <text class="rank-table__cell">{{ group.header[1] }}</text>
                            <text class="rank-table__cell">{{ group.header[2] }}</text>
                            <text class="rank-table__cell">{{ group.header[3] }}</text>
                            <text class="rank-table__cell">{{ group.header[4] }}</text>
                            <text class="rank-table__goal">{{ group.header[5] }}</text>
                            <text class="rank-table__points">{{ group.header[6] }}</text>
                        </view>
                    </view>

                    <view v-for="team in group.teams" :key="team.team_id" class="rank-table__row">
                        <view class="rank-table__team">
                            <image v-if="team.team_logo" class="rank-table__logo" :src="team.team_logo" mode="aspectFit" />
                            <text class="rank-table__name">{{ team.team_name }}</text>
                        </view>
                        <view class="rank-table__stats">
                            <text class="rank-table__cell">{{ team.played }}</text>
                            <text class="rank-table__cell">{{ team.won }}</text>
                            <text class="rank-table__cell">{{ team.drawn }}</text>
                            <text class="rank-table__cell">{{ team.lost }}</text>
                            <text class="rank-table__goal">{{ team.goals_for }}/{{ team.goals_against }}</text>
                            <text class="rank-table__points">{{ team.points }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view v-else class="worldcup-empty">
            <u-empty text="暂无数据" mode="data" />
        </view>
    </view>
</template>

<script setup lang="ts">
defineProps<{
    groups: 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-group {
    margin-bottom: 24rpx;
}

.worldcup-group__title {
    display: flex;
    align-items: center;
    gap: 10rpx;
    margin: 10rpx 0 16rpx;
    font-size: 26rpx;
    font-weight: 600;
    color: #111827;
}

.worldcup-group__dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #185dff;
    flex-shrink: 0;
}

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

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

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

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

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

.rank-table__team--head {
    font-size: 22rpx;
    color: #8b93a7;
}

.rank-table__logo {
    width: 40rpx;
    height: 40rpx;
    flex-shrink: 0;
}

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

.rank-table__stats {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr) 96rpx 72rpx;
    align-items: center;
    justify-items: center;
    column-gap: 0;
}

.rank-table__cell,
.rank-table__goal,
.rank-table__points {
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #111827;
    flex-shrink: 0;
}

.rank-table__cell {
    min-width: 0;
}

.rank-table__goal {
    width: 96rpx;
}

.rank-table__points {
    width: 72rpx;
    font-weight: 700;
    color: #185dff;
}

.rank-table__stats--head .rank-table__cell,
.rank-table__stats--head .rank-table__goal,
.rank-table__stats--head .rank-table__points {
    font-size: 22rpx;
    font-weight: 400;
    color: #8b93a7;
}

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