<template>
  <div class="rankings">
    <div v-for="(game, index) in games" :key="index" class="ranking-item">
      <!-- 图标 -->
      <img :src="game.icon" alt="Game Icon" class="game-icon" />
      <!-- 游戏信息 -->
      <div class="game-info">
        <div class="game-name">{{ game.name }}</div>
        <div class="game-score">{{ game.score }}</div>
        <div class="game-description">{{ game.description }}</div>
      </div>
      <!-- 启动按钮 -->
      <button @click="launchGame(game)" class="launch-btn">启动</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ImgUrl: this.$ImgUrl,
      games: [
        {
          icon: this.$ImgUrl + "gameOrder/game2.jpg",
          name: "抓大鹅",
          score: "休闲",
          description: "亲子互动消除解压小游戏",
          appId: "wxb98ac240fd74b0e3"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game3.jpg",
          name: "疯狂来解压",
          score: "休闲",
          description: "趣味消除、无限解压",
          appId: "wx770a673256c31705"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game4.jpg",
          name: "密室消除2",
          score: "休闲",
          description: "拯救国外的石头小游戏，你能过第一关嘛？",
          appId: "wxafec673b78d986f9"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game5.jpg",
          name: "火锅大冒险",
          score: "休闲",
          description: "你的省份排第几？",
          appId: "wx9a0ef2cb66dddd50"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game6.jpg",
          name: "无敌螺丝王",
          score: "休闲",
          description: "3D打螺丝，无限解压",
          appId: "wxdfa24cfef28c57cf"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game7.jpg",
          name: "中华生僻字",
          score: "休闲",
          description: "田园风格模拟经营，学习中华博大文化",
          appId: "wxcf1730aea6500563"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game8.jpg",
          name: "文字乐翻天",
          score: "答题",
          description: "超烧脑的文字小游戏，你能到第几关？",
          appId: "wx5336ae5c763a6d83"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game9.jpg",
          name: "文字消除",
          score: "答题",
          description: "谁能过第二关，我就服谁",
          appId: "wx276928b49e0d36e2"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game10.jpg",
          name: "诗词趣消消",
          score: "答题",
          description: "中华古典诗词|最有意境的诗词|句句封神|",
          appId: "wxc6b14dede0a6275e"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game11.jpg",
          name: "文字大闯关",
          score: "答题",
          description: "传承中华文脉，探求文字奥秘",
          appId: "wxe70c92771b735f1b"
        },
        {
          icon: this.$ImgUrl + "gameOrder/game12.jpg",
          name: "七彩拼图",
          score: "拼图",
          description: "奇思妙想的拼图世界",
          appId: "wxb5612f7e17786c46"
        },
      ],
    };
  },
  mounted() {
    this.games.sort(() => 0.5 - Math.random());
  },
  methods: {
    launchGame(game) {
      uni.navigateToMiniProgram({
        appId: game.appId,
      });
      // 这里可以添加游戏启动逻辑，比如跳转到游戏页面，或打开游戏等
    },
  },
};
</script>

<style scoped>
.rankings {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.ranking-item {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 16rpx;
  background-color: #f9f9f9;
}

.game-icon {
  width: 100rpx;
  height: 100rpx;
  margin-right: 30rpx;
}

.game-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.game-name {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 40rpx;
}

.game-score {
  color: #888;
  margin-top: 10rpx;
  line-height: 40rpx;
  font-size: 26rpx;
}

.game-description {
  color: #777;
  font-size: 28rpx;
  margin-top: 10rpx;
  line-height: 40rpx;
}

.launch-btn {
  padding: 16rpx 32rpx;
  margin-left: 30rpx;
  font-size: 26rpx;
  line-height: 40rpx;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 10rpx;
  white-space: nowrap;
}

.launch-btn:hover {
  background-color: #45a049;
}
</style>
