<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('game6/bg3.png'),
    logo: cssAssetUrl('game1/logo.png'),
    title: cssAssetUrl('game6/title3.png'),
    podium: cssAssetUrl('game6/podium.png'),
    vip: cssAssetUrl('game6/vip.png'),
    avatar: cssAssetUrl('avatar-yellow.png'),
    avatarAnimation: cssAssetUrl('avatar-yellow_animation.png'),
    rankIcon: cssAssetUrl('game6/no4.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="img-vip"></div>
                <div class="rank-no1">
                    <div class="avatar" :style="`${renderAvatar(list[0])}`">
                    </div>
                    <div class="nickname">{{ list[0]?.nickname }}</div>
                </div>
                <div class="rank-no2">
                    <div class="avatar" :style="`${renderAvatar(list[1])}`">
                    </div>
                    <div class="nickname">{{ list[1]?.nickname }}</div>
                </div>
                <div class="rank-no3">
                    <div class="avatar" :style="`${renderAvatar(list[2])}`">
                    </div>
                    <div class="nickname">{{ list[2]?.nickname }}</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') center / cover no-repeat;
    width: 831px;
    height: 120px;
    margin: 0 auto;
    margin-top: 64px;
}

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

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

    .img-vip {
        width: 969px;
        height: 238px;
        position: absolute;
        left: 480px;
        top: -60px;
        background: v-bind('imageUrls.vip') center / cover no-repeat;
    }

    .rank-no1 {
        position: relative;

        .avatar {
            width: 160px;
            height: 160px;
            border-radius: 80px;
            position: absolute;
            left: 884px;
            top: -7px;
        }

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

    .rank-no2 {
        position: relative;

        .avatar {
            width: 144px;
            height: 144px;
            border-radius: 72px;
            position: absolute;
            left: 488px;
            top: 27px;
            /* border: 1px solid red; */
        }

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

    .rank-no3 {
        position: relative;

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

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

.rank-container {
    display: flex;
    align-items: center;
    width: 1570px;
    height: 115px;
    position: absolute;
    bottom: 263px;
    left: 200px;

    >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: 42px;
            color: #CC7F36;
            font-weight: bold;
            top: 50px;
        }

        .img-avatar-container {
            position: relative;
            margin: 0 auto;
            margin-top: 10px;
            width: 72px;
            height: 72px;
            border-radius: 36px;
            transform: scale(1.6);
            top: 50px;
        }

        .img-avatar-container::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: v-bind('imageUrls.avatarAnimation') center / cover no-repeat;
            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: #F9EBCB;
            font-size: 22px;
            text-align: center;
            position: absolute;
            top: 170px;
            text-align: center;
            /* left:10px; */
            margin-left: 68px;
        }
    }
}

.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>
