<template>
  <div class="game-class">
    <div
      class="class-item"
      ref="classRef"
      :class="{ active: current === item.gameClassId }"
      v-for="(item, index) in gameClassData"
      :key="index"
      @click="change(item)"
    >
      <img :src="getImage(item.gameClassImg)" />
      <div>{{ item.gameClassName }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { gameListStore } from "@/stores/modules/game-list";
import { getImage } from "@/utils";
import { watchEffect, ref, nextTick, computed } from "vue";
import { useRoute } from "vue-router";

const gameStore = gameListStore();
const emit = defineEmits(["change"]);
const route = useRoute();

const props = defineProps({
  current: { type: Number, default: -1, reuired: false },
});

const classRef = ref();

const gameClassData = computed(() => {
  return route.path === '/' ? gameStore.gameClassData.filter((item:any) => item.gameClassId !== 19) : gameStore.gameClassData
})

watchEffect(() => {
  if (props.current !== -1) {
    const index = gameStore.gameClassData.findIndex(
      (i:any) => i.gameClassId == props.current
    );
    nextTick(() => {
      classRef.value[index].scrollIntoView(false);
    });
  }
});

const change = (item: any) => {
  emit("change", item);
};
</script>

<style lang="scss" scoped>
.game-class {
  display: flex;
  overflow: auto;
  width: 100%;
  @extend .transition;
  @extend .not-select;

  &::-webkit-scrollbar {
    display: none;
  }
  .class-item {
    font-size: 0.3rem;
    padding: 0.1rem 0.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.1rem;
    background: #2E3435;
    border-radius: .1rem;
    color: #bbb;
    border: 1px solid #2E3435;
    img {
      width: 0.6rem;
      height: 0.6rem;
    }
    div {
      white-space: nowrap;
      margin-left: 0.1rem;
      font-weight: 500;
    }
  }

  .active {
    background: #586D74;
    border: 1px solid #586D74;
    color: #fff;
  }
}
</style>
