<template>
  <div class="avator-swiper">
    <swiper
      ref="mySwiper"
      :options="swiperOptions"
      class="avator-swiper_container"
      @slide-change="slideChange"
      @set-translate="setTranslate"
    >
      <swiper-slide v-for="(item, index) in avatorData" :key="index" class="avator-swiper_item">
        <div class="avator-swiper_item">
          <img :src="item | Img2Thumb" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css';
import Img2Thumb from '@/filters/img2Thumb.filter';
export default {
  name: 'AvatorSwiper',
  components: {
    swiper,
    swiperSlide
  },
  filters: {
    Img2Thumb
  },
  props: {
    avatorData: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      activeIndex: 0,
      swiperOptions: {
        loop: true,
        initialSlide: 0,
        slidesPerView: 9,
        spaceBetween: 4,
        speed: 900,
        centeredSlides: true,
        watchSlidesProgress: true,
        allowTouchMove: false,
        autoplay: {
          delay: 900,
          stopOnLastSlide: false,
          disableOnInteraction: false
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    slideChange() {
      this.activeIndex = this.swiper.realIndex;
    },
    setTranslate() {
      const slides = this.swiper.slides;
      for (let i = 0; i < slides.length; i++) {
        const slide = slides.eq(i);
        const progress = slides[i].progress;
        slide.css('opacity', 1 - Math.abs(progress) / 9);
        slide.css('transform', `scale(${1 - Math.abs(progress) / 17}`);
      }
    }
  }
};
</script>
<style lang="less">
.avator-swiper {
  width: 100%;
  margin: 0 auto !important;
  &_item {
    transition: transform 0.2s linear;
    height: 32px;
    padding-top: 2px;
    img {
      height: 25px;
      width: 25px;
      border-radius: 50%;
    }
    &.active {
      transform: scale(1.2);
    }
  }
}
</style>
