<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="_blank">
              <img :src="item.web_img_uri">
            </a>
          </template>
          <template v-else>
            <img :src="item.web_img_uri">
          </template>
        </div>
      </div>
    </div>
    <div class="prev-button"></div>
    <div class="next-button"></div>
  </div>
</template>
<script>
  const _this = this
  export default {
    data () {
      return {
        listData: [],
        swiperOption: {
          speed: 400,
          autoplay: true,
          delay: 4500,
          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 => {
        return res.data.data
      })
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    mounted() {
    },
    methods: {
      swiperStop() {
        this.swiper.autoplay.stop()
      },
      swiperStart() {
        this.swiper.autoplay.start()
      }
    }
  }
</script>

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