<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 class="content2">
                    <el-collapse v-model="activeNames1" :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>
                </div>
            </div>
            <div class="top-info">
                <div class="title">
                    <div class="title1">{{ info.name }}</div>
                    <div class="text">
                        <el-popover placement="bottom" popper-class="share-popver" trigger="hover">
                            <div class="text1" slot="reference">
                                <img class="img1" src="../assets/img/fenxiang-icon@3x.png" alt="" />
                                <div class="text2">分享</div>
                            </div>

                            <share :info="info" pageType="assetDetail"> </share>
                        </el-popover>
                    </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>
                    <div class="name">
                        <img class="name1" :src="userInfo.avatar" alt="" />
                        <div>
                            <div class="name2">{{ userInfo.nickname }}</div>
                            <div class="name3">持有者</div>
                        </div>
                        <img class="name4" src="../assets/img/icon_inter@3x (4).png" alt="" />
                    </div>
                </div>
                <div class="time">
                    <div class="time1">卖家定价</div>
                </div>
                <div class="price">
                    <div class="price1" v-if="info.consignment">
                        <div class="price2">价格</div>
                        <img class="price3" src="../assets/img/icon_jiage@3x.png" alt="" />
                        <div class="price4">{{ info.sellPrice || 0 }}</div>
                        <div class="price2" v-if="info.royalties">
                            含<span>{{ info.royalties }}%</span>版税
                        </div>
                    </div>
                    <div class="status" v-else-if="info.status === 'NORMAL'">
                        商品{{ info.publicShow ? '仅展示' : '未展示' }}
                    </div>
                    <div class="status" v-else>
                        {{ getLabelName(info.status, assetStatusOptions) }}
                    </div>

                    <div class="price1 num" v-if="info.salable">
                        <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>

                    <div class="btn-content" v-if="info.status !== 'GIFTING' && info.status !== 'GIFTED'">
                        <div class="btn-list">
                            <div class="btn-item" @click="changeShow">
                                <i class="font_family icon-icon-gongkaizhanshi"></i>
                                <span>{{ info.publicShow ? '取消展示' : '公开展示' }}</span>
                            </div>
                            <div class="btn-item" @click="send">
                                <i class="font_family icon-icon-zengsong"></i>
                                <span>赠送好友</span>
                            </div>
                        </div>
                        <el-button @click="Consignment" class="buy" type="primary" size="default"
                            ><i class="font_family icon-icon-zhuanrang1"></i
                            ><span>{{ info.consignment ? '取消寄售' : '寄售上架' }}</span></el-button
                        >
                    </div>
                </div>
                <div class="init">
                    <div class="name">类型</div>
                    <div class="name name1">悄悄话<span>（灰色表示已使用）</span></div>
                    <div class="name name2">持有特权<span>（灰色表示已使用）</span></div>
                </div>
                <div class="init1">
                    <div class="name">{{ info.category || '暂无' }}</div>
                    <div class="bor"></div>
                    <div class="box" v-if="init2 != ''">
                        <div
                            v-if="init2"
                            @mouseenter="isShowPopover(init2.name, true)"
                            @mouseleave="isShowPopover(init2.name, false)"
                            style="position: relative; width: 24px; margin-left: 16px"
                        >
                            <img @click="Whisper" v-if="init2.opened" class="img" :src="init2.icon[2]" alt="" />
                            <img @click="Whisper" v-else class="img" :src="init2.icon[0]" alt="" />
                            <div class="hoverTips1" v-if="popoverStatus[init2.name]">
                                <p>{{ init2.description }}</p>
                            </div>
                        </div>
                        <div class="del" v-else>铸造者未设置</div>
                    </div>

                    <div class="bor"></div>
                    <!-- <div v-if="init"> -->
                    <div class="iconBox" v-if="init.length > 0">
                        <div v-for="(item, index) in init" :key="index">
                            <div
                                style="position: relative"
                                @mouseenter="isShowPopover(item.name, true)"
                                @mouseleave="isShowPopover(item.name, false)"
                            >
                                <div v-if="item.icon[2]">
                                    <!-- 只能点一次 -->
                                    <div v-if="item.once" @click="privilegeFn2(item)">
                                        <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
                                    </div>
                                    <!-- 多次点 -->
                                    <div v-else @click="privilegeFn(item)">
                                        <img v-if="item.opened" class="img2" :src="item.icon[2]" alt="" />
                                    </div>
                                    <div @click="privilegeFn(item)">
                                        <img v-if="!item.opened" class="img2" :src="item.icon[3]" alt="" />
                                    </div>
                                </div>
                                <!-- 新加特权 -->
                                <div @click="privilegeFn2(item)" v-else>
                                    <img class="img2" :src="item.icon[0]" alt="" />
                                </div>
                                <div class="hoverTips" v-if="popoverStatus[item.name]">
                                    <div class="span">{{ item.name }}</div>
                                    <p>{{ item.description }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="del" v-else>铸造者未设置</div>
                    <!-- </div> -->
                </div>
                <div style="margin-top: 30px" 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="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>
                <div v-if="tableData.length != 0">
                    <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%; background: #1c1e26">
                            <el-table-column prop="fromUser" label="用户" width="555"> </el-table-column>
                            <el-table-column prop="operation" label="操作" width="455"> </el-table-column>
                            <el-table-column prop="createdAt" label="时间"> </el-table-column>
                        </el-table>
                    </el-collapse-item>
                </div>
            </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>
        <!-- 悄悄话 -->
        <el-dialog append-to-body class="abb" :visible.sync="show2">
            <div class="title">提示</div>
            <img class="back" src="../assets/矩形@3x.png" alt="" />
            <div class="con">
                <img
                    @click="openedFn"
                    class="imgBox"
                    src="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/image/2021-11-12-16-13-07DtWLMcPy.png"
                    alt=""
                />
                <div class="Whisper1">点击图标打开悄悄话</div>
                <div class="Whisper1 Whisper2">（隐藏内容，只能开启一次）</div>
            </div>
        </el-dialog>
        <!-- 悄悄话 -->
        <el-dialog append-to-body v-if="init2" :visible.sync="show3" :before-close="handleClose2">
            <div class="title2">
                <img class="img" v-if="init2.icon" :src="init2.icon[1]" alt="" />
                <div class="title3">悄悄话</div>
            </div>
            <div class="border"></div>
            <div class="name">藏有创作者填写的隐藏内容，持有者才能打开</div>
            <div class="name1">
                说明：<span>{{ init2.remark || '暂无' }}</span>
            </div>
            <div v-if="init2.openTime" class="timename"><span class="time">开启时间：</span>{{ init2.openTime }}</div>
        </el-dialog>
        <!-- 其余三个 -->
        <el-dialog append-to-body :visible.sync="show4" :before-close="handleClose">
            <div class="title2">
                <div class="title3">{{ list2.name }}</div>
            </div>
            <div class="border"></div>
            <div class="name">{{ list2.description }}</div>
            <div class="name1" v-if="list2.type != 'code' && list2.name != '版权权利'">
                <img class="qrcodeImg" v-if="list2.type == 'qrcode'" :src="list2.detail" alt="" />
                <div class="qrcode1" v-if="list2.type == 'qrcode'">扫描二维码进行票务核销</div>
                说明：<span>{{ list2.remark || '暂无' }}</span>
            </div>
            <div v-if="list2.type == 'code'">
                <div class="copy">
                    <div class="id">
                        {{ list2.id }}
                    </div>
                    <img class="copyImg" @click="copy" src="../assets/user/copy_icon@3x (1).png" alt="" />
                </div>
                <span class="span">说明：</span> <span>{{ list2.remark || '暂无' }}</span>
                <div class="border"></div>
                <div class="code">每次交易都会产生校验码</div>
            </div>
            <div v-if="list2.openTime">
                <div v-if="list2.type == 'qrcode'" class="timename">
                    <span class="time">截止时间：</span>{{ list2.openTime }}
                </div>
                <div v-else class="timename"><span class="time">打开时间：</span>{{ list2.openTime }}</div>
            </div>
        </el-dialog>

        <send ref="send"></send>
        <consignment-info @getDetail="getDetail" ref="refFn"></consignment-info>
    </div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import ConsignmentInfo from '../components/ConsignmentInfo';
import asset from '../mixins/asset';
import product from '../mixins/product';
import 'swiper/css/swiper.css';
import CollectionInfo from '../components/CollectionInfo.vue';
import { mapState } from 'vuex';
import Send from './Send.vue';
import Share from '../components/Share.vue';
export default {
    components: { Swiper, SwiperSlide, CollectionInfo, Send, Share, ConsignmentInfo },
    mixins: [asset, product],
    data() {
        return {
            popoverStatus: {
                悄悄话: false,
                版权权利: false,
                加密空间: false,
                票务: false,
                兑换锁链: false,
                铸造: false
            },
            show: false,
            show2: false,
            show3: false,
            show4: false,
            tableData: [],
            info: {},
            blindBoxItems: [],
            swiperOptions: {},
            activeNames: ['2', '3'],
            activeNames1: ['1'],
            relateds: [],
            boxOptions: { slidesPerView: 4, spaceBetween: 24, autoplay: true },
            loading: true,
            list: [],
            init: [],
            init2: [],
            list2: [],
            opened: '',
            lists: ''
        };
    },
    computed: {
        ...mapState(['userInfo']),
        banners() {
            return this.info.pic || [];
        },
        properties() {
            return this.info.properties || [];
        },
        privileges() {
            return this.info.privileges || [];
        },
        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.pic));
            });
        }
    },
    mounted() {
        this.getDetail();
        setTimeout(() => {
            this.record();
        }, 1000);
        if (this.userInfo.authStatus !== 'NOT_AUTH') {
            this.add();
        }
    },
    watch: {
        $route() {
            this.getDetail();
        }
    },
    methods: {
        isShowPopover(type, flag) {
            for (let key in this.popoverStatus) {
                if (type === key) {
                    this.popoverStatus[key] = flag;
                }
            }
        },
        copy() {
            this.$copyText(this.list2.id).then(
                e => {
                    this.$message.success('复制成功');
                },
                e => {
                    this.$message.warning('复制失败');
                }
            );
        },
        handleClose2() {
            this.show3 = false;
            this.getDetail();
        },
        handleClose() {
            this.show4 = false;
            this.getDetail();
        },
        Whisper() {
            if (!this.init2.once) {
                this.show2 = true;
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: this.init2.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        privilegeFn(init) {
            // console.log(111);
            this.list2 = init;
            this.show4 = true;
            this.$http
                .post('/asset/usePrivilege', {
                    assetId: this.info.id,
                    privilegeId: init.id
                })
                .then(res => {
                    console.log(res);
                });
        },
        privilegeFn2(init) {
            // console.log(222);
            // this.list2 = init;
            // this.show4 = true;
            if (init.once && init.opened == false) {
                this.list2 = init;
                this.show4 = true;
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: init.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        openedFn() {
            this.show2 = false;
            this.show3 = true;
            if (!this.init2.once) {
                this.$http
                    .post('/asset/usePrivilege', {
                        assetId: this.info.id,
                        privilegeId: this.init2.id
                    })
                    .then(res => {
                        console.log(res);
                    });
            }
        },
        record() {
            this.$http
                .get('/asset/tokenHistory', {
                    tokenId: this.info.tokenId,
                    assetId: this.info.id
                })
                .then(res => {
                    this.tableData = res;
                    console.log(this.tableData);
                });
        },
        getDetail() {
            this.$http.get('/asset/get/' + this.$route.query.id).then(res => {
                this.info = res;
                if (res.privileges) {
                    this.init2 = res.privileges.find(item => {
                        return item.name === '悄悄话';
                    });
                }
                if (res.privileges) {
                    this.init = res.privileges.filter(item => {
                        return item.name !== '悄悄话';
                    });
                }
                this.loading = false;
                this.getTime(res.startTime);
                this.getRelated(res.ownerId);
            });
        },
        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;
                });
        },
        appointment() {
            this.$http
                .post('/collection/appointment?id=' + this.info.id)
                .then(res => {
                    this.getDetail();
                    this.$message.success('预约成功');
                })
                .catch(e => {
                    if (e.error) {
                        this.$message.warning(e.error);
                    }
                });
        },
        Consignment() {
            if (this.userInfo.authStatus === 'SUCCESS') {
                if (!this.info.consignment) {
                    this.$refs.refFn.isShow = true;
                } else {
                    this.$confirm('寄售将取消上架', '取消寄售', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        customClass: 'myClass',
                        center: true
                    })
                        .then(() => {
                            return this.$http.post(`/asset/cancelConsignment?id=${this.info.id}`);
                        })
                        .then(res => {
                            this.$message.success('取消寄售');
                            setTimeout(() => {
                                this.getDetail();
                            }, 1000);
                        });
                }
            } else if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                this.$confirm('用户认证中，是否查看认证状态', '认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.add();
                    this.$nextTick(() => {
                        // console.log(this.lists);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == false) {
                                this.add();
                                this.$router.push('/userauthentication');
                            }
                        }, 1000);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == true) {
                                this.add();
                                this.$router.push('/enterpriseauthentication');
                            }
                        }, 1000);
                    });
                });
            } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                this.$confirm('未认证不可寄售，是否认证', '认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.$router.push('/authentication');
                });
            }
        },
        changeShow() {
            if (!this.info.publicShow) {
                // console.log(this.info);
                this.$confirm('藏品将公开展示，无报价', '公开展示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.$http
                        .post(`/asset/publicShow?id=${this.info.id}`)
                        .then(res => {
                            this.getDetail();
                            this.$message.success('展示成功');
                        })
                        .catch(e => {
                            this.$message.warning(e.error);
                        });
                });
            } else {
                this.$confirm('藏品将取消展示', '取消展示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                })
                    .then(() => {
                        return this.$http.post(`/asset/cancelPublic?id=${this.info.id}`);
                    })
                    .then(res => {
                        this.getDetail();
                        this.$message.success('取消成功');
                    });
            }
        },
        add() {
            this.$http
                .post(
                    '/identityAuth/all',
                    {
                        query: {
                            userId: this.userInfo.id
                        },
                        sort: 'createdAt,desc',
                        size: 1,
                        page: 0
                    },
                    {
                        body: 'json'
                    }
                )
                .then(res => {
                    // console.log(res);
                    this.lists = res.content[0].org;
                    // console.log(this.lists);
                });
        },
        send() {
            if (this.userInfo.authStatus === 'SUCCESS') {
                this.$refs.send.show = true;
                this.$refs.send.init();
            } else if (this.userInfo.authStatus === 'PENDING' || this.userInfo.authStatus === 'FAIL') {
                this.$confirm('用户认证中，是否查看认证状态', '认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.add();
                    this.$nextTick(() => {
                        // console.log(this.lists);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == false) {
                                this.add();
                                this.$router.push('/userauthentication');
                            }
                        }, 1000);
                        setTimeout(() => {
                            if (this.userInfo.authStatus !== 'NOT_AUTH' && this.lists == true) {
                                this.add();
                                this.$router.push('/enterpriseauthentication');
                            }
                        }, 1000);
                    });
                });
            } else if (this.userInfo.authStatus === 'NOT_AUTH') {
                this.$confirm('未认证不可转增，是否认证', '认证', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    customClass: 'myClass',
                    center: true
                }).then(() => {
                    this.$router.push('/authentication');
                });
            }
        }
    }
};
</script>
<style lang="less">
.myClass {
    .el-button {
        background: linear-gradient(133deg, @prim 0%, @warn 100%);
        border-radius: 4px;
        border: 0;
    }
    .el-button:nth-last-child(2) {
        background: #c4c7cc;
        color: #ffffff;
        font-size: 13px;
    }
}
</style>

