<template>
  <div class="promotion-body">
    <van-overlay
      :z-index="999"
      :show="modelValue && showOne === 1 && noticeData.length > 0"
      :lock-scroll="false"
    >
      <div class="promotion-swiper">
        <swiper
          @swiper="onSwiper"
          :slidesPerView="1"
          :initialSlide="initialSlide"
          :autoplay="false"
          v-if="noticeData.length > 0"
          :loop="true"
          class="swiper"
        >
          <swiper-slide
            v-for="(item, index) in noticeData"
            :key="index"
            @click="handleClick(item,$event)"
          >
            <div class="scoll">
              <h3
                style="
                  text-align: center;
                  font-size: 0.5rem;
                  padding: 0.2rem 0;
                "
              >
                {{ item.title }}
              </h3>
              <img style="width: 100%" :src="getImage(item.displayImg)" />
              <div
                class="content-box"
                v-if="item.content"
                v-html="otherImg(item.content)"
              ></div>
            </div>
          </swiper-slide>
        </swiper>
        <div class="close" @click="close">
          <h-img
            type="local"
            style="margin-left: 0.2rem"
            width=".3rem"
            src="base/cha.png"
          />
        </div>
        <div class="left" @click="prevSwiper">
          <h-img
            type="local"
            style="transform: rotate(180deg)"
            width=".35rem"
            src="base/jiantou.png"
          />
        </div>
        <div class="right" @click="nextSwiper">
          <h-img type="local" width=".35rem" src="base/jiantou.png" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup lang='ts'>
import { ref, toRaw, onMounted, watch, computed } from "vue";
import { getImage, otherImg, handleDomClick } from "@/utils";
import { Swiper, SwiperSlide } from "swiper/vue";
import { gameListStore } from "@/stores/modules/game-list";
import router from "@/router";
import storage, { actions } from "@/utils/storage";

const gameStore = gameListStore();
let swiperNew: any;
const initialSlide = ref<number>(0);
const showOne = computed(() => Number(storage.getStorage(actions.SHOW_NOTICE)));
const modelValue = ref(true);
const onSwiper = (swiper: any) => {
  swiperNew = toRaw(swiper);
};
const noticeData = ref<Array<any>>([]);

watch(
  () => modelValue.value,
  async () => {
    if (modelValue.value) {
      await gameStore.getAds();
      let data = gameStore.announcementData.filter((item: any) => item.isAlert);
      noticeData.value = [...data.sort((i: any, j: any) => i.sort - j.sort)];
      initialSlide.value = 0;
      console.log(noticeData.value, "noticeData.value");
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
//下一页
const nextSwiper = () => {
  if (noticeData.value.length <= 1) return;
  swiperNew.slideNext();
};
// 上一页
const prevSwiper = () => {
  if (noticeData.value.length <= 1) return;
  swiperNew.slidePrev();
};
const handleClick = (item:any,event: any) => {
  event.preventDefault();
  const A_arr = (event.composedPath() || []).filter(
    (item: any) => item.tagName === "A"
  );
  if (A_arr.length > 0) {
    handleDomClick(event);
  } else {
    storage.setSessionStorage(actions.AD_ID, item.adId);
    router.push({
      path: "/details",
    });
    modelValue.value = false;
  }
};
const close = () => {
  modelValue.value = false;
  storage.setStorage(actions.SHOW_NOTICE, 0);
};
onMounted(async () => {});
</script>
<style lang='scss' scoped>
.promotion-swiper {
  width: 70%;
  height: 50%;
  margin: 50% auto;
  background-color: #0a2f2f;
  border-radius: 10px;
  position: relative;
  padding: 0.4rem 0.2rem 0.2rem 0.2rem;
  .swiper {
    width: 100%;
    height: 100%;
    z-index: 2;

    .scoll {
      overflow-y: auto;
      height: 100%;
      z-index: 10;
      @include pc {
        &::-webkit-scrollbar {
          width: 4px !important;
        }
      }
      &::-webkit-scrollbar {
        width: 4px;
      }
    }
    .content-box {
      line-height: 0.5rem;
    }
  }
  .close {
    cursor: pointer;
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #484c5a;
    border-radius: 0 10px 0 0.8rem;
    color: #fff;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left,
  .right {
    position: absolute;
    top: 50%;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.6rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .left {
    left: -0.3rem;
    background-color: #747474;
  }
  .right {
    right: -0.3rem;
    background-color: #1894dd;
  }
}
</style>