<template>
  <div class="provider-box">
    <div
      ref="providerRef"
      v-for="(item, index) in gameStore.providerList"
      :key="index"
      @click="change(item.providerId)"
    >
      <img v-if="item.gameProviderImg" :src="getImage(item.gameProviderImg)" />
      <span v-else>
        {{ item.gameProviderName }}
      </span>
      <div class="active" v-show="current === item.providerId"></div>
    </div>
  </div>
</template>

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

const emit = defineEmits(["change"]);

const providerRef = ref();

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

watchEffect(() => {
  if (props.current !== -1) {
    const index = gameStore.providerList.findIndex(
      (i) => i.providerId == props.current
    );
    nextTick(() => {
      providerRef.value[index].scrollIntoView(false);
    });
  }
});

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

<style lang="scss" scoped>
.provider-box {
  display: flex;
  overflow: auto;
  overflow-x: auto;
  margin-bottom: 0.1rem;
  @extend .transition;
  @include pc {
    &::-webkit-scrollbar {
      height: 0.1rem !important;
    }
  }
  &::-webkit-scrollbar {
    height: 0;
  }

  > div {
    margin: 0 0.1rem 0.1rem 0;
    cursor: pointer;
    border-radius: $border-radius;
    background-color: #333;
    font-size: 0.3rem;
    display: flex;
    justify-content: center;
    padding: 0.1rem 0.5rem;
    position: relative;

    > img {
      width: 1.2rem;
      border-radius: $border-radius;
    }
    .active {
      position: absolute;
      background: rgba($color: $other-color, $alpha: 0.3);
      border: 1px solid $nav-bar;
      height: 100%;
      width: 100%;
      top: 0;
      border-radius: $border-radius;
    }
  }
}
</style>
