<script setup lang="ts">
import { ref, watch } from 'vue'
import DesignStage from '../../../components/DesignStage.vue'
import type Player from '../../../commons/player.ts'
import { cssAssetUrl } from '@/commons/assets.ts';

const props = defineProps<{
    rankList: Player[];
}>();

const emit = defineEmits<{
    next: [];
    back: [];
}>();

const FINAL_RANK_LIMIT = 10;
const imageUrls = {
    bg: cssAssetUrl('game5/bg-backup.webp'),
    logo: cssAssetUrl('game1/logo.png'),
    title: cssAssetUrl('game5/title.webp'),
    title2: cssAssetUrl('game5/title2.webp'),
    podium: cssAssetUrl('game5/podium.webp'),
    fireworks: cssAssetUrl('game1/fireworks.png'),
    avatar: cssAssetUrl('game5/avatar.webp'),
    guan: cssAssetUrl('game5/guan.webp'),
    guan1: cssAssetUrl('game1/guan1.png'),
    pai1: cssAssetUrl('game1/pai1.png'),
    guan2: cssAssetUrl('game1/guan3.png'),
    pai2: cssAssetUrl('game1/pai2.png'),
    guan3: cssAssetUrl('game1/guan2.png'),
    pai3: cssAssetUrl('game1/pai3.png'),
    rankIcon: cssAssetUrl('game5/no-icon.webp'),
    avatarAnimation: cssAssetUrl('avatar_animation.png'),
    next: cssAssetUrl('game1/next.png'),
    back: cssAssetUrl('game1/back.png'),
};

const emptyPlayer = (index: number): Player => ({
    active: false,
    wechat_id: `empty-${index}`,
    nickname: '虚位以待',
    avatar: '',
    score: 0,
});

const list = ref<Player[]>(Array.from({ length: FINAL_RANK_LIMIT }, (_, index) => emptyPlayer(index)));

const updateFinalRank = (rankList: Player[]) => {
    list.value = Array.from(
        { length: FINAL_RANK_LIMIT },
        (_, index) => rankList[index] ?? emptyPlayer(index),
    );
};

watch(
    () => props.rankList,
    (rankList) => updateFinalRank(rankList),
    { immediate: true, deep: true },
);

const renderAvatar = (item: any | null) => {
    if (item && item.avatar) {
        return `background: url('${item.avatar}') center / cover no-repeat;`
    }
    return `background: ${imageUrls.avatar} center / cover no-repeat;`
}
</script>

<template>
    <DesignStage>
        <div class="bg">
            <div class="img-logo"></div>
            <div class="img-title"></div>
            <div class="img-title2"></div>

            <div class="podium">
                <div class="rank-no1">
                    <div class="gu-burst"></div>
                    <div class="avatar" :style="`${renderAvatar(list[0])}`">
                    </div>
                    <div class="nickname">{{ list[0]?.nickname }}</div>
                    <div class="guan"></div>
                    <!-- <div class="pai"></div> -->
                </div>
                <div class="rank-no2">
                    <div class="gu-burst"></div>
                    <div class="avatar" :style="`${renderAvatar(list[1])}`">
                    </div>
                    <div class="nickname">{{ list[1]?.nickname }}</div>
                    <!-- <div class="guan"></div> -->
                    <!-- <div class="pai"></div> -->
                </div>
                <div class="rank-no3">
                    <div class="gu-burst"></div>
                    <div class="avatar" :style="`${renderAvatar(list[2])}`">
                    </div>
                    <div class="nickname">{{ list[2]?.nickname }}</div>
                    <!-- <div class="guan"></div> -->
                    <!-- <div class="pai"></div> -->
                </div>
            </div>

            <div class="rank-container">
                <div v-for="(item, index) in list.slice(3)" :key="item.userid || item.wechat_id || `rank-${index}`">
                    <div class="no-icon">{{ index + 4 }}</div>
                    <div>
                        <div class="img-avatar-container">
                            <div class="img-avatar" :style="`${renderAvatar(list[index + 3])}`"></div>
                        </div>
                        <div class="txt-nickname">{{ item.nickname }}</div>
                    </div>
                </div>
            </div>

            <div class="btn-next" @click="emit('next')"></div>
            <div class="btn-back" @click="emit('back')"></div>
        </div>
    </DesignStage>
</template>

