<template>
    <view class="swiper-content" v-show="show">
        <view class="hander-top">
            <view class="icon-back-wrap" @click="onBack">
                <image class="icon-back" src="@/pagesB/static/preview/icon-back.png" mode="widthFix" />
            </view>
            <view class="count">{{currentImg + 1}} / {{ imgs.length }}</view>
            <view></view>
        </view>
        <swiper class="swiper-img" :current="currentImg" :duration="300" @change="changeSwiper">
            <swiper-item class="swiper-item" v-for="(item, index) in imgs" :key="index">
                <view class="img-page">
                    <movable-area scale-area>
                        <movable-view direction="all" scale="true" scale-min="1" scale-max="4">
                            <image class="max-img" v-if="listType==1" :src="item[urlKey]" :lazy-load="true" mode="widthFix" />
                            <image class="max-img" v-else :src="item" :lazy-load="true" mode="widthFix" />
                        </movable-view>
                    </movable-area>
                </view>
            </swiper-item>
        </swiper>
        <view class="item-bottom">
            <scroll-view class="scroll-view_H " :scroll-x="true" :scroll-into-view="scrollTopIndex" :scroll-with-animation="true" scroll-left="20">
                <view class="img-page-box scroll-view-item_H" :class="currentImg == index ? 'img-page-checked' : ''" v-for="(item, index) in imgs" :key="index" :id="`scrollToIndex${index}`" @click.stop="toImg(index)">
                    <image class="img" v-if="listType==1" :src="item[urlKey]" mode="aspectFill" />
                    <image class="img" v-else :src="item" mode="aspectFill" />
                </view>
            </scroll-view>
        </view>
        <view class="handle-wrap">
            <view class="w-64 h-64" @click="isScale = !isScale">
                <image v-show="isScale" class="w-64 h-64" src="@/pagesB/static/preview/icon-scale-yes.png" mode="widthFix" />
                <image v-show="!isScale" class="w-64 h-64" src="@/pagesB/static/preview/icon-scale.png" mode="widthFix" />
            </view>
            <view class="w-64 h-64" @click="isCollect = !isCollect">
                <image v-show="isCollect" class="w-64 h-64" src="@/pagesB/static/preview/icon-collect-yes.png" mode="widthFix" />
                <image v-show="!isCollect" class="w-64 h-64" src="@/pagesB/static/preview/icon-collect.png" mode="widthFix" />
            </view>
            <view class="w-64 h-64" @click="isLike = !isLike">
                <image v-show="isLike" class="w-64 h-64" src="@/pagesB/static/preview/icon-like-yes.png" mode="widthFix" />
                <image v-show="!isLike" class="w-64 h-64" src="@/pagesB/static/preview/icon-like.png" mode="widthFix" />
            </view>
            <image class="w-64 h-64" src="@/pagesB/static/preview/icon-set-wallpaper.png" mode="widthFix" />
            <image class="w-64 h-64" src="@/pagesB/static/preview/icon-share.png" mode="widthFix" />
            <image class="w-64 h-64" src="@/pagesB/static/preview/icon-download.png" mode="widthFix" />
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            show: false,
            imgs: [],
            currentImg: 0,
            isPop: false,
            scrollTopIndex: "",

            isScale: false,
            isCollect: false,
            isLike: false,
        };
    },
    props: {
        urlKey: {
            type: String,
            default: "path"
        },
        listType: {
            type: [Number,String],
            default: 1  // 数据结构类型 1: [{},{}]    2: []
        },
    },
    onLoad(da) {},
    methods: {
        changeSwiper(e) {
            this.currentImg = e.detail.current;
            this.scrollTopIndex = `scrollToIndex${e.detail.current}`;
        },
        toImg(index) {
            this.currentImg = index;
        },
        onBack() {
            this.show = false;
        },
        open(da){
            let { imgs, current } = da;
            this.imgs = imgs || [];
            this.currentImg = current || 0;
            this.show = true
        },
    },
};
</script>
<style lang="scss" scoped>
.swiper-content {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
}

movable-view {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

movable-area {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100%;
    transform: scale();
}

movable-view image {
    width: 100%;
}

uni-image>img {
    z-index: -1 !important;
}

.hander-top {
    position: absolute;
    z-index: 1000;
    top: 108rpx;
    left: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;

    .icon-back-wrap {
        width: 64rpx;
        height: 64rpx;

        .icon-back {
            width: 64rpx;
            height: 64rpx;
        }
    }

    .count {
        box-sizing: border-box;
        padding: 8rpx 24rpx;

        color: #fff;
        border-radius: 24rpx;
        background: rgba(0, 0, 0, .4);

        font-size: 28rpx;
    }
}

.swiper-img {
    width: 100vw;
    height: 100vh;

    background-color: #000;

    .swiper-item {
        width: 100vw;
        height: 100vh;

        .img-page {
            display: flex;
            align-items: center;

            width: 100vw;
            height: 100vh;

            .max-img {
                width: 100%;
            }
        }
    }
}

.item-bottom {
    position: fixed;
    z-index: 9999;
    bottom: 110rpx;
    left: 0rpx;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100vw;

    //  height: 200rpx;
    padding: 30rpx;

    transition: ease-in-out .3s;
}

.small-list-page {
    min-height: 60rpx;
}

.scroll-Y {
    height: 300rpx;
}

.scroll-view_H {
    width: 100%;
    box-sizing: border-box;
    padding-right: 32rpx;
    white-space: nowrap;
}

.scroll-view-item_H {
    display: inline-block;

    margin-right: 10rpx;

    transition: ease-in .1s;
    transform: scale(.8);

    border-radius: 11rpx;
    background: #c2c2c2;

    &:last-child {
        margin-right: 0;
    }

    .img {
        display: block;

        width: 160rpx;
        height: 272rpx;
    }
}

.img-page-checked {
    transform: translateY(-28rpx) scale(1);
}
</style>