<template>
    <div class="orderInfo" @click="goDetail">
        <div class="order-top">
            <span>{{ info.contactName || info.minter }}</span>
            <span class="status" :style="{ color: statusColor }">{{ status }}</span>
        </div>

        <div class="auction-info" :class="{ isEnd: isEnd }">
            <van-image
                :radius="8"
                width="80"
                height="80"
                :src="getImg(changeImgs(info.pic || info.auctionPic, 600))"
                fit="cover"
            />
            <div class="content">
                <div class="text1 van-multi-ellipsis--l2">
                    {{ info.name }}
                </div>
                <div class="text2">
                    <div class="time" v-if="!isEnd">
                        <img src="../../assets/info_icon_time.png" alt="" />
                        <span>{{ timeText }}：<van-count-down :time="time" format="HH 小时 mm 分 ss 秒" /></span>
                    </div>
                    <div class="time" v-else>
                        <img src="../../assets/info_icon_time1.png" alt="" />
                        <span>{{ timeText }}</span>
                    </div>
                </div>

                <div class="text3" v-if="type !== 'FIXED_PRICE'">
                    <span class="text3-1">保证金</span>
                    <div class="price">
                        <!-- <img src="../../assets/icon_jiage_hei.png" alt="" /> -->
                        <span>¥{{ info.deposit }}{{ deposit ? `(${deposit})` : '' }}</span>
                    </div>
                    <!-- <span class="text3-3">出价{{ info.bids }}次</span> -->
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="tips">{{ showText }}: {{ info.createdAt || info.createdTime }}</div>
            <div class="price">
                <span class="text1">{{ payText }}</span>
                <span class="text2" :style="{ color: priceColor }">¥{{ info.totalPrice || info.bidderPrice }}</span>
            </div>
        </div>
        <!-- <div class="total-price">
            <span class="time flex1">{{ info.payTime }}</span>
            <span>实际支付</span>
            <span>¥{{ info.gasPrice }}</span>
        </div> -->
    </div>
</template>

<script>
import auctionOrder from '../../mixins/auctionOrder';
import auction from '../../mixins/auction';
import { mapState } from 'vuex';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        isOrder: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            time: 0
        };
    },
    mixins: [auctionOrder, auction],
    computed: {
        ...mapState(['userInfo']),
        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);
            }
        },
        isLeader() {
            return this.isLogin && this.info.actPurchasedId === this.userInfo.id;
        },
        isbidder() {
            return this.info.auctionStatus == 'PURCHASED' && this.info.actPurchasedId === this.userInfo.id;
        },
        status() {
            let status = this.getLabelName(this.info.orderStatus || this.info.orderStatus, this.orderStatusOptions);
            if (!status) {
                if (this.isbidder) {
                    status = '竞价成功，去支付';
                } else if (this.info.auctionStatus === 'PASS') {
                    status = '已流局';
                } else if (this.info.auctionStatus === 'ONGOING' && this.isLeader) {
                    status = '竞价中';
                } else if (this.info.auctionStatus === 'ONGOING' && !this.isLeader) {
                    status = '已出局，重新叫价';
                } else {
                    status = '已结束';
                }
            }
            return status;
        },
        statusColor() {
            let color = '#3AB200';
            if (this.isbidder) {
                color = '#FF4F50';
            } else if (
                this.info.auctionStatus === 'ONGOING' &&
                (this.info.purchaserId === this.userInfo.id || !this.info.purchaserId)
            ) {
                color = '#3AB200';
            } else if (this.info.purchaserId) {
                color = '#3AB200';
            } else if (this.isPass) {
                color = '#939599';
            } else {
                color = '#939599';
            }

            return color;
        },
        isEnd() {
            if (this.info.auctionStatus !== 'NOTSTARTED' && this.info.auctionStatus !== 'ONGOING') {
                return true;
            }
            return false;
        },
        payText() {
            if (this.orderId || this.isOrder) {
                return '实际支付';
            } else if (this.info.auctionStatus === 'ONGOING') {
                return '当前价';
            } else {
                return '成交价';
            }
        },
        showText() {
            if (this.orderId || this.isOrder) {
                return '订单时间';
            } else if (this.info.auctionStatus === 'ONGOING') {
                return '出价时间';
            } else {
                return '结束时间';
            }
        },
        isPass() {
            if (this.info.auctionStatus === 'PASS' && this.info.purchaserId === this.userInfo.id) {
                return true;
            } else {
                return false;
            }
        },
        deposit() {
            if (this.info.depositStatus === 'REFUNDED') {
                return '已退';
            } else if (this.isPass) {
                return '不退';
            } else {
                return '';
            }
        },
        priceColor() {
            if (this.info.orderId || this.isOrder) {
                return '#3AB200';
            } else if (
                this.info.auctionStatus === 'ONGOING' &&
                this.info.purchaserId &&
                this.info.purchaserId === this.userInfo.id
            ) {
                return '#F53809';
            }
            return '#939599';
        },
        type() {
            return this.info.paymentType || this.info.type;
        }
    },
    mounted() {
        if (this.info.auctionStatus === 'ONGOING') {
            this.time = this.getTime(this.info.endTime);
        }
    },
    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'
                    });
                });
        },
        goDetail() {
            if (this.info.orderId || this.isOrder) {
                this.$router.push({
                    path: '/' + this.$route.params.companyId + '/auctionOrderDetail',
                    query: {
                        id: this.isOrder ? this.info.id : this.info.orderId
                    }
                });
            } else {
                this.$router.push({
                    path: '/' + this.$route.params.companyId + '/auctionDetail',
                    query: {
                        id: this.info.auctionId
                    }
                });
            }
        }
    }
};
</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;
    }
}

