<template>
  <div class="page">
    <h-navbar :title="gameData.gameClassName" />
    <div class="page-body">
      <div class="title" @click="changeGame">
        <img :src="getImage(gameData.gameClassImg)" />
        <h2>{{ gameData.gameClassName }}</h2>
      </div>
      <div class="game-class">
        <div
          class="class-item"
          :class="{ active: active === index }"
          v-for="(item, index) in providerIdData"
          :key="index"
          @click="changeProviderId(item.providerId, index)"
        >
          <img style="height: 0.8rem" :src="getImage(item.gameProviderImg)" />
          <!-- <div>{{ item.gameProviderName || "" }}</div> -->
        </div>
      </div>
      <div class="contentBox">
        <div class="all-game">
          <div class="flex-ct" v-for="item in list" :key="item._id">
            <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>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, computed, nextTick } from "vue";
import { gameListStore } from "@/stores/modules/game-list";
import storage, { actions } from "@/utils/storage";
import { useGameStore } from "@/stores/modules/game";
import { getImage, getStaticImage, getAssets } from "@/utils";
import useInView from "@/hooks/useInView";
import { useBaseStore } from "@/stores/modules/base";
import emitter from "@/utils/eventBus";

const { processImage } = useInView();
const iconRef = ref();
const gameUserStore = useGameStore();
const baseStore = useBaseStore();
const active = ref(-1);
const _listData = ref<Array<any>>([]);
const list = ref<Array<any>>([]);
nextTick(() => {
  processImage(iconRef);
});
const gameClassId = computed(() => {
  return Number(storage.getStorage(actions.ALL_GAME_CLASS));
});
const providerIdData = computed(() => {
  let data: any;
  for (let i = 0; i < gameStore.gameList.length; i++) {
    if (gameStore.gameList[i].gameClassId == gameClassId.value) {
      data = gameStore.gameList[i].proIdData;
    }
  }
  return data;
});
const gameStore = gameListStore();
const gameData = computed(() => {
  let data = gameStore.gameList.find(
    (item: any) =>
      item.gameClassId === Number(storage.getStorage(actions.ALL_GAME_CLASS))
  );
  _listData.value = data.gameList || [];
  list.value = data.gameList || [];
  return data;
});

const gameStyle = computed(() => {
  return `height:calc(${baseStore.innerHeight}px - 3.2rem)`;
});
const changeProviderId = (id: any, index: number) => {
  active.value = index;
  let data = [..._listData.value];
  let newList: Array<any> = [];
  for (let i = 0; i < data.length; i++) {
    if (data[i].providerId === id) {
      newList.push(data[i]);
    }
  }
  list.value = newList;
  nextTick(() => {
    processImage(iconRef);
  });
};
const changeGame = () => {
  active.value = -1;
  list.value = _listData.value;
  nextTick(() => {
    processImage(iconRef);
  });
};
function detail(game: any) {
  if (game.state === 0) return;
  gameUserStore.setGameInfo(game);
  emitter.emit("openGameDetail");
}
</script>
<style lang="scss" scoped>
.page {
  height: auto;
  overflow: inherit;
}
.page-body {
  padding: 0 !important;
  .game-class {
    display: flex;
    overflow-x: auto;
    margin: 0.1rem 0.2rem;
    @extend .transition;
    @extend .not-select;

    &::-webkit-scrollbar {
      display: none;
    }
    .class-item {
      font-size: 0.3rem;
      padding: 1px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 0.1rem;
      // min-width: 2rem;
      // background-image: url("../../../assets/img/base/button_01.png");
      // background-size: 100% 100%;
      // background-repeat: no-repeat;
      background: #33333d;
      border-radius: 0.1rem;
      color: #646c6b;
      border: 1px solid #33333d;
      div {
        white-space: nowrap;
        margin-left: 0.1rem;
        font-weight: 500;
      }
    }

    .class-typeItem {
      padding: 0.2rem;
    }

    .active {
      border: 1px solid #3359d8;
      color: #fff;
    }
  }
  .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: flex;
    justify-content: left;
    align-items: center;
    background-color: #21212a;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1rem;
    margin: 0.1rem 0.2rem;
    height: 1rem;
    h2 {
      font-size: 0.5rem;
      margin-left: 0.2rem;
    }
  }
}
</style>
