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

defineProps<{
    players: any[];
    playerCount: number;
}>();

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

const imageUrls = {
    bg: cssAssetUrl('game5/bg.svg'),
    logo: cssAssetUrl('game1/logo.png'),
    title1: cssAssetUrl('game5/title1.webp'),
    // title2: cssAssetUrl('game1/title2.png'),
    qrcode: assetUrl('game5/qrcode.png'),
    left: cssAssetUrl('game5/left.webp'),
    right: cssAssetUrl('game5/right.webp'),
    bottomLayers: cssAssetUrl('game1/bottom-layers.png'),
    avatarAnimation: cssAssetUrl('avatar_animation.png'),
    avatar: cssAssetUrl('avatar.png'),
    line: cssAssetUrl('game1/line.png'),
    // start1: cssAssetUrl('game1/start-1.png'),
    // start2: cssAssetUrl('game1/start-2.png'),
    start: cssAssetUrl('game1/start.png'),
    back: cssAssetUrl('game1/back.png'),
};

const isStartPressed = ref(false);
const isQrcodeExpanded = ref(false);

const pressStartButton = () => {
    isStartPressed.value = true;
    emit('start');
};

const releaseStartButton = () => {
    isStartPressed.value = false;
};

const renderAvatar = (item: any | null) => {
    if (item && item.avatar) {
        return `background: url("${String(item.avatar).replace(/"/g, '\\"')}") 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-title1"></div>
            <!-- <div class="img-title2"></div> -->
            <div class="img-qrcode-container">
                <div class="img-qrcode" @click="isQrcodeExpanded = true"><img :src="imageUrls.qrcode" /></div>
                <div class="txt-qrcode">微信扫码参与</div>
            </div>
            <div v-if="isQrcodeExpanded" class="qrcode-preview-mask" @click="isQrcodeExpanded = false">
                <img class="qrcode-preview" :src="imageUrls.qrcode" @click.stop="isQrcodeExpanded = false" />
            </div>
            <div class="img-left"></div>
            <div class="img-right"></div>
            <div class="list-container">
                <div class="txt-count">当前在线人数 <span>{{ playerCount }}</span></div>
                <div class="list-container-left">
                    <div v-for="(item, index) in players" :key="item.userid || item.wechat_id || `empty-${index}`">
                        <div>
                            <div class="img-avatar-container">
                                <div class="img-avatar" :style="`${renderAvatar(item)}`"></div>
                            </div>
                            <div class="txt-nickname">{{ item.nickname }}</div>
                        </div>
                    </div>
                </div>
                <div class="list-container-line"></div>
                <div class="list-container-right">
                    <!-- <div
                        class="btn-start"
                        :class="{ pressed: isStartPressed }"
                        @pointerdown="pressStartButton"
                        @pointerup="releaseStartButton"
                        @pointerleave="releaseStartButton"
                        @pointercancel="releaseStartButton"
                    ></div> -->
                    <div class="btn-start" @click="pressStartButton"></div>
                    <div class="btn-back" @click="emit('back')"></div>
                </div>
            </div>
        </div>
    </DesignStage>
</template>

<style scoped>
.img-qrcode > img { width: 144px; height: 144px; }

.qrcode-preview-mask { position: absolute; inset: 0; z-index: 10; display: flex; justify-content: center; padding-top: 150px; background: rgb(0 0 0 / 45%); cursor: pointer; }
.qrcode-preview { width: 480px; height: 480px; padding: 18px; border-radius: 24px; background: #fff; }

.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-title1 {
    background: v-bind('imageUrls.title1');
    width: 891px;
    height: 309px;
    margin: 0 auto;
    position: relative;
    top: 60px;
}

/* .img-title2 {
    background: v-bind('imageUrls.title2');
    width: 643px;
    height: 140px;
    margin: 0 auto;
    position: relative;
    top: 80px;
} */

.img-qrcode-container {
    width: 144px;
    height: 177px;
    position: absolute;
    z-index: 1;
    top: 40px;
    right: 40px;

    .img-qrcode {
        width: 100%;
        height: 144px;
        border-radius: 10px;

        img {
            width: 147px;
            height: 147px;
        }
    }

    .txt-qrcode {
        font-size: 24px;
        color: white;
    }
}

.img-left {
    background: v-bind('imageUrls.left') no-repeat;
    width: 531px;
    height: 418px;
    position: absolute;
    top: 193px;
    left: 47px;
}

.img-right {
    background: v-bind('imageUrls.right') no-repeat;
    width: 423px;
    height: 419px;
    position: absolute;
    top: 193px;
    right: 50px;
}

.list-container {
    background: v-bind('imageUrls.bottomLayers');
    width: 1800px;
    height: 397px;
    position: absolute;
    left: 60px;
    bottom: 60px;

    .txt-count {
        font-size: 36px;
        margin-left: 30px;
        margin-top: 20px;
        color: #AA0000;
        font-weight: bold;

        >span {
            margin-left: 20px;
            font-size: 48px;
            position: relative;
            top: 5px;
        }
    }

    .list-container-left {
        float: left;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        row-gap: 20px;
        width: 73%;
        margin-top: 30px;
        height: 250px;
        align-content: center;

        >div {
            min-width: 0;
        }

        .img-avatar-container {
            position: relative;
            margin: 0 auto;
            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'); */
        }

        .txt-nickname {
            display: block;
            width: calc(100% - 12px);
            margin: 4px auto 0;
            overflow: hidden;
            color: #666;
            font-size: 20px;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .list-container-line {
        float: left;
        width: 1px;
        height: 281px;
        margin-left: 50px;
        background: v-bind('imageUrls.line') center no-repeat;
    }

    .list-container-right {
        float: left;

        .btn-start {
            width: 316px;
            height: 105px;
            margin-left: 60px;
            margin-top: 10px;
            background: v-bind('imageUrls.start');
            cursor: pointer;
        }

        /* .btn-start.pressed {
            background: v-bind('imageUrls.start2');
        } */
        .btn-back {
            width: 316px;
            height: 105px;
            margin-left: 60px;
            margin-top: 30px;
            background: v-bind('imageUrls.back');
            cursor: pointer;
        }
    }
}
</style>
