<template>
  <div class="content_body">
    <slot name="header"></slot>
    <div class="pro-box">
      <swiper
        @swiper="onSwiper"
        :slidesPerView="1"
        :initialSlide="0"
        :slidesPerGroup="1"
        :autoplay="false"
        v-if="providerList.length > 0"
        :loop="true"
        :space-between="10"
      >
        <swiper-slide v-for="(item, index) in providerList" :key="index">
          <div class="provider">
            <div
              v-for="(data, index2) in item"
              :key="index2"
              @click="changeProvider(data.providerId)"
            >
              <img
                v-if="data.gameProviderImg"
                :src="getImage(data.gameProviderImg)"
              />
              <span v-else>
                {{ data.gameProviderName }}
              </span>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, toRaw } from "vue";
import { getImage } from "@/utils";
import { Swiper, SwiperSlide } from "swiper/vue";
import { useRouter } from "vue-router";
// import storage, { actions } from "@/utils/storage";
import { useGameStore } from "@/stores/modules/game";
const gameStore = useGameStore();
import "swiper/css";

const router = useRouter();
const props = defineProps({
  providerList: {
    type: Array<any>,
    default: "",
    required: true,
  },
});

let swiperNew: any;
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);
};
//下一页
const nextSwiper = () => {
  swiperNew.slideNext();
};
// 上一页
const prevSwiper = () => {
  swiperNew.slidePrev();
};

const changeProvider = (id: number) => {
  // let p = JSON.stringify({ type: 3, value: id });
  // storage.setSessionStorage(actions.SEARCH_DATA, p);
  const p = { type: 3, value: id };
  gameStore.setSearchData(p);
  router.push("/search");
};
onMounted(async () => {});

defineExpose({
  nextSwiper,
  prevSwiper,
});
</script>
<style lang="scss" scoped>
.content_body {
  width: 100%;
  display: flex;
  flex-direction: column;
  .pro-box {
    background-color: #21212a;
    .provider {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.1rem;
      cursor: pointer;
      height: 1rem;
      padding: 0.1rem;
      > div {
        background-color: #33333d;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: $border-radius;
        overflow: hidden;
        font-size: 0.3rem;
        > img {
          width: auto;
          height: 0.8rem;
        }
      }
    }
  }

  .top {
    width: 100%;
    padding: 0.3rem;
    background-image: url("https://cdn.18n.com/home/bj_yixing.png");
    background-size: 100% 190%;
    background-repeat: no-repeat;
    .left {
      font-size: 0.4rem;
      font-weight: 600;
      justify-content: left;
    }
  }
}
</style>