<style scoped>
.bg {
    width: 1920px;
    height: 1080px;
    background: v-bind('imageUrls.bg') center / cover no-repeat;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.img-logo {
    background: v-bind('imageUrls.logo');
    background-size: cover;
    width: 428px;
    height: 77px;
    position: absolute;
    left: 37px;
    top: 82px;
}

.img-title {
    background: v-bind('imageUrls.title')no-repeat center;
    width: 967px;
    height: 122px;
    margin: 0 auto;
    margin-top: 44px;
}

.img-title2 {
    background: v-bind('imageUrls.title2') no-repeat center;
    width: 457px;
    height: 57px;
    margin: 0 auto;
    margin-top: 12px;
}

.podium {
    background: v-bind('imageUrls.podium') no-repeat center;
    width: 1920px;
    height: 740px;
    position: absolute;
    bottom: 0px;
    left: 0px;

    .gu-burst {
        width: 200px;
        height: 200px;
        position: absolute;
        z-index: 1;
        border-radius: 50%;
        opacity: 1;
        transform: scale(0.6);
        transform-origin: center center;
        background: v-bind('imageUrls.fireworks') center / cover no-repeat;
        pointer-events: none;
        animation: gu-burst-expand 1.2s ease-out infinite;
    }

    .rank-no1 {
        position: relative;

        .gu-burst {
            left: 861px;
            top: -72px;
            z-index: 3;
        }

        .avatar {
            /* background: v-bind('imageUrls.avatar') center / cover no-repeat; */
            width: 160px;
            height: 160px;
            border-radius: 80px;
            position: absolute;
            left: 884px;
            top: -7px;
            z-index: 2;
        }

        .nickname {
            width: 220px;
            height: 52px;
            background: linear-gradient(0deg, #FFBF5A 0%, #FFE47A 100%);
            border-radius: 26px;
            border: 1px solid #FFF9DC;
            font-size: 30px;
            color: #4B1A14;
            text-align: center;
            line-height: 46px;
            position: absolute;
            left: 850px;
            top: 160px;
            z-index: 2;
            border-radius: 23px;
        }

        .guan {
            background: v-bind('imageUrls.guan');
            width: 969px;
            height: 238px;
            position: absolute;
            left: 480px;
            top: -60px;
        }

        .pai {
            background: v-bind('imageUrls.pai1');
            width: 212px;
            height: 200px;
            position: absolute;
            left: 570px;
            top: 40px;
        }
    }

    .rank-no2 {
        position: relative;

        .gu-burst {
            left: 456px;
            top: -26px;

        }

        .avatar {
            width: 144px;
            height: 144px;
            border-radius: 60px;
            position: absolute;
            left: 488px;
            top: 27px;
        }

        .nickname {
            text-align: center;
            line-height: 52px;
            width: 220px;
            height: 52px;
            background: linear-gradient(0deg, #AEA6A7 0%, #EAE4DF 100%);
            border-radius: 26px;
            border: 1px solid #FFFFFF;
            font-size: 30px;
            color: #383636;
            position: absolute;
            left: 447px;
            top: 184px;
            z-index: 1;
            border-radius: 23px;
        }

        .guan {
            background: v-bind('imageUrls.guan2') no-repeat center;
            width: 96px;
            height: 96px;
            position: absolute;
            left: 469px;
            top: 70px;
        }

        .pai {
            background: v-bind('imageUrls.pai2') no-repeat center;
            width: 212px;
            height: 200px;
            position: absolute;
            left: 140px;
            top: 50px;
        }
    }

    .rank-no3 {
        position: relative;

        .gu-burst {
            left: 1261px;
            top: -37px;
        }

        .avatar {
            width: 144px;
            height: 144px;
            border-radius: 60px;
            position: absolute;
            left: 1297px;
            top: 27px;
        }

        .nickname {
            width: 220px;
            height: 52px;
            background: linear-gradient(0deg, #F3AE76 0%, #F9CDA3 100%);
            border-radius: 26px;
            border: 1px solid #FEFEFD;
            font-size: 30px;
            color: #6F3A0E;
            text-align: center;
            line-height: 46px;
            position: absolute;
            left: 1255px;
            top: 160px;
            z-index: 1;
            border-radius: 23px;
        }

        .guan {
            background: v-bind('imageUrls.guan3') no-repeat center;
            width: 96px;
            height: 96px;
            position: absolute;
            left: 1241px;
            top: 70px;
        }

        .pai {
            background: v-bind('imageUrls.pai3') no-repeat center;
            width: 212px;
            height: 200px;
            position: absolute;
            right: 130px;
            top: 50px;
        }
    }
}

.rank-container {
    display: flex;
    align-items: center;
    width: 1270px;
    height: 115px;
    position: absolute;
    bottom: 243px;
    left: 325px;

    >div {
        flex: 1;
        display: grid;
        width: 100px;
        height: 100%;

        .no-icon {
            background: v-bind('imageUrls.rankIcon') no-repeat center;
            width: 42px;
            height: 47px;
            position: absolute;
            text-align: center;
            line-height: 40px;
            color: white;
            font-weight: bold;
        }

        .img-avatar-container {
            position: relative;
            margin: 0 auto;
            margin-top: 10px;
            width: 72px;
            height: 72px;
            border-radius: 36px;
        }

        .img-avatar-container::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: v-bind('imageUrls.avatarAnimation');
            animation: avatar-rotate 10s linear infinite;
        }

        .img-avatar {
            position: relative;
            top: 6px;
            z-index: 1;
            margin: 0 auto;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            background: v-bind('imageUrls.avatar') center / cover no-repeat;
        }

        .txt-nickname {
            color: white;
            font-size: 20px;
            text-align: center;
        }
    }
}

.btn-next {
    position: absolute;
    bottom: 50px;
    left: 620px;
    width: 316px;
    height: 105px;
    cursor: pointer;
    background: v-bind('imageUrls.next') center / cover no-repeat;
}
.btn-back {
    position: absolute;
    bottom: 50px;
    left: 1020px;
    width: 316px;
    height: 105px;
    cursor: pointer;
    background: v-bind('imageUrls.back') center / cover no-repeat;
}
</style>
