<template>
    <transition name="van-fade" @afterLeave="onClosed">
        <div v-show="show" :class="[bem(),className]" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" >
            <Icon role="button" :name="closeIcon" :class="bem('close-icon',closeIconPosition)"  @click="emitClose"/>
            <van-swipe 
                ref="swipe"
                lazyRender
                :loop="loop"  
                :class="bem('swipe')" 
                :duration="swipeDuration" 
                :initial-swipe="current"
                :show-indicators="showIndicators"
                indicator-color="white"
                @change="onChange"
                >
                <transition v-for="(item,index) of sources" :key="index">
                    <van-swipe-item  v-if="item.type=='video'">
                        <preivew-video
                            :ref="'preivewVideo'+index"
                            :item="item"
                            :show="show" 
                            :isActive="index===current"
                        />
                    </van-swipe-item>
                     <van-swipe-item  v-else :class="bem('swipe-item')" @click="emitClose">
                        <preivew-image
                            :ref="'preivewImage'+index"
                            :item="item"
                            :show="show"
                            :isActive="index===current"
                            :maxZoom="maxZoom" 
                            :minZoom="minZoom"
                            :rootWidth="rootWidth"
                            :rootHeight="rootHeight"
                            :screenHeight="screenHeight"
                            @scale="emitScale"
                            @close="emitClose"
                            @next="next"
                            @prev="prev"
                            @downward="downward"
                        />
                    </van-swipe-item>
                </transition>
            </van-swipe>
        </div>
    </transition>
</template>
<script>
// Utils
import { bem } from 'vant/lib/image-preview//shared';

// Mixins
import { PopupMixin } from 'vant/lib/mixins/popup';
import { TouchMixin } from 'vant/lib/mixins/touch';
import { BindEventMixin } from 'vant/lib/mixins/bind-event';

// Components
import Icon from 'vant/lib//icon';

const preivewVideo = () => import("./preivew-video.vue")
import preivewImage from './preivew-image';
export default{
    mixins: [
        TouchMixin,
        PopupMixin({
            skipToggleEvent: true,
        }),
        BindEventMixin(function (bind) {
            bind(window, 'resize', this.resize, true);
            bind(window, 'orientationchange', this.resize, true);
        }),
    ],
    components:{Icon,preivewVideo,preivewImage},
    data() {
        return{
            show:false,
            sources:[],
            current:0,
            minZoom: 1/3,
            maxZoom:3,
            rootWidth: 0,
            rootHeight: 0,
            doubleClickTimer: null,
            bem:bem,
            className: null,
            closeable: false,
            asyncClose: false,
            showIndicators: false,
            loop: true,
            swipeDuration: 500,
            startPosition: 0,
            closeIcon:'clear',
            closeIconPosition:'top-right',
            opacity:1,
            screenHeight:0
        }
    },
    mounted() {
        this.resize();
        this.screenHeight=window.screen.height  
    },
    methods: {
        resize() {
            if (this.$el && this.$el.getBoundingClientRect) {
                const rect = this.$el.getBoundingClientRect();
                this.rootWidth = rect.width;
                this.rootHeight = rect.height;
            }
        },
        emitClose() {
            this.show=false
        },
        emitScale(args) {
            this.$emit('scale', args);
        },
        downward(e){
            let bottom=Math.floor(e)
            this.opacity=1-(bottom/this.screenHeight)
        },
        onChange(current) {
            let oldCurrent=this.current
            if (current !== this.current) {
                this.current = current;
                this.$emit('change', current);
            }
            setTimeout(()=>{
                if(this.sources[oldCurrent].type==='video'){
                    this.$refs['preivewVideo'+oldCurrent][0].close()
                }else{
                    this.$refs['preivewImage'+oldCurrent][0].resetScale()
                }
            },700)
        },
        onClosed() {
            this.show=false
            this.$emit('closed');
        },
        swipeTo(index, options) {
            if (this.$refs.swipe) {
                this.$refs.swipe.swipeTo(index, options);
            }
        },
        next(){
            this.$refs.swipe.next()
        },
        prev(){
            this.$refs.swipe.prev()
        },
    }
}
</script>
<style lang="less" scoped>
.van-image-preview{
    z-index: 100;
}
.van-image-preview {
     background-color: #000000;
}
</style>