<template>
    <div class="detail-top">
        <img src="@assets/png-bg-shangping.png" class="bg-img" />

        <div class="detail-info" style="overflow-x: hidden">
            <three-mode :info="info.model3d" v-if="!!info.model3d"></three-mode>
            <swiper v-else-if="banners.length > 0" pagination class="mySwiper" centeredSlides slidesPerView="auto">
                <swiper-slide :class="{ 'swiper-pic': !is3D(item) }" v-for="(item, index) in banners" :key="index">
                    <three-mode v-if="is3D(item)" :info="item"></three-mode>
                    <div class="swiper-content">
                        <video
                            class="swiper-video"
                            v-if="isVideo(item)"
                            :src="item.url"
                            :poster="getImg(changeImgs([item]), '', 1200)"
                            controls="controls"
                        >
                            您的浏览器不支持 video 标签。
                        </video>
                        <van-image
                            v-else
                            @click="preview(index, changeImgs(banners))"
                            :src="getImg(item.url, '', 1200)"
                            width="calc(100vw - 134px)"
                            height="calc(100vw - 134px)"
                            fit="cover"
                        />
                    </div>
                </swiper-slide>
            </swiper>

            <div class="share-content">
                <like-button v-if="pageType == 'product'" :isLike="info.liked" @click="likeProduct">
                    {{ info.likes }}
                </like-button>

                <div class="share-icon" :class="{ shareLeft: pageType === 'product' }" @click="share" v-if="isShare">
                    <img src="@assets/svgs/icon-fenxiang.svg" alt="" />
                    <span>分享</span>
                </div>
            </div>
        </div>

        <post ref="post" :info="info" noButton :pageUrl="pageUrl" />
    </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

import product from '../../mixins/product';
import Post from '../Post.vue';
import { ImagePreview } from 'vant';
import ThreeMode from './ThreeMode.vue';
// import ThreeMode from './ThreeMode.vue';

export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        pageType: {
            type: String,
            default: 'product'
        }
    },
    mixins: [product],
    components: {
        Swiper,
        SwiperSlide,
        Post,
        ThreeMode
    },
    computed: {
        banners() {
            return this.info.pic || [];
        },
        pageUrl() {
            if (this.pageType === 'product') {
                return 'productDetail';
            } else {
                return 'assetDetail';
            }
        },
        isShare() {
            return (
                this.pageType === 'product' ||
                (this.info.status === 'NORMAL' && (this.info.publicShow || this.info.consignment))
            );
        }
    },
    methods: {
        share() {
            this.$refs.post.init();
        },
        preview(index = 0, list = []) {
            ImagePreview({
                images: [...list],
                startPosition: index
            });
        },
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.$emit('getProduct');
                    setTimeout(() => {
                        this.$toast.success('收藏成功');
                    }, 300);
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.$emit('getProduct');
                    setTimeout(() => {
                        this.$toast.success('取消收藏');
                    }, 300);
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
@radius: 30px;
.detail-top {
    position: relative;
    .detail-info {
        position: absolute;
        // top: 50%;
        left: 50%;
        transform: translate(-50%, 0);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100vw;
        height: calc(100vw+24px);
        top: 0px;
    }
    .mySwiper {
        width: 100vw;
        height: 100vw;
    }
    .bg-img {
        display: block;
        width: 100vw;
    }
    .mySwiper {
        overflow: visible;
    }
    .swiper-pic {
        overflow: hidden;
        border-radius: @radius;
        border: 2px solid #ffffff;
        padding: 5px;
        width: calc(100vw - 124px) !important;
        height: calc(100vw - 128px);
        margin-top: calc(25vw - 50px);
        .detail-animate();
        .swiper-content {
            display: flex;
            align-items: center;
            justify-content: center;
            /deep/ .van-image {
                border: 2px solid #2f2f2f;
                border-radius: @radius;
                overflow: hidden;
                background-color: @bg;
            }
        }
    }
}

.swiper-video {
    width: calc(100vw - 134px);
    height: calc(100vw - 134px);
    display: block;
}

.share-content {
    display: flex;
    // margin-top: 20px;
    transform: translateY(-50px);
    z-index: 20;
}
.share-icon {
    img {
        width: 18px;
        height: 18px;
        display: inline-block;
        vertical-align: middle;
    }
    span {
        font-size: @font1;
        color: #949699;
        line-height: 24px;
        vertical-align: middle;
        margin-left: 2px;
    }

    &.shareLeft {
        margin-left: 30px;
    }
}
</style>
