<template>
  <div class="home">
    <swiper :options="swiperOption" ref="mySwiper" v-if="sliceArr.length">
      <swiper-slide v-for="(item, index) in sliceArr" :key="index"
        ><img :src="$cdnUrl+item.ossPath" alt="" @click="skip(item.url)"
      /></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  components: {
    Swiper,
    SwiperSlide
  },
  name: 'index',
  data () {
    return {
      sliceArr: [],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true,
        autoplay: {
          disableOnInteraction: false,
          delay: 4000
        }
      }
    }
  },
  created () {
    this.getSlideList()
  },
  methods: {
    skip (url) {
      console.log(999, url)
      if (url !== '') window.open(url, '_blank')
    },
    async getSlideList () {
      let result = await this.$http({
        method: 'post',
        url: '/api/web/slideshow/list'
      })
      this.sliceArr = result && result['code'] === 0 && result['data'] || []
    }
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  .swiper-slide {
    width: 100%;
    // display:flex;
    // font-size:0;
    > img {
      cursor: pointer;
      display: block; // 行内元素img 自带间距
      width: 100%;
      max-height: 846px;
    }
  }
}
</style>

<style lang="less">
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .7);
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .7);
}
.swiper-button-prev::after,
  .swiper-button-next::after {
    color: #fff;
    font-size: 16px;
  }
.swiper-pagination-bullet-active {
  background: #fff!important;
}
.swiper-pagination-bullet{
  background-color: rgba(255,255,255,.4);
  opacity: 1;
  width: 50px;
  height: 5px;
  border-radius: 5px;
}

</style>
