<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("game4/bg.webp"),
  logo: cssAssetUrl("game1/logo.png"),
  title1: cssAssetUrl("game4/title1.webp"),
  title2: cssAssetUrl("game4/title2.svg"),
  qrcode: assetUrl("game4/qrcode.png"),
  gift: cssAssetUrl("game4/gift.webp"),
  gu: cssAssetUrl("game4/big-brum.webp"),
  smallGu: cssAssetUrl("game4/small-brum.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 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;`
}

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

const releaseStartButton = () => {
  isStartPressed.value = false;
};
</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-gift"></div>
      <div class="img-small-gu"></div>
      <div class="img-gu"></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") no-repeat;
  width: 831px;
  height: 314px;
  margin: 0 auto;
  position: relative;
  top: 60px;
}

.img-title2 {
  background: v-bind("imageUrls.title2") no-repeat;
  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: 140px;
      height: 140px;
    }
  }

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

.img-gift {
  background: v-bind("imageUrls.gift") no-repeat;
  width: 315px;
  height: 202px;
  position: absolute;
  top: 124px;
  right: 320px;
}

.img-small-gu {
  background: v-bind("imageUrls.smallGu") no-repeat;
  width: 161px;
  height: 150px;
  position: absolute;
  top: 500px;
  right: 340px;
}

.img-gu {
  background: v-bind("imageUrls.gu") no-repeat;
  width: 320px;
  height: 297px;
  position: absolute;
  top: 387px;
  right: 20px;
}

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

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