<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.id}}</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">
                        <div class="product_details_collection_title">限量</div>
                        <div class="product_details_collection_value">{{info.totalCount}}份</div>
                    </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 class="transaction_button">
                <div class="transaction_button_left">
                    <div v-if="info.status === 'CANCELLED'">下单时间：{{info.createdAt}}</div>
                    <div v-else-if="info.status === 'FINISH'">完成时间：{{info.payTime}}</div>
                    <!-- <div></div> -->
                </div>
                <div class="transaction_button_right">
                    <!-- <div class="transaction_button_right_one">
                        <div class="transaction_button_right_one_text1">取消订单</div>
                        <div class="transaction_button_right_one_text2" @click="paymentOrder">付款</div>
                    </div> -->
                    <div class="transaction_button_right_two" @click="del" v-if="info.status === 'CANCELLED'">删除订单</div>
                    <!-- <div class="transaction_button_right_two" @click="$router.push({ path: '/assetDetail', query: { id: info.resultAssetId } })" v-else-if="info.status === 'FINISH'">查看藏品</div> -->
                </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';
import { Dialog } from 'vant';
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() {
            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);
            //     });
        },
        // 订单付款
        paymentOrder(){
            this.$router.push({
                        path: '/submit',
                        query: {
                            id: this.info.collectionId
                        }
                    });
        },
        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: #1E222C;
            border-radius: 12px;
            margin-bottom: 10px;
            padding: 10px 15px 12px;
            box-sizing: border-box;
            .list_display_top{
                display: flex;
                justify-content: space-between;
                margin-bottom: 14px;
                .list_display_top_time{
                    font-size: 16px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 22px;
                }
                .transaction_status{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    opacity: 0.3;
                    line-height: 22px;
                }
            }
            .list_display_bottom{
                // margin-top: 8px;
                display: flex;
                // position: relative;
                .list_display_bottom_img{
                    width: 90px;
                    height: 90px;
                    margin-right: 12px;
                    border-radius: 12px;
                }
                .product_details{
                    width: calc(100% - 110px);
                }
                .product_details_title{
                    width: 100%;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 20px;
                    margin-bottom: 8px;
                    margin-top: 8px;
                    white-space:nowrap;
                    overflow:hidden;
                    text-overflow:ellipsis;
                }
                .product_details_collection{
                    display: flex;
                    margin-bottom: 8px;
                    font-size: 11px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #282D3A;
                    line-height: 16px;
                    .product_details_collection_title{
                        width: 34px;
                        height: 16px;
                        background: #F9DDB3;
                        border-radius: 3px 0px 0px 3px;
                        text-align: center;
                    }
                    .product_details_collection_value{
                        height: 16px;
                        background: #323743;
                        border-radius: 0px 3px 3px 0px;
                        padding: 0px 6px;
                        box-sizing: border-box;
                        color: #F9DDB3;
                    }
                }
                .product_details_price{
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #FFFFFF;
                    line-height: 24px;
                    .product_details_price_symbol{
                        font-size: 14px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #FFFFFF;
                        line-height: 20px;
                    }
                }
                .product_details_number{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C8C9CC;
                    position: absolute;
                    right: 0px;
                    bottom: 0px;
                }
            }
            .transaction_button{
                margin-top: 17px;
                display: flex;
                justify-content: space-between;
                .transaction_button_left{
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 20px;
                    opacity: 0.3;
                    margin-top: 7px;
                }
                .transaction_button_right{
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    .transaction_button_right_two{
                        height: 34px;
                        padding: 0px 14px;
                        border-radius: 17px;
                        border: 1px solid #333845;
                        box-sizing: border-box;
                        line-height: 32px;
                        color: #FFFFFF;
                        opacity: 0.3;
                        text-align: center;
                    }
                    .transaction_button_right_one{
                        display: flex;
                        .transaction_button_right_one_text1{
                            width: 84px;
                            height: 34px;
                            border-radius: 17px;
                            border: 1px solid #333845;
                            box-sizing: border-box;
                            line-height: 32px;
                            text-align: center;
                            margin-right: 12px;
                            color: #FFFFFF;
                            opacity: 0.3;
                        }
                        .transaction_button_right_one_text2{
                            width: 84px;
                            height: 34px;
                            border-radius: 17px;
                            border: 1px solid #F2D5B2;
                            box-sizing: border-box;
                            line-height: 32px;
                            text-align: center;
                            color: #F2D5B2;
                        }
                    }
                }
            }
        }
/deep/ .van-divider::before{
    height: 1px;
background: #5F646F;
opacity: 0.2;
} 
</style>
