<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="line1">
          <div class="game-name">{{ game.name }}</div>
          <div class="game-score">{{ game.score }}</div>
        </div>
        <div class="game-description">{{ game.description }}</div>
      </div>
      <!-- 启动按钮 -->
      <button @click="launchGame(game)" class="launch-btn"></button>
    </div>
  </div>
</template>

<script>
var gHost = "https://" + window.location.host;
if (window.location.protocol != "https:") {
  gHost = "https://uat-pay.xiaopay.net";
}
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",
        },
      ],
      params: {
        sessionid: "",
        userid: "",
        behavior: "", // 打开页面viewPage   、用户点击click 、 用户停留duration 、用户离开页面closePage
        data: "", // 行为数据：填页面名称、点击元素标识、停留时长（5s/10s/30s/60s/5min/10min/30min）
      },
      timer: null,
      second: 0,
    };
  },
  mounted() {
    this.games.sort(() => 0.5 - Math.random());

    this.params.userid =
      this.getQueryParams("userId") || uni.getStorageSync("userid");
    this.params.sessionid =
      this.getQueryParams("sessionid") || uni.getStorageSync("sessionid");

    this.params.behavior = "viewPage";
    this.params.data = "gameOrder";
    this.GameStatistics();
    if (this.params.userid) {
      uni.setStorageSync("userid", this.params.userid);
    }
    if (this.params.sessionid) {
      uni.setStorageSync("sessionid", this.params.sessionid);
    }

    this.init();
  },
  methods: {
    init() {
      const self = this;
      this.timer = setInterval(() => {
        this.second += 1;
        if (this.second == 5) {
          self.params.behavior = "duration";
          self.params.data = "5s";
          self.GameStatistics();
        } else if (this.second == 10) {
          self.params.behavior = "duration";
          self.params.data = "10s";
          self.GameStatistics();
        } else if (this.second == 30) {
          self.params.behavior = "duration";
          self.params.data = "30s";
          self.GameStatistics();
        } else if (this.second == 60) {
          self.params.behavior = "duration";
          self.params.data = "60s";
          self.GameStatistics();
        } else if (this.second == 300) {
          self.params.behavior = "duration";
          self.params.data = "5min";
          self.GameStatistics();
        } else if (this.second == 600) {
          self.params.behavior = "duration";
          self.params.data = "10min";
          self.GameStatistics();
        } else if (this.second == 18000) {
          self.params.behavior = "duration";
          self.params.data = "30min";
          self.GameStatistics();
        }
      }, 1000);
    },
    //获取参数
    getQueryParams(params) {
      let href = window.location.href;
      let query = href.substring(href.indexOf("?") + 1);
      let vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        let pair = vars[i].split("=");
        if (pair[0] == params) {
          return pair[1];
        }
      }
      return false;
    },
    // 小程序游戏统计接口
    async GameStatistics() {
      $.ajax({
        url: gHost + "/wechat/svweapp/GameStatistics",
        type: "post",
        dataType: "json",
        contentType: "application/x-www-form-urlencoded",
        data: this.params,
        success: function (res) {
          if (res.code == 10000) {
            console.log(res);
            return;
          }
          uni.showToast({
            icon: "none",
            mask: true,
            title: res.message,
          });
          return;
        },
        error: function (error) {
          reject(error);
        },
      });
      // try {
      //   let url = gHost + "/wechat/svweapp/GameStatistics";
      //   let data = await this.$http.post(
      //     {
      //       url: url,
      //     },
      //     this.params
      //   );
      //   if (data.code != 10000) {
      //     uni.showToast({
      //       icon: "none",
      //       mask: true,
      //       title: data.message,
      //     });
      //     return;
      //   }
      // } catch (e) {
      //   console.log(e);
      // }
    },
    launchGame(game) {
      // uni.navigateToMiniProgram({
      //   appId: game.appId,
      // });
      this.params.userid =
        this.getQueryParams("userId") || uni.getStorageSync("userid");
      this.params.sessionid =
        this.getQueryParams("sessionid") || uni.getStorageSync("sessionid");
      console.log(this.params.userid, "zzzzzzzuserid");
      console.log(this.params.sessionid, "zzzzzzzsessionid");
      this.params.behavior = "click";
      this.params.data = game.appId;
      this.GameStatistics();
      jWeixin.miniProgram.navigateTo({
        url: "/pages_subpackB/pages/game/main?appId=" + game.appId,
      });
    },
  },
  onHide() {
    console.log("2222");
    this.params.behavior = "closePage";
    this.params.data = "gameOrder";
    this.GameStatistics();
    if (this.timer !== null) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>

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

.ranking-item {
  display: flex;
  align-items: center;
  height: 184rpx;
}

.game-icon {
  width: 126rpx;
  height: 126rpx;
  margin-right: 23rpx;
  border-radius: 50%;
}
.line1 {
  display: inline-flex;
  margin-top: 14rpx;
}
.game-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.game-name {
  align-self: center;
  font-weight: 500;
  font-size: 32rpx;
  color: rgba(0, 0, 0, 0.85);
  line-height: 45rpx;
}

.game-score {
  align-self: center;
  width: 61rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  background: #f7f7f7;
  border-radius: 4rpx;
  font-weight: 400;
  font-size: 20rpx;
  color: rgba(0, 0, 0, 0.35);
  margin-left: 12rpx;
}

.game-description {
  margin-top: 16rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: rgba(0, 0, 0, 0.35);
  line-height: 30rpx;
}

.launch-btn {
  width: 110rpx;
  height: 56rpx;
  background-image: url("https://xiaopay2020.oss-cn-shenzhen.aliyuncs.com/static/weapp/gameOrder/playgame.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.launch-btn::after {
  border: 0;
}
</style>
