<template>
    <router-link
        :to="{
            path: '/productDetail',
            query: {
                collectionId: info.id
            }
        }"
    >
        <div class="shop_list">
            <!-- 未售完 -->
            <div class="not_sold_out" v-if="time">
                <img :src="require('@assets/presale-con@3x.png')" alt="" class="not_sold_out_img" />
                <div>即将开售: {{ startTime || time }}</div>
            </div>
            <!-- 已售完 -->
            <div class="shop_sold_out" v-else-if="isSolded">
                <img :src="require('@assets/info_icon_shijian@3x.png')" alt="" class="shop_sold_out_img" />
                <div>已售罄</div>
            </div>
            <!-- 即将售罄 -->
            <div class="shop_sold_out_two" v-else-if="isSold">即将售罄</div>
            <!-- <img :src="getImg(changeImgs(info.pic, 600))" alt="" class="commodity_map" /> -->
            <van-image
                width="100%"
                height="calc(100vw - 30px)"
                :src="getImg(changeImgs(info.pic))"
                fit="cover"
                :radius="30"
                class="shop_list_img"
            >
                <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                </template>
            </van-image>
            <div class="shop_title">
                <div>{{ info.name }}</div>
                <img v-if="!!info.model3d" :src="require('@assets/3d@3x.png')" alt="" class="shop_title_img" />
            </div>
            <div class="shop_number">
                <div class="shop_number_con" v-if="info.collectionCategory">
                    <span>{{ info.collectionCategory }}</span>
                </div>
                <div class="limit">
                    <span>限量</span>
                </div>
                <div class="number_of_copies">
                    <span>{{ info.total }}份</span>
                </div>
                <div class="collection" v-if="info.category != ''">
                    <span>{{ info.category }}</span>
                </div>
            </div>
            <div class="shop_bottom">
                <div class="shop_bottom_left">
                    <!-- <img :src="getImg(info.minterAvatar)" alt="" class="shop_bottom_left_img" /> -->
                    <van-image width="16px" height="16px" :radius="16" :src="getImg(info.minterAvatar)" fit="cover" />
                    <div class="shop_bottom_left_name">{{ info.minter }}</div>
                </div>
                <div class="shop_bottom_right" v-if="info.salable">
                    <div class="shop_bottom_right_con">￥</div>
                    <div class="shop_bottom_right_price">{{ info.price }}</div>
                </div>
                <div class="shop_bottom_right_price" v-else>仅展示</div>
                <!-- <div class="shop_bottom_right">
                    <div class="shop_bottom_right_title">仅展示</div>
                </div> -->
            </div>
            <img :src="require('@assets/dibuwenli.png')" alt="" class="bottom_texture" />
        </div>
    </router-link>
</template>

<script>
import product from '../../mixins/product';
export default {
    mixins: [product],
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        type: {
            type: String,
            default: 'collection'
        }
    },
    computed: {
        time() {
            if (this.info.hasSubscribe) {
                if (this.info.purchaseTime) {
                    if (this.dayjs().isSameOrBefore(this.info.purchaseTime, 'YYYY-MM-DD HH:mm:ss')) {
                        return this.dayjs(this.info.purchaseTime).format('MM月DD日HH:mm');
                    }
                }
                return '';
            } else {
                if (this.info.startTime && !this.isSolded && !this.isSold && this.info.salable) {
                    if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
                        return this.dayjs(this.info.startTime).format('MM月DD日HH:mm');
                    }
                }
                return '';
            }
        }
        // isSolded() {
        //     return this.info && !this.info.noSoldOut && this.info.salable && this.info.source === 'OFFICIAL';
        // },
        // isSold() {
        //     return this.info && this.info.soldOut && this.info.salable;
        // }
    },
    mounted() {
        if (this.info.hasSubscribe) {
            if (this.info.purchaseTime) {
                var x = this.dayjs(this.info.purchaseTime, 'YYYY-MM-DD HH:mm:ss');
                var y = this.dayjs();
                let d = this.dayjs.duration(x.diff(y));
                let day = parseInt(d.asDays());
                if (day <= 0) {
                    this.getTime(this.info.purchaseTime);
                }
            }
        } else {
            if (this.info.startTime && !this.isSolded && !this.isSold) {
                var x1 = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
                var y1 = this.dayjs();
                let d1 = this.dayjs.duration(x1.diff(y1));
                let day = parseInt(d1.asDays());
                if (day <= 0) {
                    this.getTime(this.info.startTime);
                }
            }
        }
    },
    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>
