<template>
  <div class="swiper-body">
    <slot name="header">
      <!-- 页面头部 -->
    </slot>
    <div class="swiper-body-content">
      <swiper
        @swiper="onSwiper"
        :slidesPerView="1"
        :initialSlide="initialSlide"
        :autoplay="false"
        v-if="list.length > 0"
        :loop="true"
      >
        <swiper-slide v-for="(item, index) in list" :key="index">
          <div
            class="swiper-item"
            :style="{
              'grid-template-columns':
                className === 'Esportes' ? 'repeat(1, 1fr)' : 'repeat(3, 1fr)',
            }"
          >
            <div
              :data-id="el._id"
              v-for="(el, index2) in item"
              :key="index2"
              @click="detail(el)"
            >
              <img :src="getImage(el.gameImg2)" />
              <h-img
                type="local"
                class="state-img"
                :src="
                  el.adState == 1
                    ? 'game/img_hot.png'
                    : el.adState == 2
                    ? 'game/img_good.png'
                    : el.adState == 3
                    ? 'game/img_new.png'
                    : ''
                "
              />
              <div class="maintenance-box" v-show="el.state === 0">
                <img :src="getAssets('base/br.png')" />
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="no-data" v-else>Opa! Ainda não há dados!</div>
    </div>
    <slot name="footer"></slot>
  </div>
</template>
<script setup lang="ts">
import { getAssets, getImage, getStaticImage } from "@/utils";
import { ref, toRaw, watch, nextTick } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { useGameStore } from "@/stores/modules/game";
import storage, { actions } from "@/utils/storage";
import "swiper/css";
import router from "@/router";
import useInView from "@/hooks/useInView";
import emitter from "@/utils/eventBus";
import { toast } from "@/utils/toast";
import socketApi from "@/socket/socketApi";
import http from "@/https/index";
const { processImage } = useInView();
const iconRef = ref();
const gameStore = useGameStore();
const initialSlide = ref<number>(0);
let swiperNew: any;
const props = defineProps({
  list: {
    type: Array<any>,
    default: [],
    required: true,
  },
  className: {
    type: String,
    default: "",
    required: false,
  },
});
watch(
  () => props.list,
  () => {
    initialSlide.value = 0;
    // nextTick(() => {
    //   processImage(iconRef);
    // });
  },
  {
    deep: true,
    immediate: true,
  }
);
const emits = defineEmits(["changeTotal"]);

// nextTick(() => {
//   processImage(iconRef);
// });

//下一页
const nextSwiper = () => {
  if (props.list.length <= 1) return;
  swiperNew.slideNext();
};
// 上一页
const prevSwiper = () => {
  if (props.list.length <= 1) return;
  swiperNew.slidePrev();
};

const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);
};

const moveErrorImg = (event: any) => {
  event.currentTarget.src = getAssets("base/loading.png");
  return true;
};

async function detail(game: any) {
  if (game.state === 0) return;
  if (game.gameId !== "Esportes") {
    gameStore.setGameInfo(game);
    emitter.emit("openGameDetail");
  } else {
    if (!storage.getStorage(actions.USER_TOEKN)) {
      router.replace("/login");
      return;
    }
    const res: ResultData = await http.getGameUrl({
      gameId: game.gameId,
    });
    if (res.code != 0) return toast(res.txt);
    gameStore.setStartGameInfo(res.data);
    emitter.emit("openGame");
  }
}

defineExpose({
  nextSwiper,
  prevSwiper,
});
</script>
<style lang="scss" scoped>
.swiper-body {
  z-index: 1;
  &-content {
    background-color: #292D36;
    padding: 0.1rem;
  }
  .swiper-item {
    display: grid;
    gap: 0.2rem;

    > div {
      position: relative;
      display: flex;
      .maintenance-box {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 6;
        background-color: rgba(0, 0, 0, 0.1);
      }
    }
    img {
      width: 100%;
      height: 4.3rem;
      border-radius: 0.15rem;
    }
    .state-img {
      position: absolute;
      top: 0;
      right: -0.1rem;
      width: 1rem;
      z-index: 5;
    }
  }
  .no-data {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.4rem;
  }
}
</style>
