<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.join('')" />

        <!-- 新增：前端动态渲染的多语言文字层，分为上下两行 -->
        <div class="text-overlay">
          <div class="game-name-top">{{ t(game.name[0]) }}</div>
          <div class="game-name-bottom">{{ t(game.name[1]) }}</div>
        </div>

        <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>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { Place  } from '@element-plus/icons-vue';

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

// 游戏配置列表 (name修改为数组，以支持上下两行显示)
const gameList = [
  { name: ['加拿大', '28'], imgName: 'pc28', route: '/Entertainment' },
  { name: ['极速', '28'], imgName: 'ExtremeSpeed28', route: '/ExtremeSpeed28' },
  { name: ['澳门', '六合彩'], imgName: 'MacauMarkSix', route: '/Digital' },
  { name: ['新澳门', '六合彩'], imgName: 'NewMacauMarkSix', route: '/NewDigital' },
  { name: ['极速', '六合彩'], imgName: 'ExtremeSpeedMarkSix', route: '/SpeedDigital' },
  { name: ['香港', '六合彩'], imgName: 'HongKongMarkSix', route: '/HKDigital' },
  { name: ['极速', '赛车'], imgName: 'jisu1', route: { name: 'JisuGame', query: { type: 1, title: '极速赛车' } } },
  { name: ['极速', '时时彩'], imgName: 'jisu2', route: { name: 'JisuGame', query: { type: 2, title: '极速时时彩' }  } },
  { name: ['极速', '飞艇'], imgName: 'jisu3', route: { name: 'JisuGame', query: { type: 3, title: '极速飞艇' }  } },
  { name: ['SG', '时时彩'], imgName: 'jisu2', route: { name: 'JisuGame', query: { type: 4, title: 'SG时时彩' }  } },
  { name: ['SG', '飞艇'], imgName: 'jisu3', route: { name: 'JisuGame', query: { type: 5, title: 'SG飞艇' }  } },
];

// 动态获取多语言图片路径
const getImagePath = (baseName) => {
  // 修改：不再根据语言追加后缀，直接使用基础图片名，并更新到 Entertainment 目录
  // (注意：Vite 构建工具推荐使用 new URL 方式。请根据该文件所在的实际层级调整 ../ 数量)
  return new URL(`../../../assets/image/Entertainment/${baseName}.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(4, 1fr);
  gap: 24px;
  @media screen and (max-width: 1200px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  /* 平板/小屏笔记本：一行 2 个 */
  @media screen and (max-width: 992px) {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* 手机端：一行 1 个 */
  @media screen and (max-width: 600px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ==================================
   卡片 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;
    }

    /* 新增：文字层的定位与样式 */
    .text-overlay {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 1;
      pointer-events: none; /* 避免阻挡下方点击和 Hover 事件 */

      .game-name-top {
        font-size: 30px;
        font-weight: 800;
        color: #ffffff; /* PC端深色背景下顶部文字设为纯白更清晰 */
        line-height: 1.5;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 增加文字阴影以防背景干扰 */
      }

      .game-name-bottom {
        font-size: 40px;
        font-weight: 900;
        color: $main-color;
        line-height: 1.4;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
      }
    }

    .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;
      z-index: 2; /* 确保 hover 遮罩层在文字之上 */

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