<template>
    <div v-dom-portal v-show="show" class="gallary-container">
        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item, index) of imgs" :key="index">
                    <div class="swiper-zoom-container">
                        <img :src="item" />
                    </div>
                </div>
            </div>
            <!-- Add Navigation -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="gallary-top">
            {{ activeIndex + 1 }}/{{imgsLength}}
            <a
                href="javascript:;"
                class="close-gallary"
                @click="handleGallaryClick"
            >
                <i class="el-icon-close"></i>
            </a>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name: 'CommonGallary',
    props: {
        imgs: {
            type: Array,
            default () {
                return []
            }
        },
        initialSlide: {
            type: Number,
            default: 0
        },
        showGallary: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            swiper: null,
            activeIndex: this.initialSlide
        }
    },
    watch: {
        initialSlide (newVal) {
            this.activeIndex = newVal
        },
        showGallary (newValue, oldValue) {
            if (newValue) {
                this.initGallary()
            }
        }
    },
    computed: {
        imgsLength () {
            return this.imgs.length
        },
        show: {
            get () {
                return this.showGallary
            },
            set (v) {
                this.$emit('update:showGallary', v)
            }
        }
    },
    methods: {
        initGallary () {
            this.swiper = new Swiper('.swiper-container', {
                zoom: true,
                initialSlide: this.initialSlide,
                observer: true,
                observeParents: true,
                observeSlideChildren: true,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                on: {
                    slideChangeTransitionEnd: () => {
                        if (this.swiper) {
                            this.activeIndex = this.swiper.activeIndex
                        }
                    }
                }
            })
        },
        handleGallaryClick () {
            this.swiper = null
            this.show = false
            this.$emit('close', { activeIndex: this.activeIndex })
        }
    }
}
</script>

<style scoped>
@import 'swiper/dist/css/swiper.css';
.gallary-container {
    z-index: 999999;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #000;
}
.gallary-container .swiper-container {
    width: 100%;
    height: 100%;
    z-index: 10;
}
.swiper-slide {
    overflow: hidden;
}
.gallary-container .gallary-top {
    z-index: 12;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: rgba(0, 0, 0, 0.3);
}

.close-gallary {
    font-size: 28px;
    color: #fff;
}
</style>
