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

        <div class="detail-info">
            <swiper pagination class="mySwiper" v-if="banners.length > 0">
                <swiper-slide v-for="(item, index) in banners" :key="index">
                    <!-- <img :src="item" /> -->

                    <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"
                    />
                </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';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        pageType: {
            type: String,
            default: 'product'
        }
    },
    mixins: [product],
    components: {
        Swiper,
        SwiperSlide,
        Post
    },
    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%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
    }
    .bg-img {
        display: block;
        width: 100vw;
    }
    .mySwiper {
        border-radius: @radius;
        border: 2px solid #ffffff;
        padding: 5px;
        .detail-animate();
        .swiper-slide {
            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;
}
.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>
