<template>
    <view class="pre-topic">
        <view v-if="previewStatus" class="pri" @click="closePri">
            <view style="margin-top: 20vh;height: 750rpx;position: relative" @click.capture.stop="sStop">
                <swiper :current="selectCurrent"
                        next-active-color="white"
                        style="height: 750rpx;"
                        @change="swiperChange"
                        @touchend="touchend(null)"
                        @transition="swiperTransition"
                >
                    <swiper-item v-for="(pic,k) of previewItem.pic_url" :key="k">
                        <image :src="pic.pic_url" style="height: 100%;width:100%"></image>
                    </swiper-item>
                </swiper>
                <view class="main-center cross-center indicator u-border-box">
                    <view class="dir-left-nowrap" v-if="previewItem.pic_url">
                        <view v-for="(i,index) in previewItem.pic_url" :key="index" class="circle"
                              :style="{backgroundColor: selectCurrent === index ? 'white' : 'rgba(255,255,255,.4)'}">
                        </view>
                    </view>
                </view>

                <view class="dir-left-nowrap info cross-center" v-if="previewItem && selectCurrent === previewItem.pic_url.length - 1">
                    <view class="dir-top-nowrap" style="margin-left: auto;">
                        <view v-for="i of ['查', '看', '详', '情']" :key="i">{{ i }}</view>
                    </view>
                    <view :style="{transform: isJump ? 'rotate(90deg)' : 'rotate(-90deg)' }" class="arrow-right"></view>
                </view>
            </view>
            <view class="pri-btn dir-left-nowrap cross-center main-center" @click.stop="touchend">
                <view class="box-grow-0" style="line-height: 1">查看全文</view>
                <view class="pri-icon box-grow-0"></view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        previewStatus: Boolean,
        swiperCurrent: Number,
        previewItem: Object,
    },
    data() {
        return {
            dx: 0,
            selectCurrent:0,
            isJump: false,
            previewIndex: 0,
        }
    },
    watch: {
        swiperCurrent(newVal){this.selectCurrent = newVal}
    },
    methods: {
        sStop() {
        },
        closePri() {
            this.$emit('update:previewStatus', false);
            this.$emit('update:previewItem', null);
        },
        touchend(s = null) {
            if (s || this.isJump) {
                this.jumpDetail(this.previewItem)
                this.closePri();
            }
        },
        jumpDetail({id}) {
            uni.navigateTo({url: `/pages/topic/topic?id=${id}`})
        },
        swiperChange({detail}) {
            const self = this;
            self.selectCurrent = detail.current;
        },
        swiperTransition({detail}) {
            this.isJump = detail.dx > this.dx && this.dx > 50 && this.selectCurrent === this.previewItem.pic_url.length - 1;
            this.dx = detail.dx;
        }
    },
}
</script>

<style lang="scss" scoped>
.pre-topic {
    .indicator {
        margin-top: 30#{rpx};
        width: 100%;
        .circle {
            height: #{10rpx};
            margin: 0 #{7.5rpx};
            width: #{10rpx};
            border-radius: 50%;
        }
    }
    .pri {
        position: fixed;
        height: 100vh;
        width: 100vw;
        background: black;
        z-index: 33333;
        color: red;
        top: 0;
        text-align: center;

        .pri-icon {
            margin-left: 8#{rpx};
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfBAMAAADtgAsKAAAAKlBMVEUAAAD///////////////////////////////////////////////////+Gu8ovAAAADnRSTlMA/gXrXC6yetYLq1EjGAqR8lgAAAA0SURBVCjPYyAbMB1AE9AyRRNQEw5A05I4mJVoCE9AFSgUQeWzCzoMPgUz0BQw8G5gIB8AAOpEDUxLXkGwAAAAAElFTkSuQmCC");
            background-size: 100% 100%;
            height: 31#{rpx};
            width: 31#{rpx}
        }

        .info {
            height: 100%;
            color: white;
            position: absolute;
            top: 0;
            right: 0;
            z-index: -1;

            .arrow-right {
                margin-left: 10#{rpx};
                margin-right: 24#{rpx};
                width: 0;
                height: 0;
                transform: rotate(90deg);
                border-width: 0 12#{rpx} 20#{rpx};
                border-style: solid;
                border-color: transparent transparent white;
            }
        }

        .pri-btn {
            color: white;
            font-size: 32#{rpx};
            width: 300#{rpx};
            height: 100#{rpx};
            background: rgba(255, 255, 255, 0.16);
            border-radius: 50#{rpx};
            margin: 80#{rpx} auto 0;
        }
    }
}
</style>