<template>
  <div class="content_body" v-if="hotList.length > 0">
    <div class="title">Grandes Vitórias Recentes</div>
    <swiper
      class="my-swipe"
      @swiper="onSwiper"
      slidesPerView="auto"
      :initialSlide="0"
      :slidesPerGroup="1"
      :autoplay="autoplayOptions"
      :loop="true"
      :modules="modules"
    >
      <swiper-slide
        data-swiper-autoplay="3000"
        v-for="(item, index) in hotList"
        :key="index"
        @click="detail(item)"
      >
        <div>
          <img :src="getImage(item.gameImg2)" />
          <div class="text">
            <p>{{ fomartName(`${item.uid}`) }}</p>
            <span>R${{ Number(item.coins / 10000).toFixed(2) }}</span>
          </div>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script setup lang="ts">
import { onMounted, toRaw, ref, watch, nextTick, computed } from "vue";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay } from "swiper";
import "swiper/css";
import {
  getAssets,
  getImage,
  fomartName,
  getStaticImage,
  formatGameList,
} from "@/utils";
import { useGameStore } from "@/stores/modules/game";
import { noticeStore } from "@/stores/modules/notice";
import useInView from "@/hooks/useInView";
import emitter from "@/utils/eventBus";

const gameStore = useGameStore();
const userNotice = noticeStore();
const { processImage } = useInView();
const hotList = computed(() => {
  let data:Array<any> = []
  for(let i = 0; i < userNotice.notice.length; i++){
    if(userNotice.notice[i]._id && userNotice.notice[i].uid){
      data.push(userNotice.notice[i])
    }
  }
  return Array.from(new Set(data));
});
onMounted(async () => {});
let swiperNew: any;
const modules = [Autoplay];
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);
};
const autoplayOptions = {
  delay: 3000,
  disableOnInteraction: false,
  pauseOnMouseEnter: true,
  reverseDirection: false,
};
function detail(game: any) {
  if(game.state === 0) return
  gameStore.setGameInfo(game);
  emitter.emit('openGameDetail')
}
</script>
<style lang="scss" scoped>
.content_body {
  padding: 0.2rem 0;
  .title {
    text-align: left;
    font-size: 0.4rem;
    font-weight: 600;
  }
  .no-data {
    font-size: 0.4rem;
    text-align: center;
    height: 4rem;
    line-height: 4rem;
  }
}
.my-swipe {
  :deep(.swiper-slide) {
    width: 3.1rem !important;
    margin-right: 0.1rem;
    border-radius: 0.15rem;
    overflow: hidden;
    > div {
      display: flex;
      flex-direction: column;
      img {
        width: 100%;
        min-height: 4.3rem;
      }
      .text {
        padding: 0.2rem 0 0.2rem 0.4rem;
        color: #98a7b5;
        background-color: #1c1e22;
        font-size: .3rem;
        font-weight: 600;
        text-align: left;
        span {
          color: #42c436;
          background-color: #203122;
        }
      }
    }
  }
}
</style>
