<template>
  <div class="home-banner">
    <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(item, index) in listData" :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>
      </swiper-slide>
    </swiper>
    <template v-if="!isMobile">
      <div class="prev-button"></div>
      <div class="next-button"></div>
    </template>
  </div>
</template>
<script>
export default {
  name: 'banner',
  data() {
    return {
      listData: [],
      swiperOption: {
        speed: 400,
        autoplay: true,
        delay: 3000,
        observer: true,
        observerParent: true,
        navigation: {
          nextEl: '.next-button',
          prevEl: '.prev-button'
        },
        loop: true
      }
    }
  },
  async fetch() {
    const params = { project_id: process.env.projectId, type_tag: 'ad_banner' }
    this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
  },
  computed: {
    isMobile() {
      return this.$store.state.isMobile
    }
  }
}
</script>

<style lang="scss" scoped>
.home-banner {
  position: relative;
  .swiper-wrapper {
    width: 100%;
    display: flex;
    .swiper-slide {
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .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>