.auction-info {
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    display: inline-flex;
    width: calc(100% - 16px);
    margin: 8px;
    align-items: stretch;
    box-sizing: border-box;
    color: #000;
    .van-image {
        flex-shrink: 0;
    }

    .content {
        flex-grow: 1;
        padding: 0 12px;
        align-self: stretch;
        .flex-col();
        .text1 {
            font-size: 14px;
            font-weight: bold;
        }

        .text2 {
            flex-grow: 1;
            margin-top: 8px;

            .time {
                .flex();
                height: 22px;
                background: #fff7f2;
                border-radius: 4px;
                display: inline-flex;
                padding: 0 4px;
                img {
                    width: 18px;
                    height: 18px;
                }
                span {
                    margin-left: 2px;
                    .flex();
                    font-size: 12px;
                    color: #ff7f1f;
                    line-height: 22px;
                    .van-count-down {
                        font-size: 12px;
                        color: #ff7f1f;
                        line-height: 22px;
                    }
                }
            }
        }
        .text3 {
            .flex();
            .text3-1 {
                font-size: 12px;
                color: #c8c9cc;
                line-height: 17px;
            }
            .price {
                .flex();
                margin-left: 10px;
                img {
                    width: 8px;
                    height: 8px;
                    margin-top: 4px;
                }
                span {
                    font-size: 12px;
                    color: #c8c9cc;
                    line-height: 17px;
                }

                flex-grow: 1;
                padding: 0 2px;
            }

            .text3-3 {
                font-size: 10px;
                color: #c8c9cc;
                line-height: 10px;
            }
        }
    }

    &.isEnd {
        .text2 {
            .time {
                background-color: #f2f4f5;
                span {
                    color: #939599;
                }
            }
        }
    }
}

.bottom {
    .flex();
    justify-content: space-between;

    .price {
        .text1 {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
        }

        .text2 {
            font-size: 16px;
            font-weight: bold;
            color: #939599;
            line-height: 24px;
            margin-left: 10px;
        }
    }
}
</style>
