<template>
    <div class="image-swipe">
        <div class="swipe-wrap" @click.prevent="showcase()">
            <awesome-swiper name="mySwiper" :options="swiperOption" ref="mySwiper" v-if="reload">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="item in goodsList" :key="item.goods_id">
                        <img :src="item.color_image" alt="">
                    </div>
                </div>
            </awesome-swiper>
            <div class="swipe-mask" v-show="!show">
                <div class="item left"></div>
                <div class="item middle"></div>
                <div class="item right"></div>
            </div>
        </div>
        <div class="pagination-wrapper">
            <ul class="page-items">
                <li v-for="index in goods.length" :key="index" class="page-item"
                    :class="{active: index - 1 == activeIndex}"></li>
            </ul>
        </div>
    </div>
</template>
<script>
import _ from 'lodash/core';
import {getImgUrl} from 'common/utils';

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

        return {
            goodsList: [],
            reload: true,
            show: false,
            slideCount: 0,
            activeIndex: 0,
            swiperOption: {
                loop: true,
                slidesPerView: 3,
                on: {
                    slideChangeTransitionEnd() {
                        vm.setActiveSlide(this.realIndex)
                    }
                }
            }
        };
    },
    watch: {
        goods(val) {
            this.slideCount = 0;
            this.activeIndex = 0;
            this.show = false;
            this.reload = false;
            this.$nextTick(() => {
                this.goodsList = this.getImageList(val);
                this.reload = true;
            });
            this.loadImages();
        }
    },
    created() {
        if (this.goods.length) {
            this.show = false;
            this.goodsList = this.getImageList(this.goods);
        }
    },
    mounted() {
        this.loadImages();
    },
    methods: {
        showcase: function() {
            const realIndex = this.mySwiper.realIndex;
            const index = this.calcIndex(realIndex);

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

            this.$yoho.goImageBrowser(opts);
        },
        setActiveSlide(idx) {
            this.activeIndex = this.calcIndex(idx);
        },
        calcIndex(realIdx) {
            return realIdx;
        },
        getImageList(goodList) {
            let goods = _.map(goodList, good => {
                return {
                    color_image: getImgUrl(good.color_image, 580, 770, 2),
                    goods_id: good.goods_id
                };
            });
            const len = goods.length;

            if (len > 1) {
                goods.unshift(goods.splice(len - 1)[0]);
            }
            return goods;
        },
        loadImages() {
            if (this.goodsList.length > 0) {
                let img = new Image();

                img.onload = () => {
                    setTimeout(() => {
                        this.show = true;
                    }, 500);
                };
                img.src = this.goodsList[0].color_image;
            }
        }
    }
};
</script>

<style lang="scss">
.image-swipe {
    position: relative;
    overflow: hidden;
    background-color: #fff;

    .swipe-wrap {
        height: 770px;
        width: 1800px;
        transform: translateX(-520px);
        position: relative;
    }
    .swipe-mask {
        z-index: 1;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        .item {
            float: left;
            width: 580px;
            height: 770px;
            margin: 0 10px;
            background-color: #f5f7f6;
        }
    }

    .swiper-slide {
        width: 600px;
        height: 770px;
        padding: 0 10px;

        img {
            width: 580px;
            height: 770px;
            background-color: #f5f7f6;
        }
    }
    .swiper-container {
        overflow: visible;
        position: relative;
        z-index: 2;
    }

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