<template>
    <!-- <router-link
        :to="{
            path: '/assetDetail',
            query: {
                id: info.id
            }
        }"
    > -->
    <div class="data_display_con" @click="$router.push({ path: '/assetDetail', query: { id: info.id } })">
        <div class="data_display_con_tip" v-if="info.consignment === true">出售中</div>
        <div class="data_display_con_tip" v-if="info.publicShow === true">展示中</div>
        <!-- <div class="sales_information_tips" v-if="item.salesInformationTips!=''">{{item.salesInformationTips}}</div> -->
        <!-- <img :src="getImg(changeImgs(info.pic))" alt="" class="data_display_con_img"> -->
        <van-image
            width="100%"
            height="calc(100vw/2 - 22.2px)"
            radius="18"
            :src="getImg(changeImgs(info.pic))"
            fit="cover"
            class="data_display_con_img"
        >
            <template v-slot:loading>
                <van-loading type="spinner" size="20" />
            </template>
        </van-image>
        <div class="data_display_con_title">{{ info.name }}</div>
        <div class="blockchain">
            <img :src="require('@assets/blockchain@3x.png')" alt="" class="blockchain_img" />
            <div class="blockchain_title">{{ info.tokenId }}</div>
        </div>
        <div class="data_display_con_collection">
            <div class="data_display_con_collection_title">{{ info.minter }}</div>
            <img
                :src="!!info.model3d ? require('@assets/3d@3x.png') : require('@assets/tupian@3x.png')"
                alt=""
                class="shop_title_img"
            />
        </div>
        <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
    </div>
    <!-- <van-image
            v-if="opened === false"
            width="21.3vw"
            height="21.3vw"
            radius="8"
            :src="require('../../assets/manghe.png')"
            fit="cover"
        />
        <van-image v-else radius="8" width="21.3vw" height="21.3vw" :src="getImg(changeImgs(info.pic))" fit="cover" />
        <div class="number" v-if="info.number && opened">编号：{{ info.number }}</div>
        <img src="../../assets/png-touxing.png" class="touying" alt="" />
        <div class="content">
            <div class="name van-ellipsis">
                {{ !opened ? '盲盒待开启' : info.name }}
            </div> -->
    <!-- <template v-if="opened">
                <div class="price-content" v-if="info.consignment">
                    <div class="price">
                        <img src="@assets/jiage_huang.png" alt="" />
                        <span>{{ info.sellPrice }}</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>
            </template>
            <div v-else class="status" style="min-height: 24px;"></div> -->
    <!-- <div class="text">
                <div class="minter"> -->
    <!-- <van-image width="18" height="18" radius="18" :src="info.minterAvatar" fit="cover" /> -->
    <!-- <span class="van-ellipsis">{{ info.minter }}</span>
                </div> -->
    <!-- <van-image width="18" height="18" :radius="100" :src="info.minterAvatar" fit="cover" />
                <span>{{ info.minter }}</span> -->
    <!-- <div class="text1" v-if="info.type === 'BLIND_BOX'">
          <span>{{ info.sale }}/ </span>
          <span>{{ info.stock }}</span>
        </div>
        <div class="flex1"></div>
        <like-button :isLike="info.liked" @click="likeProduct">
          {{ info.likes }}
        </like-button> -->
    <!-- </div>
        </div> -->
    <!-- </router-link> -->
</template>
<script>
import asset from '../../mixins/asset';
import product from '../../mixins/product';

export default {
    mixins: [asset, product],
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    setup() {
        const click = function () {
            console.log('wyt6w');
        };

        return { click };
    },
    methods: {
        likeProduct() {
            if (!this.info.liked) {
                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
                    this.$emit('update:info', {
                        ...this.info,
                        liked: true,
                        likes: this.info.likes + 1
                    });
                    this.$toast.success('收藏成功');
                });
            } else {
                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
                    this.$emit('update:info', {
                        ...this.info,
                        liked: false,
                        likes: this.info.likes - 1
                    });
                    this.$toast.success('取消收藏');
                });
            }
        }
    }
};
</script>

<style lang="less" scoped>
.data_display_con {
    width: 48%;
    background: #1e222c;
    border-radius: 18px;
    margin-bottom: 15px;
    position: relative;
    .bottom_texture {
        width: 85px;
        height: 100px;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .data_display_con_tip {
        width: 50px;
        height: 18px;
        // background-color: #fff;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 4px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        line-height: 18px;
        position: absolute;
        left: 10px;
        top: 10px;
        z-index: 9;
    }
    .sales_information_tips {
        width: 50px;
        height: 18px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 10px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #28b6ff;
        line-height: 18px;
        text-align: center;
        position: absolute;
        left: 10px;
        top: 10px;
    }
    .data_display_con_title {
        padding: 12px 10px 6px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 18px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .blockchain {
        padding: 0px 8px 6px;
        box-sizing: border-box;
        display: flex;
        position: relative;
        .blockchain_img {
            width: 26px;
            height: 26px;
            position: relative;
            z-index: 1;
        }
        .blockchain_title {
            width: ceil(100% - 30px);
            height: 18px;
            padding: 2px 8px;
            box-sizing: border-box;
            background: linear-gradient(141deg, #fcdc99 0%, #fce7c8 100%);
            border-radius: 4px;
            font-size: 9px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #725837;
            line-height: 14px;
            position: absolute;
            left: 28px;
            bottom: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
    .data_display_con_collection {
        display: flex;
        justify-content: space-between;
        padding: 0px 10px 14px;
        box-sizing: border-box;
        .data_display_con_collection_title {
            margin-right: 21px;
            width: calc(100% - 39px);
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 18px;
            opacity: 0.5;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .shop_title_img {
            width: 18px;
            height: 18px;
        }
    }
}
</style>
