<template>
    <router-link
        :to="{
            path: '/orderDetail',
            query: {
                id: info.id
            }
        }"
        @click="click"
    >
        <div class="list_display_con">
            <div class="list_display_top">
                <div class="list_display_top_time">订单时间&nbsp;:&nbsp;{{info.createdAt}}</div>
                <div class="transaction_status">{{ getLabelName(info.status, statusOptions) }}</div>
            </div>
            <van-divider/>
            <div class="list_display_bottom">
                <img :src="getImg(changeImgs(info.pic))" alt="" class="list_display_bottom_img">
                <div class="product_details">
                    <div class="product_details_title">{{info.name}}</div>
                    <div class="product_details_collection">{{info.category || '收藏品'}}</div>
                    <div class="product_details_price"><span class="product_details_price_symbol">￥</span>{{info.price}}</div>
                </div>
                <div class="product_details_number">x1</div>
            </div>
        </div>
        <!-- <div class="order-top">
            <span>{{ info.minter }}</span>
            <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
        </div>
        <div class="order">
            <van-image :radius="6" width="80" height="80" :src="getImg(changeImgs(info.pic))" fit="cover" />

            <div class="content">
                <div class="name van-multi-ellipsis--l2">
                    {{ info.name }}
                </div>
                <div class="text" v-if="info.number">编号:{{ info.number }}</div>
                <div class="flex1"></div>
                <div class="price">¥{{ info.price }}</div>
            </div>
        </div>
        <div class="total-price">
            <span class="time flex1">{{ info.payTime }}</span>
            <span>实际支付</span>
            <span>¥{{ info.totalPrice }}</span>
        </div> -->
        <!-- 
        <div class="btns">
            <van-button color="#939599" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
        </div> -->
    </router-link>
</template>

<script>
import order from '../../mixins/order';
import product from '../../mixins/product';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    // setup() {
    //     const click = function () {
    //         // console.log('wyt6w');
    //     };

    //     return { click };
    // },
    mixins: [order, product],
    methods: {
        delInit() {
            this.$emit('delFn');
        },
        del() {
            this.Dialog.confirm({
                title: '确定删除吗？',
                message: '删除此记录将消失'
            }).then(() => {
                this.$http
                    .post('/order/hide/', {
                        id: this.info.id
                    })
                    .then(() => {
                        this.$toast.success('删除成功');
                        setTimeout(() => {
                            this.delInit();
                        }, 1000);
                    });
            });
            // this.$http
            //     .post('/order/hide/', {
            //         id: this.info.id
            //     })
            //     .then(() => {
            //         this.$toast.success('删除成功');
            //         setTimeout(() => {
            //             this.delInit();
            //         }, 1000);
            //     });
        },
        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>
    .list_display_con{
            width: 100%;
            background: #29293F;
            border-radius: 8px;
            margin-bottom: 16px;
            padding: 10px;
            box-sizing: border-box;
            .list_display_top{
                display: flex;
                justify-content: space-between;
                margin-bottom: 8px;
                .list_display_top_time{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C8C9CC;
                }
                .transaction_status{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #28B6FF;
                }
            }
            .list_display_bottom{
                margin-top: 8px;
                display: flex;
                position: relative;
                .list_display_bottom_img{
                    width: 80px;
                    height: 80px;
                    margin-right: 12px;
                }
                .product_details_title{
                    width: 215px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin-bottom: 6px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                .product_details_collection{
                    width: 56px;
                    height: 22px;
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 4px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #28B6FF;
                    line-height: 22px;
                    margin-bottom: 10px;
                    text-align: center;
                }
                .product_details_price{
                    margin-left: 10px;
                    position: relative;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #28B6FF;
                    .product_details_price_symbol{
                        font-size: 10px;
                        position: absolute;
                        bottom: 1px;
                        left: -10px;
                    }
                }
                .product_details_number{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C8C9CC;
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                }
            }
        }
/deep/ .van-divider::before{
    height: 1px;
background: #5F646F;
opacity: 0.2;
} 
</style>
