<template>
    <router-link
        :to="{
            path: '/activityOrderDetail',
            query: {
                id: info.id
            }
        }"
        class="orderInfo"
        @click="click"
    >
        <div class="order-top">
            <span>{{ info.mintActivity }}</span>
            <span class="status">{{ getLabelName(info.status, statusOptions) }}</span>
        </div>
        <div class="order">
            <van-image
                v-for="(item, index) in materials"
                :key="index"
                :radius="6"
                width="80"
                height="80"
                :src="getImg(changeImgs(item.pic))"
                fit="cover"
            />

            <div class="order-content">
                <span>详情</span>
                <img src="../../assets/icon_inter1.png" alt="" />
            </div>
        </div>
        <div class="tips">订单时间: {{ info.createdAt }}</div>
        <!-- <div class="total-price">
            <span class="time flex1">{{ info.payTime }}</span>
            <span>实际支付</span>
            <span>¥{{ info.gasPrice }}</span>
        </div> -->

        <div class="btns" v-if="info.status === 'RECEIVE'">
            <van-button class="sure" plain type="primary" size="small" @click.prevent="sure" round>
                确认收货
            </van-button>
        </div>
    </router-link>
</template>

<script>
import orderAct from '../../mixins/orderAct';
import product from '../../mixins/product';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    mixins: [orderAct, product],
    computed: {
        materials() {
            if (!this.info.material) {
                return [];
            } else if (this.info.material.length < 4) {
                return [...this.info.material] || [];
            } else {
                return [...this.info.material].slice(0, 2);
            }
        }
    },
    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('取消收藏');
                });
            }
        },
        sure() {
            this.$dialog
                .confirm({
                    title: '确定已经收到货了吗？'
                })
                .then(() => {
                    return this.$http.get('/mintOrder/finish/' + this.info.id);
                })
                .then(() => {
                    this.$toast.success('确认成功');
                    this.$emit('update:info', {
                        ...this.info,
                        status: 'FINISH'
                    });
                });
        }
    }
};
</script>

<style lang="less" scoped>
.orderInfo {
    background: @bg;
    border-radius: 12px;
    color: @text0;
    padding: 16px 10px 0;
    margin: 20px 16px 0;
    display: block;
}
.order-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    span {
        font-size: 14px;
        color: @text0;
        line-height: 22px;
    }

    .status {
        color: @prim;
    }
}

.order {
    .flex();
    .van-image {
        margin-right: 10px;
    }
    position: relative;
}

.tips {
    padding: 12px 0;
    font-size: 12px;
    color: #c8c9cc;
    line-height: 24px;
}

.order-content {
    position: absolute;
    right: -8px;
    top: 28px;
    .flex();
    font-size: 12px;
    color: #c8c9cc;
    line-height: 24px;
    img {
        width: 24px;
        height: 24px;
        transform: translateX(-2px);
    }
}

.btns {
    padding: 12px 0;
    border-top: 1px solid @bg3;
    .flex();
    justify-content: flex-end;
    .sure {
        border: 1px solid @prim;
    }
}
</style>
