<template>
    <div class="information_on_the_chain_con">链上信息</div>
    <div v-if="info.txHash">
        <div class="information_on_the_chain">
            <span class="information_on_the_chain_title">Hash地址</span>
            <div class="information_on_the_chain_content_con">
                <div class="information_on_the_chain_content">
                    {{ getShort(info.txHash) }}
                </div>
                <img
                    @click="copy(info.txHash)"
                    src="@assets/copy_icon.png"
                    alt=""
                    class="information_on_the_chain_content_img"
                />
            </div>
        </div>
        <div class="information_on_the_chain">
            <span class="information_on_the_chain_title">区块高度</span>
            <span class="information_on_the_chain_number">{{ info.blockNumber }}</span>
        </div>
        <div class="information_on_the_chain">
            <span class="information_on_the_chain_title">令牌ID</span>
            <div class="information_on_the_chain_content_con">
                <div class="information_on_the_chain_content">
                    {{ getShort(info.tokenId) }}
                </div>
                <img
                    @click="copy(info.txHash)"
                    src="@assets/copy_icon.png"
                    alt=""
                    class="information_on_the_chain_content_img"
                />
            </div>
        </div>
    </div>
    <div v-else class="hold_privileges_name">铸造者暂时未设置</div>
    <!-- <van-collapse-item name="hashCode" class="goods-info">
        <template #title>
            <div class="page-title"><img src="@assets/icon-lianshangxinxi(3).png" alt="" />链上信息</div>
        </template>
        <div class="page-text">
            <div class="text-info">
                <span class="text1">Hash地址：</span>
                <span class="flex1"></span>
                <img @click="copy(info.txHash)" src="@assets/svgs/copy_icon.svg" alt="" />
                <span class="van-ellipsis"></span>
            </div>
            <div class="text-info">
                <span class="text1">区块高度： </span>
                <span class="flex1"></span>
                <span>{{ info.blockNumber }}</span>
            </div>
            <div class="text-info">
                <span class="text1">令牌ID： </span>
                <span class="flex1"></span>
                <img @click="copy(info.tokenId)" src="@assets/svgs/copy_icon.svg" alt="" />
                <span class="van-ellipsis">{{ getShort(info.tokenId) }}</span>
            </div> -->
    <!-- <div class="text-info" v-if="pageType === 'asset'">
                <span class="text1">IPFS地址： </span>
                <span class="flex1"></span>
                <img @click="copy(info.ipfsUrl)" src="@assets/svgs/copy_icon.svg" alt="" />
                <span class="van-ellipsis">{{ getShort(info.ipfsUrl) }}</span>
            </div> -->
    <!-- </div> -->

    <!-- </van-collapse-item> -->
</template>

<script>
import product from '../../mixins/product';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
        // pageType: {
        //     type: String,
        //     default: 'product'
        // }
    },
    mixins: [product],
    methods: {
        copy(text) {
            this.$copyText(text).then(
                e => {
                    this.$toast.success('复制成功');
                    console.log(e);
                },
                e => {
                    this.$toast('复制失败');
                    console.log(e);
                }
            );
        }
    }
};
</script>

<style lang="less" scoped>
.information_on_the_chain_con {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 26px;
    margin-bottom: 12px;
}
.information_on_the_chain {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .information_on_the_chain_number {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
    }
    .information_on_the_chain_title {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 22px;
        opacity: 0.5;
    }
    .information_on_the_chain_content {
        // width: 158px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 18px;
        margin-right: 4px;
        margin-top: 3px;
        overflow: hidden; //超出的文本隐藏
        text-overflow: ellipsis; //溢出用省略号显示
        white-space: nowrap; //溢出则不换行
    }
    .information_on_the_chain_content_img {
        width: 24px;
        height: 24px;
    }
    .information_on_the_chain_content_con {
        display: flex;
    }
}
.information_on_the_chain:last-child {
    margin-bottom: 0px;
}
.hold_privileges_name {
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #939599;
}
</style>
