<script>
    import {
        swiper,
        swiperSlide
    } from "vue-awesome-swiper";
    var vm = null;
    export default {
        data() {
            return {
                swiperOption: {
                    notNextTick: true,
                    //循環(huán)
                    loop: true,
                    //設(shè)定初始化時(shí)slide的索引
                    initialSlide: 0,
                    //自動(dòng)播放
                    autoplay: true,
                    autoplay: {
                        delay: 3000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    // 設(shè)置輪播
                    effect: '',
                    //滑動(dòng)速度
                    speed: 800,
                    //滑動(dòng)方向
                    direction: 'horizontal',
                    //小手掌抓取滑動(dòng)
                    // grabCursor : true,
                    //滑動(dòng)之后回調(diào)函數(shù)
                    on: {
                        slideChangeTransitionEnd: function() {
                            console.log(this.activeIndex);
                            //切換結(jié)束時(shí)，告訴我現(xiàn)在是第幾個(gè)slide
                            //                             const realIndex = this.activeIndex;
                            //                             vm.carousel(realIndex);
                        },
                        click: function() {
                          // 這里有坑，需要注意的是：this 指向的是 swpier 實(shí)例，而不是當(dāng)前的 vue， 因此借助 vm，來調(diào)用 methods 里的方法 
                          // console.log(this); // -> Swiper
                          // 當(dāng)前活動(dòng)塊的索引，與activeIndex不同的是，在loop模式下不會(huì)將 復(fù)制的塊 的數(shù)量計(jì)算在內(nèi)。
                            console.log('ss'+this.realIndex)
                            const realIndex = this.realIndex;
                            vm.carousel(vm.carousels[realIndex]);
                        }
                    },
                    //左右點(diǎn)擊
                    //                  navigation: {
                    //                      nextEl: '.swiper-button-next',
                    //                      prevEl: '.swiper-button-prev',
                    //                  },
                    //分頁器設(shè)置         
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true
                    }
                },
                swiperSlides: [1, 2, 3, 4],
                activeIndex: 0,
                carousels:[]
            }
        },
        components: {
            swiper,
            swiperSlide
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.swiper;
            }
        },
        created() {
            vm = this;
        },
        methods: {
            carousel(type) {
                if (type.url !== null) {
                    this.$router.push(type.redirect_to);
                } 
            }
        }
    }