.shop_list {
    width: 100%;
    // height: 455px;
    // background: #2F2519;
    border-radius: 30px;
    margin-bottom: 15px;
    position: relative;
    background-image: url(../../assets/png-liebiao-dabiankuang@3x.png);
    background-size: 100% 100%;
    padding: 6px 6px 0px;
    box-sizing: border-box;
    .bottom_texture {
        width: 196px;
        height: 140px;
        position: absolute;
        right: 5px;
        bottom: 7px;
    }
    /deep/ .van-image__img {
        position: relative;
        z-index: 11;
        border-radius: 30px;
    }
    .not_sold_out {
        // width: 144px;
        height: 25px;
        background: #000000;
        border-radius: 15px;
        line-height: 16px;
        font-size: 13px;
        padding: 4px 6px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        display: flex;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 12;
        .not_sold_out_img {
            width: 16px;
            height: 17px;
            margin-right: 4px;
            // margin: 3px 3px 0 10px;
        }
    }
    .shop_sold_out {
        display: flex;
        // width: 75px;
        height: 25px;
        background: #000000;
        border-radius: 15px;
        font-size: 13px;
        padding: 4px 6px;
        padding-right: 8px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
        line-height: 16px;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 12;
        .shop_sold_out_img {
            width: 16px;
            height: 17px;
            margin-right: 4px;
        }
    }
    .shop_sold_out_two {
        // width: 75px;
        height: 25px;
        background: #929292;
        border-radius: 15px;
        font-size: 13px;
        padding: 4px 6px;
        padding-right: 8px;
        box-sizing: border-box;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 16px;
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 12;
        text-align: center;
    }
    .commodity_map {
        width: 100%;
        height: 343px;
        border-radius: 30px;
    }
    .shop_title {
        display: flex;
        padding: 0px 15px;
        box-sizing: border-box;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 22px;
        margin: 10px 0px;
        .shop_title_img {
            width: 18px;
            height: 18px;
            margin-top: 2px;
            margin-left: 5px;
        }
    }
    .shop_number {
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .shop_number_con {
            height: 16px;
            padding: 0px 6px;
            // box-sizing: border-box;
            background: #f9ddb3;
            border-radius: 3px;
            margin-right: 6px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #282d3a;
            line-height: 16px;
        }
        .limit {
            width: 34px;
            height: 16px;
            background: #f9ddb3;
            border-radius: 3px 0px 0px 3px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #282d3a;
            line-height: 16px;
            text-align: center;
        }
        .number_of_copies {
            // width: 96px;
            padding: 0px 6px;
            box-sizing: border-box;
            height: 16px;
            background: rgba(255,255,255,0.1000);
            border-radius: 0px 3px 3px 0px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f9ddb3;
            line-height: 16px;
            text-align: center;
        }
        .collection {
            // width: 56px;
            height: 16px;
            background: rgba(255,255,255,0.1000);
            padding: 0px 6px;
            box-sizing: border-box;
            border-radius: 3px;
            font-size: 11px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #f9ddb3;
            margin-left: 6px;
            line-height: 16px;
            // text-align: center;
        }
    }
    .shop_bottom {
        padding: 2px 15px 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        .shop_bottom_left {
            display: flex;
            padding-top: 9px;
            box-sizing: border-box;
            .shop_bottom_left_name {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
                margin-left: 8px;
                opacity: 0.5;
            }
        }
        .shop_bottom_right {
            display: flex;
            position: relative;
            .shop_bottom_right_con {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 22px;
                margin-top: 4px;
                // position: absolute;
                // bottom: 3px;
                // left: -12px;
            }
            .shop_bottom_right_price {
                font-size: 20px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                line-height: 28px;
            }
            .shop_bottom_right_title {
                margin-top: 9px;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                line-height: 16px;
            }
        }
        .shop_bottom_right_price {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #ffffff;
            line-height: 28px;
        }
    }
}
</style>
