<template>
    <div class="image-carousel">
        <swipe :continuous="false" :auto="0" :show-indicators="goods && goods.length > 1" v-ref:swipe>
            <swipe-item v-for="item in goods">
                <img title="{{item.title}}"
                     :src="item.colorImage | resize 750 1000"
                     width="100%" alt=""
                     @click.prevent="showcase()">
            </swipe-item>
        </swipe>
    </div>
</template>
<style l>
    .image-carousel {
        width: 100%;
        height: 1000px;

        .swipe {
            height: 100%;
        }

        .swipe-indicators {
            left: auto;
            right: 32px;
        }

        .swipe-indicator {
            width: 8px;
            height: 8px;
            line-height: 12px;
            display: inline-block;

            &.active {
                width: 12px;
                height: 12px;
                background: #000;
                opacity: 0.6;
                margin: -2px 5px;
            }
        }
    }
</style>
<script>
    const swipe = require('vue-swipe');
    const yoho = require('yoho');

    module.exports = {
        props: {
            goods: [Object]
        },
        data() {
            return {
            };
        },
        components: {
            swipe: swipe.Swipe,
            swipeItem: swipe.SwipeItem,
        },
        methods: {
            showcase: function() {
                const opts = {
                    images: this.goods.map((item) => {
                        return item.colorImage;
                    }).filter(image => image),
                    index: this.$refs.swipe.index
                };

                yoho.goImageBrowser(opts);
            }
        }
    };
</script>