<template>
  <div class="page">
    <h-navbar title="" />
    <div class="page-body">
      <div class="title">
        <div :class="{ active: active === 1 }" @click="changeActive(1)">
          <h-img
            width=".5rem"
            type="local"
            :src="active === 1 ? 'base/red01.png' : 'base/red.png'"
          />
          <span>Coleção</span>
        </div>
        <div :class="{ active: active === 2 }" @click="changeActive(2)">
          <h-img
            width=".5rem"
            type="local"
            :src="active === 2 ? 'base/record01.png' : 'base/record.png'"
          />
          <span>Recentes</span>
        </div>
      </div>
      <div :style="gameStyle" class="contentBox">
        <div class="all-game" v-if="gameData.length > 0">
          <div class="flex-ct" v-for="(item, index) in gameData" :key="index">
            <img
              ref="iconRef"
              @click="detail(item)"
              :src="getStaticImage('base/loading.png')"
              :data-src="getImage(item.gameImg2)"
            />
            <div class="maintenance-box" v-show="item.state === 0">
              <img :src="getAssets('base/br.png')" />
            </div>
          </div>
        </div>
        <div v-else>
          <h-img type="local" src="base/bg_di1.png" />
          <p style="font-size: 0.4rem">Ops! Ainda não há dados!</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, computed, nextTick } from "vue";
import { useBaseStore } from "@/stores/modules/base";
import { gameListStore } from "@/stores/modules/game-list";
import { useUserStore } from "@/stores/modules/user";
import { useGameStore } from "@/stores/modules/game";
import { getImage, getStaticImage, getAssets } from "@/utils";
import useInView from "@/hooks/useInView";
import emitter from "@/utils/eventBus";
import storage, { actions } from "@/utils/storage";

const baseStore = useBaseStore();
const gameStore = gameListStore();
const userStore = useUserStore();
const gameUserStore = useGameStore();
const active = ref(1);
const iconRef = ref();
const { processImage } = useInView();

const gameData = computed(() => {
  let game: Array<any> = [];
  let gameIds: Array<any> = [];
  if (active.value === 1) {
    // 收藏
    gameIds = userStore.userInfo.collectionGameIds || [];
  } else {
    // 历史记录
    gameIds = storage.getStorage(actions.COLLECT_GAME_IDS)
      ? JSON.parse(storage.getStorage(actions.COLLECT_GAME_IDS) || "")
      : [];
  }
  for (let i = 0; i < gameIds.length; i++) {
    let data = gameStore.originalList.filter(
      (item: any) => item.gameId === gameIds[i] && item.state != -1
    );
    game.push(data[0]);
  }
  if (game.length > 0) {
    nextTick(() => {
      processImage(iconRef);
    });
  }
  return game;
});
const changeActive = (type: number) => {
  active.value = type;
};
function detail(game: any) {
  if (game.state === 0) return;
  gameUserStore.setGameInfo(game);
  emitter.emit("openGameDetail");
}
onMounted(async () => {
  active.value = storage.getStorage(actions.COLLECT_TYPE)
    ? Number(storage.getStorage(actions.COLLECT_TYPE))
    : 1;
  storage.removeStorage(actions.COLLECT_TYPE);
});
const gameStyle = computed(() => {
  return `height:calc(${baseStore.innerHeight}px - 3rem)`;
});
</script>
<style lang='scss' scoped>
.page-body {
  padding: 0;
  .contentBox {
    margin-top: 0.2rem;
    overflow-y: auto;
    padding: 0 0.2rem;
    @include pc {
      &::-webkit-scrollbar {
        width: 0 !important;
      }
    }
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  .all-game {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;

    img {
      width: 100%;
      height: auto;
      border-radius: 0.1rem;
    }
    .flex-ct {
      position: relative;
      .state-img {
        position: absolute;
        top: 0;
        right: -0.1rem;
        width: 1rem;
        z-index: 5;
      }
      .maintenance-box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
  }
  .title {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: flex-end;
    padding: 0.1rem 0;
    border-radius: 0.1rem;
    height: 1rem;
    > div {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.3rem;
      cursor: pointer;
    }
    .active {
      background-image: url("../../assets/img/base/button_02.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #fff;
    }
    h2 {
      font-size: 0.5rem;
      margin-left: 0.2rem;
    }
  }
}
</style>