<template>
    <div class="image-swipe">
        <div class="swipe-wrap" @click.prevent="showcase()">
            <swiper :options="swiperOption" v-ref:swiper>
                <swiper-slide v-for="item in goodsList">
                    <img title="{{item.title}}"
                         :src="item.color_image | resize 580 770"
                         width="100%">
                </swiper-slide>
            </swiper>
        </div>
        <div class="pagination-wrapper">
            <ul class="page-items">
                <li v-for="index in slideCount" class="page-item" :class="{active: index == activeIndex}"></li>
            </ul>
        </div>
    </div>
</template>
<script>
    const _ = require('lodash');
    const yoho = require('yoho');
    const vas = require('vue-awesome-swiper');

    module.exports = {
        props: {
            goods: [Object]
        },
        data() {
            let vm = this;

            return {
                slideCount: 0,
                activeIndex: 0,
                goodsList: [],
                swiperOption: {
                    loop: true,
                    slidesPerView: 3,
                    onSlideChangeEnd(swiper) {
                        vm.setActiveSlide(swiper.realIndex)
                    }
                }
            };
        },
        components: {
            swiper: vas.swiper,
            swiperSlide: vas.swiperSlide,
            notNextTick: true
        },
        computed: {
            swiper() {
                return this.$refs.swiper.swiper
            }
        },
        watch: {
            goods(val) {
                let temp = val.slice();
                const len = temp.length;

                if (len > 1 && len < 4) {
                    temp.unshift(temp.splice(len - 1)[0]);
                }

                if (len >= 4) {
                    const sp = temp.splice(0, 2);

                    temp.push(sp[0]);
                    temp.push(sp[1]);
                }
                this.goodsList = temp;
                this.slideCount = this.goodsList.length;
            }
        },
        methods: {
            showcase: function() {
                const realIndex = this.swiper.realIndex;
                const index = this.calcIndex(realIndex);

                const opts = {
                    index,
                    images: this.goods.map((item) => {
                        return item.color_image;
                    }).filter(image => image),
                };

                yoho.goImageBrowser(opts);
            },
            setActiveSlide(idx){
                this.activeIndex = this.calcIndex(idx);
            },
            calcIndex(realIdx){
                const len = this.goods.length;

                if (len >= 4) {
                    if (realIdx === len -1) {
                        realIdx = 0;
                    } else {
                        realIdx += 1;
                    }

                    if (realIdx < len -2) {
                        realIdx += 2;
                    } else if (realIdx === len -2) {
                        realIdx = 0;
                    } else {
                        realIdx = 1;
                    }
                }

                return realIdx;
            }
        }
    };
</script>
<style>
.image-swipe {
    overflow: hidden;

    .swipe-wrap {
        width: 1800px;
        transform: translateX(-520px);
    }

    .swiper-slide {
        width: 600px;
        height: 770px;
        padding: 0 10px;
    }
    .swiper-container {
        overflow: visible;
    }

    .pagination-wrapper {
        position: relative;
        height: 60px;
        text-align: center;
        background-color: #f7f7f7;

        .page-items {
            top: 12px;
            left: 50%;
            line-height: 55px;
        }

        .page-item {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 5px;
            border-radius: 0;
            background-color: #b0b0b0;
        }

        .page-item.active {
            width: 20px;
            background-color: #000;
        }
    }
}
</style>