<style lang="less" scoped>
/deep/ .el-dialog__body {
    padding: 0 16px 12px !important;
}
/deep/ .el-table__header-wrapper {
    border-bottom: 0;
}
/deep/ .el-dialog {
    width: 340px;
    background: #ffffff;
    border-radius: 10px;

    .title2 {
        display: flex;
        align-items: center;
        margin-top: -13px;
        .img {
            width: 18px;
            height: 18px;
            color: #ff4f50;
            margin-right: 3px;
            margin-bottom: 5px;
            .img:hover {
                background: red;
            }
        }
        .title3 {
            font-size: 16px;
            font-weight: 400;
            color: #ff4f50;
            line-height: 24px;
        }
    }
    .border {
        height: 1px;
        background: #f2f3f5;
        border-radius: 1px;
        margin: 12px 0 6px;
    }
    .name1 {
        width: 288px;
        padding: 10px;
        background: #f5f7fa;
        border-radius: 4px;
        color: #939599;
        margin-bottom: 11px;
        .qrcodeImg {
            width: 93px;
            height: 93px;
            border-radius: 11px;
            margin-left: 98px;
        }
        .qrcode1 {
            font-size: 12px;
            font-weight: 400;
            color: #939599;
            line-height: 18px;
            margin: 12px 0px 12px 78px;
        }
    }
    .timename {
        color: #ff4f50;
        font-size: 12px;
        padding-bottom: 12px;
    }
    .time {
        color: #939599;
        font-size: 12px;
    }
    .copy {
        width: 300px;
        height: 42px;
        background: #f5f7fa;
        border-radius: 24px;
        margin-bottom: 16px;
        justify-content: center;
        display: flex;
        align-items: center;
        .id {
            font-size: 16px;
            color: #303133;
        }
        .copyImg {
            width: 18px;
            height: 18px;
            margin-left: 6px;
            cursor: pointer;
        }
    }
    span {
        color: #303133;
    }
    .span {
        color: #939599;
    }
    .code {
        font-size: 12px;
        font-weight: 400;
        color: #939599;
        line-height: 18px;
        padding-bottom: 12px;
    }
    .name {
        font-size: 12px;
        font-weight: 400;
        color: #939599;
        line-height: 18px;
        margin-bottom: 6px;
    }
}
.abb {
    /deep/.el-dialog__close {
        color: #ffffff;
    }
    /deep/ .el-dialog {
        width: 340px;
        border-radius: 10px;
        .title {
            position: absolute;
            z-index: 22;
            font-size: 16px;
            margin-top: -13px;
            color: #000000;
            line-height: 24px;
        }
        .back {
            width: 340px;
            height: 240px;
            margin: -30px -13px -15px -16px;
        }
        .con {
            position: absolute;
            margin-top: -200px;
            .imgBox {
                width: 80px;
                height: 80px;
                cursor: pointer;
                text-align: center;
                margin: 30px 112px 22px;
            }
            .Whisper1 {
                font-size: 12px;
                color: #303133;
                line-height: 18px;
                margin: 0 97px;
                &.Whisper2 {
                    padding-bottom: 36px;
                    margin: 0 73px;
                }
            }
        }
    }
}
.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;
        }
        .init {
            background: #1c1e26;
            border-radius: 8px 8px 0px 0px;
            display: flex;
            align-items: center;
            .name {
                font-size: 18px;
                font-weight: bold;
                color: #ffffff;
                line-height: 28px;
                margin: 0 !important;
                padding-left: 16px;
                width: 130px;
                &.name1 {
                    width: 220px;
                }
                &.name2 {
                    width: 313px;
                    padding-left: 0;
                }
            }
            span {
                font-size: 14px;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
            }
            .img {
                width: 24px;
                height: 24px;
                cursor: pointer;
            }
        }
        .init1 {
            display: flex;
            align-items: center;
            height: 102px;
            background: #1f2230;
            border-radius: 0px 0px 8px 8px;
            .name {
                font-size: 14px;
                width: 123px;
                font-weight: 400;
                color: #ffffff;
                line-height: 24px;
                padding-left: 16px;
                margin-right: 0;
            }
            .bor {
                width: 1px;
                height: 62px;
                background: #2b2e3e;
                border-radius: 1px;
            }
            .box {
                width: 218px;
            }
            .del {
                font-size: 14px;
                width: 220px;
                font-weight: 400;
                color: #939599;
                line-height: 24px;
                padding-left: 22px;
            }
            .img {
                width: 24px;
                height: 24px;
                padding-left: 2px;
                cursor: pointer;
            }
            .iconBox {
                margin-left: -20px;
                display: flex;
                align-items: center;
                .img2 {
                    width: 24px;
                    height: 24px;
                    padding-left: 38px;
                    cursor: pointer;
                }
            }
            .hoverTips {
                position: absolute;
                width: 188px;
                background: #fff;
                border-radius: 4px;
                top: 40px;
                left: 30px;
                .span {
                    font-size: 16px;
                    color: #000000;
                    line-height: 24px;
                    text-align: center;
                    padding-top: 12px;
                }
                p {
                    padding: 12px 16px;
                    font-size: 14px;
                    color: #939599;
                    line-height: 24px;
                }
            }
            .hoverTips::before {
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 10px solid #fff;
                content: '';
                display: block;
                position: absolute;
                left: 12px; //给小三角定位，更具实际需求调整
                top: -10px; //给小三角定位，更具实际需求调整
            }
            .hoverTips1 {
                position: absolute;
                width: 188px;
                background: #fff;
                border-radius: 4px;
                top: 40px;
                left: -4px;
                p {
                    padding: 12px 16px;
                    font-size: 14px;
                    color: #939599;
                    line-height: 24px;
                }
            }
            .hoverTips1::before {
                width: 0;
                height: 0;
                border-left: 7px solid transparent;
                border-right: 7px solid transparent;
                border-bottom: 10px solid #fff;
                content: '';
                display: block;
                position: absolute;
                left: 12px; //给小三角定位，更具实际需求调整
                top: -10px; //给小三角定位，更具实际需求调整
            }
        }
        .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;
            }
        }
        .content2 {
            .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: #2b2e3e;
                border-radius: 1px;
                margin: 0 16px;
            }
            .info4 {
                color: #fff;
                padding: 16px;
                .text1 {
                    width: 400px;
                    overflow: hidden;
                    white-space: nowrap !important;
                    text-overflow: ellipsis !important;
                }
            }
        }
        .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: @prim;
                line-height: 24px;
                margin-left: 6px;
            }
        }
        .price {
            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: @prim;
                    line-height: 36px;
                    margin-right: 5px;
                }
                span {
                    font-size: 16px;
                    font-weight: 400;
                    color: @prim;
                    line-height: 24px;
                }
            }
            .btn {
                height: 52px;
                line-height: 52px;
                text-align: center;
                background: linear-gradient(135deg, @prim 0%, @warn 100%);
                border-radius: 8px;
            }
        }
        .card {
            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;
                .line();
                .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 {
        /deep/ .el-table__row {
            color: #ffffff;
        }
        /deep/ .el-table td,
        .el-table th.is-leaf {
            border-bottom: 1px solid #2b2e3e;
        }
        /deep/ .el-table th.is-leaf {
            border-bottom: 1px solid #2b2e3e;
        }
        .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;
        width: 458px !important;
        height: 458px !important;
        border-radius: 8px !important;
        margin-left: 1px;
        img {
            display: block;
        }
    }
}
.buy {
    width: 100%;
    display: block;
    height: 52px;
    background: linear-gradient(135deg, @prim 0%, @warn 100%);
    border-radius: 8px;
    border-width: 0;
    color: #000;
    margin-top: 30px;
    &:hover {
        background: linear-gradient(135deg, darken(@prim, 10%), darken(@warn, 10%));
    }

    &.used {
        background: linear-gradient(135deg, darken(@prim, 50%), darken(@warn, 50%));
        color: #939599;
    }
    i {
        font-size: 24px;
    }
    span {
        font-size: 20px;
        margin-left: 16px;
    }
}

/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;
            }
        }
    }
}
/deep/.content2 {
    margin-top: 30px;
    .el-collapse-item__wrap {
        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;
        height: 100px !important;
    }
    .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;

    .collect {
        margin: 16px;
    }
}

.status {
    font-size: 26px;
    color: #fdfb60;
    line-height: 36px;
    padding: 20px 0 16px;
}

/deep/.boxs {
    .el-image {
        width: 100%;
        height: 310px;
        border-radius: 12px;
    }
}
.btn-content {
    padding: 20px 0;
    border-top: 1px solid #2b2e3e;
}

.btn-list {
    .flex();

    .btn-item {
        .line();
        color: #fff;
        flex-grow: 1;
        line-height: 52px;
        text-align: center;
        span {
            font-size: 20px;
            vertical-align: middle;
        }
        i {
            font-size: 24px;
            margin-right: 16px;
            vertical-align: middle;
        }

        &:hover {
            &::before {
                background-color: fade(#1c1e26, 90%);
            }
        }
    }
    .btn-item + .btn-item {
        margin-left: 30px;
    }
}
</style>
