<template>
  <swiper class="ttyf-swiper-container"
          :options="ttyfSWOptions"
          v-if="arrBanner.length"
          ref="ttyfSwiper">
    <swiper-slide v-for="(item, index) in arrBanner"
                  :key="index">
      <img class="banner"
           :src="item.bannerImgUrl"
           alt="">
    </swiper-slide>
    <div class="sw-pagination"
         slot="pagination"></div>
  </swiper>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  name: 'banner',
  components: {
    swiper,
    swiperSlide
  },
  props: {
    arrBanner: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      ttyfSWOptions: {
        loop: true,
        autoplay: true,
        pagination: {
          el: '.sw-pagination',
          clickable: true
        },
        on: {
          click: this.handleClick
        }
      }
    }
  },
  methods: {
    handleClick () {
      // bannerType：1 跳转链接，0 富文本
      const ttyfSwiper = this.$refs.ttyfSwiper.swiper
      const { bannerType, url, id } = this.arrBanner[ttyfSwiper.realIndex]
      switch (bannerType) {
        case 0:
          this.$router.push({ name: 'loanMedia', params: { id } })
          break
        case 1:
          location.href = url
          break
        default:
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ttyf-swiper-container {
  .banner {
    display: block;
    width: 100%;
    height: 147px;
  }

  ::v-deep .sw-pagination {
    position: absolute;
    bottom: 0;
    z-index: 1;
    text-align: center;

    .swiper-pagination-bullet {
      margin: 0 3px !important;
    }

    .swiper-pagination-bullet {
      width: 6px;
      height: 6px;
      opacity: 1;
      background: #fff;
    }

    .swiper-pagination-bullet-active {
      background: rgba(255, 255, 255, 0.3);
    }
  }
}
</style>
