<template>
	<view @click="close" class="app-preview-image">
        <!-- #ifdef MP-ALIPAY -->
        <swiper class="swiper" :current="currentIndex" @change="changIndex">
        <!-- #endif -->
        <!-- #ifndef MP-ALIPAY -->
        <swiper class="swiper" :current-item-id="currentIndex" @change="changIndex">
        <!-- #endif -->
            <swiper-item v-for="(item,index) in list" :key="index" :item-id="index">
                <view class="swiper-item main-center cross-center">
                    <image v-show="item.height" :src="item.pic_url" :style="[{'height':`${item.height}`}]" @load="imageLoad(index,$event)"></image>
                </view>
            </swiper-item>
        </swiper>
        <view class="attr-name main-center cross-center"><view>{{currentName}}</view></view>
        <view class="attr-index">{{currentIndex + 1}}/{{list.length}}</view>
	</view>
</template>

<script>
    export default {
        name: "app-preview-image",
	    data() {
            return {
                currentIndex: 0,
                currentName: '',
                list: []
            }
        },
	    props: {
            cover_list: Array,
            index: {
                type: Number,
                default() {
                    return 0
                }
            }
	    },
        created() {
            this.list = JSON.parse(JSON.stringify(this.cover_list));
            this.currentIndex = this.index;
            this.currentName = this.list[this.currentIndex].name;
        },
	    methods: {
            close() {
                this.$emit('change', this.currentIndex);
            },
            changIndex(e) {
                this.currentIndex = e.detail.current;
                this.currentName = this.list[e.detail.current].name;
            },
            imageLoad(index,e) {
                let $height = e.detail.height; //获取图片真实高度
                let $width = e.detail.width; //获取图片真实宽度
                let height = $height * (750 / $width);
                this.list[index].height = height + 'rpx';
                this.$forceUpdate();
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-preview-image {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 10000;
        .swiper {
            width: 100%;
            height: 100%;
            .swiper-item {
                height: 100%;
                image {
                    display: block;
                    width: 100%;
                }
            }
        }
        .attr-name {
            height: 76rpx;
            position: fixed;
            bottom: 160rpx;
            left: 0;
            width: 100%;
            z-index: 10001;
            color: #fff;
            font-size: 32rpx;
            >view {
                height: 76rpx;
                line-height: 76rpx;
                border-radius: 38rpx;
                display: inline-block;
                padding: 0 40rpx;
                background-color: rgba(255,255,255,.25);
                max-width: 80%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .attr-index {
            color: #fff;
            height: 60rpx;
            line-height: 60rpx;
            padding: 0 30rpx;
            display: inline-block;
            background-color: rgba(255,255,255,.25);
            position: fixed;
            bottom: 60rpx;
            right: 40rpx;
            border-radius: 30rpx;
            font-size: 26rpx;
            z-index: 10001;
        }
	}
</style>