<script setup>
import { ref, nextTick } from 'vue';
import { gamesList, slideshowList, popupBackground } from '@/assets/data/games_list';

const showPopup = ref(false);
const popupLayer = ref(null);

const openPopup = () => {
  showPopup.value = true;
  nextTick(() => {
    if (popupLayer.value) {
      popupLayer.value.focus();
    }
  });
}
const closePopup = () => {
  showPopup.value = false;
}

</script>

<template>
  <header>
    <div class="container-layer">
      <h1 class="logo"><a href="javascript:void(0);">PG Games</a></h1>
      <div class="header-widget">
        <a class="eles-button" href="javascript:void(0);">2025 抢百万蛇我其谁</a>
      </div>
    </div>
    <div class="effects-layer"></div>
  </header>

  <div class="page-banner">
    <div class="page-desc">
      <div class="pg-app-cc">pgapp.cc</div>
      <div class="pg-app-title">PG电子游戏试玩大厅</div>
      <div class="pg-app-text">欢迎进入2024最新PG电子游戏试玩大厅，尽请体验Pocket Games所精心设计的视听效果，来场充满惊喜的享宴！</div>
      <div class="pg-app-btn">
        <a class="eles-button" href="javascript:void(0);">2025 抢百万蛇我其谁</a>
      </div>
    </div>
    <div class="effects-layer">
      <ul class="slideshow-list">
        <li v-for="slide in slideshowList">
          <img :src="slide" alt="">
        </li>
      </ul>
    </div>
  </div>

  <div class="page-main">
    <div class="game-list" v-for="list in gamesList">
      <div class="eles-title">
        <section>
          <h3>{{ list.title }}</h3>
          <h4>{{ list.subTitle }}</h4>
        </section>
      </div>
      <ul>
        <li v-for="game in list.games">
          <div class="game-thumb"><img :src="game.thumb" alt=""></div>
          <div class="game-info">
            <div class="game-icon"><img :src="game.icon" alt=""></div>
            <div class="game-text">
              <div class="game-name">{{ game.name }}</div>
              <div class="game-desc">{{ game.desc }}</div>
            </div>
          </div>
          <div class="game-action">
            <a class="eles-button" href="javascript:void(0);" @click="openPopup">{{ game.name }}试玩</a>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <footer>
    <div class="footer-container">
      <div class="footer-content">PG电子(Pocket Games Soft )全球首屈一指的电子游戏供货商，首位跨足线下线上电子游戏开发。拥有亚洲最大娱乐城esball独家授权，首开全球先锋：「整合线下到线上电子游戏」多款游戏屡屡创下市场傲人佳绩，吸引各方玩家一指上瘾，豪掷千金，已成为全球首屈一指的电子游戏品牌！</div>
      <div class="footer-copyright">Copyright © 2025 PG电子(Pocket Games Soft) All Rights Reserved.</div>
    </div>
  </footer>

  <div class="popup-layer" v-if="showPopup" ref="popupLayer" tabindex="0" @keydown.esc="closePopup">
    <div class="popup-content">
      <div class="popup-close"><a href="javascript:void(0);" @click="closePopup">关闭</a></div>
      <div class="popup-body popup-game-body">
        <div class="popup-game-container">
          <div class="popup-game-info">
            <div class="popup-game-icon"><img :src="popupBackground.icon" alt=""></div>
            <div class="popup-game-text">
              <p>PG电子推出了他们的第一款受麻将启发的老虎机游戏——“麻将胡了”！今年持续爆火，玩家每日在线人数不段上升，赶紧免费体验PG电子麻将胡了，将继续燃爆整个2023年。</p>
              <p>麻将胡了是一款强调视听特效的5轴、4行的电子老虎机游戏，具有Wild百搭符号转换和随乘数增加的免费旋转。</p>
              <p>当3个”胡牌”符号出现在任意位置，将触发免费旋转，赢得12次免费旋转。立即免费试玩麻将胡了！您将体验分秒胡牌的快感！</p>
            </div>
          </div>
          <div class="popup-game-box">
            <iframe src="about:blank" frameborder="0"></iframe>
          </div>
        </div>
      </div>
      <div class="popup-game-background"><img :src="popupBackground.thumb" alt=""></div>
    </div>
  </div>

</template>

<style scoped></style>
