<template>
  <div class="game-grid">
      <div
        v-for="(game, index) in gameList"
        :key="index"
        class="game-card"
        @click="goToGame(game.route)"
      >
        <div class="image-wrapper">
          <img :src="getImagePath(game.imgName)" class="game-cover" :alt="game.name" />

          <div class="hover-overlay">
            <el-button type="primary" class="play-btn" round>
              <el-icon class="mr-1"><Place  /></el-icon>
              {{ t('立即进入') }}
            </el-button>
          </div>
        </div>

        <!-- <div class="game-info">
          <span class="game-name">{{ t(game.name) }}</span>
        </div> -->
      </div>
    </div>
</template>

<script setup scoped>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { Place  } from '@element-plus/icons-vue';

const { t, locale } = useI18n();
const router = useRouter();

// 游戏配置列表
const gameList = [
  { name: 'PC28', imgName: 'pc28', route: '/Entertainment' },
  { name: '极速28', imgName: 'ExtremeSpeed28', route: '/ExtremeSpeed28' },
  { name: '澳门六合彩', imgName: 'MacauMarkSix', route: '/Digital' },
  { name: '香港六合彩', imgName: 'HongKongMarkSix', route: '/HKDigital' }
];

// 动态获取多语言图片路径
const getImagePath = (baseName) => {
  let suffix = '';

  // 如果不是 pc28，且当前语言为英文或越南语，则追加后缀
  // if (baseName !== 'pc28') {

  // }
  if (locale.value === 'en') {
      suffix = '_en';
    } else if (locale.value === 'vi') {
      suffix = '_vi';
    }

  // 动态拼接路径 (注意：Vite 构建工具推荐使用 new URL 方式。请根据该文件所在的实际层级调整 ../ 数量)
  return new URL(`../../../../../assets/image/${baseName}${suffix}.png`, import.meta.url).href;
};

// 页面跳转
const goToGame = (routePath) => {
  if (routePath) {
    router.push(routePath);
  }
};
</script>

<style lang="scss" scoped>
$main-color: #f8b932;
$card-bg: #1e1e1e;
$border-color: #333;

.entertainment-list {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid transparent; // 替换为你原本的 border: 1px solid;
  box-sizing: border-box;
  padding: 20px 0;
}

/* ==================================
   核心网格布局 (CSS Grid 响应式)
   ================================== */
.game-grid {
  display: grid;
  /* 默认：大于 992px 时一行 3 个 */
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

/* ==================================
   卡片 UI 与悬浮交互
   ================================== */
.game-card {
  background-color: $card-bg;
  border-radius: 12px;
  border: 1px solid $border-color;
  overflow: hidden;
  cursor: pointer;
  transition: .2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  &:hover {
    transform: translateY(-6px);
    border-color: $main-color;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);

    .image-wrapper .game-cover {
      transform: scale(1.05); /* 图片轻微放大 */
    }

    .image-wrapper .hover-overlay {
      opacity: 1; /* 遮罩层与按钮渐显 */
    }

    .game-info .game-name {
      color: $main-color;
    }
  }

  .image-wrapper {
    position: relative;
    width: 100%;
    /* 控制图片的宽高比，这里以 16:9 为例，你可以根据实际图片比例调整 */
    aspect-ratio: 2 / 1;
    overflow: hidden;

    .game-cover {
      width: 100%;
      height: 100%;
      transition: transform 0.5s ease;
      display: block;
    }

    .hover-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6); /* 黑色半透明遮罩 */
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;

      .play-btn {
        font-weight: bold;
        font-size: 15px;
        padding: 12px 24px;
        background-color: $main-color;
        border-color: $main-color;
        color: #000;

        &:hover {
          opacity: 0.9;
        }
      }
    }
  }

  .game-info {
    padding: 16px;
    text-align: center;
    border-top: 1px solid $border-color;
    background: #141414;

    .game-name {
      font-size: 16px;
      font-weight: bold;
      color: #e5e5e5;
      letter-spacing: 1px;
      transition: color 0.3s ease;
    }
  }
}

.mr-1 {
  margin-right: 4px;
}
</style>
