<template>
  <div class="banner-content" @mouseenter="swiperStop" @mouseleave="swiperStart">
    <div v-swiper:mySwiper="swiperOption" ref="mySwiper">
      <div class="swiper-wrapper">
        <div class="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>
        </div>
      </div>
    </div>
    <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.newProjectId, type_tag: 'ad_banner' }
    this.listData = await this.$axios.get('/api/cms/api/v1/advertisements', { params }).then(res => res.data.data)
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  mounted() {},
  methods: {
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.banner-content {
  position: relative;
  width: 100%;
  .swiper-wrapper {
    width: 100%;
    display: flex;
    .swiper-slide {
      width: 100%;
      // float: left;
      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>