<template>
  <div class="home-banner" v-if="data?.length > 0">
    <Swiper ref="mySwiper" v-bind="swiperOption">
      <SwiperSlide v-for="(item, index) in data" :key="index">
        <template v-if="item.uri">
          <a :href="item.uri" target="_black">
            <img :src="item.web_img_uri" />
          </a>
        </template>
        <template v-else>
          <img :src="item.web_img_uri" />
        </template>
      </SwiperSlide>
    </Swiper>
    <div class="prev-button"></div>
    <div class="next-button"></div>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Navigation } from 'swiper/modules'
import { getAdvertisementList } from '@/api'

const config = useRuntimeConfig()

const swiperOption = {
  modules: [Navigation],
  speed: 400,
  autoplay: true,
  delay: 3000,
  observer: true,
  observerParent: true,
  navigation: {
    nextEl: '.next-button',
    prevEl: '.prev-button',
  },
  loop: true,
}

// 使用 useAsyncData 进行服务端渲染
const { data } = await useAsyncData('banner-ads', async () => {
  const params = { project_id: config.public.projectId, type_tag: 'ad_banner' }
  const res = await getAdvertisementList(params)
  return [{ web_img_uri: '/images/banner.jpg' }, ...res.data.data] || []
})
</script>

<style lang="scss">
.home-banner {
  position: relative;

  .swiper-wrapper {
    height: 650px;

    .swiper-slide {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .prev-button {
    position: absolute;
    top: 50%;
    left: 30px;
    width: 20px;
    height: 35px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/beb733466e5ab0168b459a55d198b084.png);
    background-size: 100% 100%;
    z-index: 999;
    cursor: pointer;
  }

  .next-button {
    position: absolute;
    top: 50%;
    right: 30px;
    width: 20px;
    height: 35px;
    background: url(https://zws-imgs-pub.ezijing.com/static/public/e97f45b23a3e5ec4913f0069cc714baf.png);
    background-size: 100% 100%;
    z-index: 999;
    cursor: pointer;
  }
}
</style>
