<template>
    <div class="zr-swiper-group" :style="{width:width+'px', display:'block'}">
        <swiper :options="swiperOptionTop" class="gallery-top imgs" :style="{width:width+'px', height: width + 'px'}" ref="swiperTop">
            <swiper-slide class="slide-1 imgsList" v-for="item in imageData" :key="item.index">
                <img :src="item" alt="" />
            </swiper-slide>
        </swiper>
        <!-- swiper2 Thumbs -->
        <div class="imgs-group" :style="{width:width+'px'}">
            <swiper :options="swiperOptionThumbs" class="gallery-thumbs" ref="swiperThumbs">
                <swiper-slide class="slide-1" :class="currentSlideIndex == index?'cur':''" v-for="(item, index) in imageData" :key="index" :style="{width:smallWidth + 4 +'px'}">
                    <img :src="item" alt="" @mouseenter="onMouseEnter(index)" :style="{width:smallWidth+'px', height: smallWidth + 'px'}" />
                </swiper-slide>
            </swiper>
            <div class="swiper-button-prev btn"></div>
            <div class="swiper-button-next btn"></div>
        </div>
        
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.min.css";

export default {
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        imageData: {
            type: Array,
            default: () => []
        },
        width: {
            type: Number,
            default: 400,
        },
        smallWidth: {
            type: Number,
            default: 60,
        },
        slidesPerView: {
            type: Number,
            default: 5,
        },
        spaceBetween: {
            type: Number,
            default: 5,
        },
        effect: {
            type: String,
            default: "fade",
        },
    },
    data() {
        return {
            swiperOptionTop: {
                effect: this.effect,
                orderType: 0,
            },
            swiperOptionThumbs: {
                spaceBetween: this.spaceBetween,
                slidesPerView: 'auto',
                slideActiveClass : 'zr-swiper-slide-active',
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
            },
            swiperSlides: [],
            currentSlideIndex: 0,
        };
    },
    mounted() {
    },
    computed: {
        swiperThumbs() {
            return this.$refs.swiperThumbs.$swiper
        },
        swiperTop() {
            return this.$refs.swiperTop.$swiper
        }
    },
    methods: {
        onMouseEnter(index) {
            this.currentSlideIndex = index;
            this.swiperTop.slideTo(index);
        },
    },
};
</script>

<style lang="less" scoped>
.zr-swiper-group {
    display: block;
    height: auto;
    overflow: hidden;
}

.imgsList {
    width: 100%;
    height: 100%;
}

.imgsList img {
    display: block;
    width: 100%;
    height: 100%;
}

.gallery-thumbs {
    height: 20% !important;
    box-sizing: border-box;
}

.gallery-thumbs .swiper-slide {
    // width: 64px;
    height: 100%;
}

.gallery-thumbs .swiper-slide img {
    display: block;
    width: 60px;
    height: 60px;
}

.imgs-group {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    // justify-content: center;
    padding: 0 30px;
    margin-top: 10px;
}
.imgs-group .btn {
    background-color: rgb(247, 247, 247);
    height: 100%;
}
.imgs-group .swiper-button-next, .imgs-group .swiper-button-prev {
    top: 22px;
    font-size: 14px;
    color: #666;
}
.imgs-group .swiper-button-prev {
    left: 0;
}
.imgs-group .swiper-button-next {
    right: 0;
}
.imgs-group .swiper-button-next:after, .imgs-group .swiper-button-prev:after {
    font-size: 14px;
}

.imgs-group .slide-1 {
    flex-shrink: 0;
    box-sizing: border-box;
    border: 2px solid #fff;
    cursor: pointer;
}
.imgs-group .cur {
    border: 2px solid #f44;
}

/deep/ .swiper-container {
    margin: 0;
}

</style>