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

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

                    <!-- <div class="video-box" v-if="isVideo(item)">
                        <van-icon color="#fff" size="60" name="play-circle" />
                    </div> -->
                    <van-image
                        v-if="opened === false"
                        width="calc(100vw - 134px)"
                        height="calc(100vw - 134px)"
                        :src="require('../../assets/manghe.png')"
                        fit="cover"
                    />
                    <video
                        class="swiper-video"
                        v-else-if="isVideo(item)"
                        :src="item.url"
                        controls
                        :poster="getImg(changeImgs([item]), '', 1200)"
                        playsinline="true"
                        webkit-playsinline="true"
                        autoplay
                    >
                        您的浏览器不支持 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">
                <div class="setAvatar" @click="setAvatar" v-if="pageType == 'asset' && onlyImg">
                    <img src="../../assets/icon-sheweitouxiang.png" alt="" />
                    <span>设为头像</span>
                </div>

                <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 && !startTime && !assignment"
                >
                    <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 asset from '../../mixins/asset';
import Post from '../Post.vue';
import ThreeMode from './ThreeMode.vue';
import { ImagePreview } from 'vant';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        pageType: {
            type: String,
            default: 'product'
        },
        startTime: {
            type: String,
            default: ''
        },
        assignment: {
            type: Boolean,
            default: false
        }
    },
    mixins: [product, asset],
    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))
            );
        },
        onlyImg() {
            if (this.banners.length > 0 && !this.info.model3d) {
                if (this.banners[0].type.indexOf('image') !== -1) {
                    return true;
                }
            }
            return false;
        }
    },
    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);
                });
            }
        },
        videoPlay(e) {
            console.log(this.$refs.swiperVideo[0]);
            this.$nextTick(() => {
                this.$refs.swiperVideo[0].play();
            });
        },
        setAvatar() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.updateUser({ avatar: this.banners[0].url, useCollectionPic: true }).then(res => {
                this.$toast.success('设置成功');
            });
        }
    }
};
</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;
        overflow: hidden;
        .detail-animate();
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            /deep/ .van-image {
                border: 2px solid #2f2f2f;
                border-radius: @radius;
                overflow: hidden;
                background-color: @bg;
            }
        }
    }
}

.swiper-video {
    border: 2px solid #2f2f2f;
    border-radius: @radius;
    width: calc(100vw - 134px);
    height: calc(100vw - 134px);
    display: block;
    overflow: hidden;
}

.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;
    }
}

.video-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    .flex();
    justify-content: center;

    .van-icon {
        color: rgba(0, 0, 0, 0.5) !important;
    }
}

.setAvatar {
    .flex();
    img {
        width: 24px;
        height: 24px;
        display: block;
    }

    span {
        font-size: 12px;
        color: #949699;
        line-height: 24px;
        margin-left: 3px;
    }
}
</style>
