<template>
    <div class="image-swipe" v-if="showSwiper">
        <div class="swipe-wrap" @click.prevent="showcase()">
            <swiper :options="swiperOption" ref="swiper">
                <swiper-slide v-for="item in goodsList" :key="item.title">
                    <img :title="item.title"
                         v-img-src="{src: item.image_url, width: 580, height: 770}"
                         width="100%">
                </swiper-slide>
            </swiper>
        </div>
        <div class="pagination-wrapper">
            <ul class="page-items">
                <li v-for="index in slideCount" :key="index" class="page-item"
                    :class="{active: index - 1 == activeIndex}"></li>
            </ul>
        </div>
    </div>
</template>
<script>
    require('swiper/dist/css/swiper.css');
    import _ from 'lodash';
    import yoho from 'yoho';
    import util from 'common/util';
    import vas from 'vue-awesome-swiper';

    export default {
        props: {
            goods: [Array]
        },
        data() {
            let vm = this;

            return {
                slideCount: 0,
                activeIndex: 0,
                goodsList: [],
                swiperOption: {
                    loop: true,
                    slidesPerView: 3,
                    on: {
                        slideChangeTransitionEnd() {
                            vm.setActiveSlide(this.realIndex)
                        }
                    }
                },
                showSwiper: false
            };
        },
        components: {
            swiper: vas.swiper,
            swiperSlide: vas.swiperSlide,
            notNextTick: true
        },
        computed: {
            swiper() {
                return this.$refs.swiper.swiper;
            }
        },
        watch: {
            goods(list) {
            	let temp = [];
                _.each(list, item => {
                	_.each(item.images_list, img => {
                        temp.push({
                            image_url: img.image_url
                        });
                    });
                });

                const len = temp.length;

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

                this.goodsList = temp;
                this.slideCount = len;
            }
        },
        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){
                return realIdx;
            },
            show() {
                this.showSwiper = true;
            }
        }
    };
</script>
<style>


#ssr {
    .ssr-swiper-container {
        height: 770px;
        background-color: #f7f7f7;
    }
    .ssr-swiper {
        width: 620px;
        height: 770px;
        padding: 0 20px;
        background-color: #fff;
        transform: translateX(590px);
        font-size: 0;

        img {
            width: 580px;
            height: 770px;
        }
    }

    .show-box.carousel {
        border-top: none;
        border-bottom: none;
    }
    .show-box.info,
    .show-box.action {
        border-top: none;
    }

    .show-box.action {
        padding-bottom: 0;
        border-bottom: none;
    }
}

.image-swipe {
    position: relative;
    overflow: hidden;

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

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

    .pagination-wrapper {
        position: absolute;
        bottom: 0;
        left: 50%;
        height: 60px;
        text-align: center;
        transform: translateX(-50%);

        .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>