<template>
    <div class="container center-content">
        <div class="top" v-loading="loading">
            <div class="top-left">
                <swiper class="mySwiper imgBox" ref="mySwiper" :options="swiperOptions">
                    <swiper-slide v-for="(item, index) in banners" :key="index">
                        <video
                            class="swiper-video"
                            v-if="isVideo(item)"
                            :src="item.url"
                            :poster="getImg(changeImgs([item]), '', 800)"
                            controls="controls"
                        >
                            您的浏览器不支持 video 标签。
                        </video>
                        <el-image
                            v-else
                            :src="getImg(item.url, '', 800)"
                            :preview-src-list="bannerList"
                            style="width: 460px; height: 460px"
                            fit="scale-down"
                        />
                    </swiper-slide>
                </swiper>
                <div class="works">
                    <img class="works1" src="../assets/img/icon-quanyibaohu@3x.png" alt="" />
                    <div class="works2">该作品已在保存至区块链并进行权益保护</div>
                </div>
            </div>
            <div class="top-info">
                <div class="title">
                    <div class="title1">{{ info.name }}</div>
                    <div class="text">
                        <like-button size="large" :isLike="info.liked" @like="likeProduct">
                            {{ info.likes }}
                        </like-button>
                        <div class="text1">
                            <img class="img1" src="../assets/img/fenxiang-icon@3x.png" alt="" />
                            <div class="text2">分享</div>
                        </div>
                    </div>
                </div>
                <div class="name-list">
                    <router-link :to="{ path: '/castingDetail', query: { id: info.minterId } }" class="name">
                        <img class="name1" :src="info.minterAvatar" alt="" />
                        <div>
                            <div class="name2">{{ info.minter }}</div>
                            <div class="name3">铸造者</div>
                        </div>
                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                    </router-link>
                    <router-link :to="{ path: '/castingDetail', query: { id: info.ownerId } }" class="name">
                        <img class="name1" :src="info.ownerAvatar" alt="" />
                        <div>
                            <div class="name2">{{ info.owner }}</div>
                            <div class="name3">持有者</div>
                        </div>
                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                    </router-link>
                </div>
                <div class="time" v-if="info.salable">
                    <div class="time1">卖家定价</div>
                    <div class="time2" v-if="info.startTime">
                        首发抢购倒计时<span>{{ startTime }}</span>
                    </div>
                </div>
                <div class="price" v-if="info.salable">
                    <div class="price1">
                        <div class="price2">价格</div>
                        <img class="price3" src="../assets/img/icon_jiage@3x.png" alt="" />
                        <div class="price4">{{ info.price }}</div>
                        <div class="price2" v-if="info.royalties">
                            含<span>{{ info.royalties }}%</span>版税
                        </div>
                    </div>
                    <div class="price1 num">
                        <div class="num1">
                            <div class="price2 num2">数量</div>
                            <span class="span">{{ info.total }}</span>
                        </div>
                        <div class="price2 num2">已售 {{ info.sale }} / 剩余 {{ info.stock }}</div>
                    </div>
                    <el-button class="buy" v-if="info.startTime" type="primary" size="default">一键预约</el-button>

                    <el-button class="buy" v-else-if="isBuy" type="primary" size="default">立即购买</el-button>
                </div>
                <div v-if="properties.length > 0">
                    <div class="time">
                        <div class="time1">商品特性</div>
                    </div>
                    <div class="card">
                        <div class="box1" v-for="(item, index) in properties" :key="index">
                            <div class="box2">{{ item.name }}</div>
                            <div class="box3">{{ item.value }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content" v-loading="loading">
            <el-collapse v-model="activeNames" :accordion="false">
                <el-collapse-item name="1" v-if="info.tokenId">
                    <template slot="title">
                        <img class="imgs" src="../assets/icon-lianshangxinxi.png" alt="" />
                        <span>链上信息</span>
                    </template>
                    <div class="info4">
                        <div class="text1">Hash地址：{{ info.txHash }}</div>
                        <div class="text1">区块高度： {{ info.blockNumber }}</div>
                        <div class="text1">令牌ID： {{ info.tokenId }}</div>
                    </div>
                </el-collapse-item>

                <el-collapse-item name="2">
                    <template slot="title">
                        <img class="imgs" src="../assets/icon-miaoshu.png" alt="" />
                        <span>作品描述</span>
                    </template>
                    <div class="info4">
                        <swiper class="boxs" :options="boxOptions">
                            <swiper-slide v-for="(item, index) in boxs" :key="index">
                                <el-image :src="item" :preview-src-list="boxs" fit="scale-down" />
                            </swiper-slide>
                        </swiper>
                        <div v-html="info.detail"></div>
                    </div>
                </el-collapse-item>

                <!-- <el-collapse-item name="3">
                    <template slot="title">
                        <img class="imgs" src="../assets/info_icon_jiaoyijilu.png" alt="" />
                        <span>交易历史</span>
                    </template>
                    <el-table :data="tableData" stripe style="width: 100%">
                        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
                        <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
                        <el-table-column prop="address" label="地址"> </el-table-column>
                    </el-table>
                </el-collapse-item> -->
            </el-collapse>
        </div>
        <div class="nft" v-if="relateds.length > 0">
            <div class="nft1">
                <img class="nft2" :src="info.minterAvatar" alt="" />
                <div class="nft3">{{ info.minter }}</div>
            </div>
            <div class="nft4">来自创作者的NFT</div>
            <router-link class="nft1" :to="{ path: '/castingDetail', query: { id: info.minterId } }">
                <div class="nft5">查看更多</div>
                <img class="nft6" src="../assets/img/icon_inter@3x (4).png" alt="" />
            </router-link>
        </div>
        <div class="list" v-loading="loading" v-if="relateds.length > 0">
            <collection-info v-for="(item, index) in relateds" :key="item.id" :info.sync="relateds[index]">
            </collection-info>
        </div>

        <submit></submit>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import product from '../mixins/product';
import 'swiper/css/swiper.css';
import LikeButton from '../components/LikeButton.vue';
import CollectionInfo from '../components/CollectionInfo.vue';
import Submit from './Submit.vue';
export default {
    components: { Swiper, SwiperSlide, LikeButton, CollectionInfo, Submit },
    mixins: [product],
    data() {
        return {
            showMore: false,
            showMore1: false,
            showMore2: false,
            tableData: [],
            info: {},
            blindBoxItems: [],
            swiperOptions: {},
            activeNames: ['2', '3'],
            relateds: [],
            boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
            loading: true
        };
    },
    computed: {
        banners() {
            return this.info.pics || [];
        },
        properties() {
            return this.info.properties || [];
        },
        isBuy() {
            return this.info.stock && this.info.onShelf && this.info.salable;
        },
        boxs() {
            let list = [...this.blindBoxItems];
            return list.map(item => {
                return this.getImg(this.changeImgs(item.pics));
            });
        }
    },
    mounted() {
        this.getDetail();
    },
    watch: {
        $route() {
            this.getDetail();
        }
    },
    methods: {
        getDetail() {
            this.$http
                .get('/collection/get/' + this.$route.query.id)
                .then(res => {
                    this.info = res;
                    this.loading = false;
                    this.getTime(res.startTime);
                    this.getRelated(res.ownerId);
                    if (res.type === 'BLIND_BOX') {
                        return this.$http.post(
                            '/blindBoxItem/all',
                            {
                                query: {
                                    blindBoxId: res.id
                                }
                            },
                            { body: 'json' }
                        );
                    } else {
                        return Promise.resolve();
                    }
                })
                .then(res => {
                    if (res) {
                        this.blindBoxItems = res.content;
                    } else {
                        this.blindBoxItems = [];
                    }
                });
        },
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.getDetail();
                    this.$message.success('收藏成功');
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.getDetail();
                    this.$message.success('取消收藏');
                });
            }
        },
        getRelated(id) {
            this.$http
                .post(
                    '/collection/all',
                    {
                        query: {
                            del: false,
                            ownerId: id
                        },
                        size: 5,
                        sort: 'createdAt,desc'
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    let list = [];
                    res.content.forEach(item => {
                        if (item.id !== this.info.id && list.length < 4) {
                            list.push(item);
                        }
                    });
                    this.relateds = list;
                });
        }
    }
};
</script>
<style lang="less" scoped>
.container {
    padding: 50px 50px 200px;
    background: #1a1a1a;
    .top {
        display: flex;

        .top-left {
            width: 460px;
            flex-shrink: 0;
        }

        .top-info {
            flex-grow: 1;
            margin-left: 30px;
        }

        .works {
            display: flex;
            align-items: center;
            height: 68px;
            background: #1c1e26;
            border-radius: 8px;
            margin-top: 30px;
            .works1 {
                width: 24px;
                height: 24px;
                margin: 2px 10px 0 16px;
            }
            .works2 {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
            }
        }
        .title {
            display: flex;
            margin-top: 10px;
            padding-right: 100px;
            position: relative;
            .title1 {
                font-size: 26px;
                font-weight: bold;
                color: #ffffff;
                .ellipsis();
            }
            .text {
                position: absolute;
                right: 24px;
                top: -10px;
                display: flex;
                .text1 {
                    text-align: center;
                    margin-left: 16px;
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    flex-direction: column;
                    .img1 {
                        width: 24px;
                        height: 24px;
                        display: block;
                    }
                    .text2 {
                        font-size: 16px;
                        font-weight: 400;
                        color: #949699;
                        line-height: 24px;
                        margin-top: 4px;
                    }
                }
            }
        }
        .name-list {
            display: flex;
            padding: 12px 0;
        }
        .name {
            display: flex;
            align-items: center;
            height: 64px;
            line-height: 64px;
            cursor: pointer;
            margin-right: 80px;

            .name1 {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                margin-right: 12px;
            }
            .name2 {
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .name3 {
                font-size: 12px;
                font-weight: 400;
                color: #939599;
                line-height: 22px;
            }
            .name4 {
                width: 24px;
                height: 24px;
                margin-left: 16px;
            }
        }
        .time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #1c1e26;
            border-radius: 8px 8px 0px 0px;
            // width: 678px;
            height: 56px;
            padding: 0 16px;
            .time1 {
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                line-height: 24px;
            }
            .time2 {
                font-size: 16px;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
            }
            span {
                font-size: 16px;
                font-weight: 400;
                color: #00ffcb;
                line-height: 24px;
                margin-left: 6px;
            }
        }
        .price {
            // width: 678px;
            // height: 220px;
            padding: 0 16px;
            background: #1f2230;
            border-radius: 0px 0px 8px 8px;
            margin-bottom: 30px;
            .price1 {
                display: flex;
                padding: 18px 0 24px 0;
                border-bottom: 1px solid #494a4d;
                &.num {
                    justify-content: space-between;
                    border-bottom: 0;
                }
                .num1 {
                    display: flex;
                    align-items: center;
                }
                .span {
                    font-size: 14px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 22px;
                    margin-left: 16px;
                }
                .price2 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #939599;
                    line-height: 24px;
                    padding-top: 12px;
                    &.num2 {
                        padding-top: 0;
                    }
                }
                .price3 {
                    width: 10px;
                    height: 11px;
                    margin: 18px 0 0 10px;
                }
                .price4 {
                    font-size: 40px;
                    font-weight: normal;
                    color: #00ffcb;
                    line-height: 36px;
                    margin-right: 5px;
                }
                span {
                    font-size: 16px;
                    font-weight: 400;
                    color: #00ffcb;
                    line-height: 24px;
                }
            }
            .btn {
                height: 52px;
                line-height: 52px;
                text-align: center;
                background: linear-gradient(135deg, #00ffcb 0%, #006eff 100%);
                border-radius: 8px;
            }
        }
        .card {
            // width: 590px;
            height: 112px;
            border-radius: 0px 0px 8px 8px;
            background: #1f2230;
            padding: 0 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .box1 {
                width: 120px;
                height: 62px;
                text-align: center;
                border-radius: 4px;
                border: 1px solid;
                border-image: linear-gradient(135deg, rgba(0, 255, 203, 1), rgba(0, 110, 255, 1)) 1 1;
                .box2 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #939599;
                    line-height: 24px;
                    margin-top: 5px;
                }
                .box3 {
                    font-size: 14px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                }
            }
        }
    }
    .content {
        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            background: #1c1e26;
            &.rad {
                border-radius: 8px 8px 0px 0px;
                margin-top: 30px;
            }
            .info1 {
                display: flex;
                align-items: center;
                height: 68px;
                .imgs {
                    width: 24px;
                    height: 24px;
                    margin-right: 10px;
                }
                .info2 {
                    font-size: 16px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 24px;
                }
            }

            .info3 {
                width: 24px;
                height: 24px;
            }
        }
        .border {
            height: 1px;
            background: #494a4d;
            border-radius: 1px;
            margin: 0 16px;
        }
        .info4 {
            color: #fff;
            padding: 16px;
        }
    }
    .nft {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 50px 0 27px;
        .nft1 {
            display: flex;
            align-items: center;
            .nft2 {
                width: 38px;
                height: 38px;
                border-radius: 50%;
                margin-right: 12px;
            }
            .nft3 {
                font-size: 16px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
            }
            .nft5 {
                font-size: 13px;
                font-weight: 400;
                color: #939599;
                line-height: 18px;
                margin-top: 2px;
            }
            .nft6 {
                width: 24px;
                height: 24px;
            }
        }
        .nft4 {
            font-size: 18px;
            font-weight: bold;
            color: #ffffff;
            line-height: 30px;
        }
    }
}
.mySwiper {
    width: 462px;
    display: inline-block;
    .line();
    /deep/.el-image {
        display: block;
        img {
            display: block;
        }
    }
}
.buy {
    width: 100%;
    display: block;
    height: 52px;
    background: linear-gradient(135deg, #00ffcb 0%, #006eff 100%);
    border-radius: 8px;
    border-width: 0;
    color: #000;
    &:hover {
        background: linear-gradient(135deg, darken(#00ffcb, 10%), darken(#006eff, 10%));
    }
}

/deep/.content {
    margin-top: 30px;
    .el-collapse-item__wrap {
        // border-bottom: 1px solid #494a4d;
        border-bottom-width: 0;
    }
    .el-collapse {
        border-width: 0;
    }

    .el-collapse-item__header {
        background-color: #1c1e26;
        padding-left: 16px;
        height: 68px;
        border-bottom-width: 0;
        img {
            width: 24px;
            height: 24px;
            margin-right: 10px;
        }
        font-size: 16px;
        color: #ffffff;
        line-height: 24px;
    }
    .el-collapse-item__content {
        background-color: #1f2230;
    }
    .el-table {
        background-color: transparent;
        padding: 0 16px;
        tr {
            background-color: transparent;
        }
        th {
            background-color: transparent;
        }
        &::before {
            content: none;
        }
    }

    .el-collapse-item {
        &:last-child {
            .el-collapse-item__wrap {
                border-width: 0;
            }
        }
    }
}
.list {
    margin: -16px;

    .content {
        margin: 16px;
    }
}

/deep/.boxs {
    .el-image {
        width: 100%;
        height: 310px;
        border-radius: 12px;
    }
}
</style>
