<template>
    <router-link
        :to="{
            path: '/' + $route.params.companyId + '/auctionDetail',
            query: {
                id: info.id
            }
        }"
        class="auction-info"
        :class="{ isEnd: isEnd }"
    >
        <van-image
            :radius="30"
            width="calc(100vw - 32px)"
            height="calc(100vw - 32px)"
            :src="getImg(changeImgs(info.pic, 600))"
            fit="cover"
        />

        <div class="time-line" :class="{ time1: info.status === 'NOTSTARTED' }">
            <div class="time" v-if="!isEnd">
                <img src="../../assets/info_icon_time3.png" v-if="info.status === 'NOTSTARTED'" alt="" />
                <img src="../../assets/info_icon_time.png" v-else alt="" />
                <span
                    >{{ timeText }}：<van-count-down @finish="finish" :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="content">
            <div class="text1 van-multi-ellipsis--l2">
                {{ info.name }}
            </div>

            <div class="sales-list">
                <div class="sales" v-if="info.category">
                    <span>{{ info.category }}</span>
                </div>
                <div class="sales">
                    <span>出价{{ info.bids }}次</span>
                </div>
            </div>

            <div class="content-bottom">
                <div class="user">
                    <van-image :src="info.sellerAvatar" round width="18" height="18" fit="cover" />
                    <span>{{ info.seller }}</span>
                </div>
                <div class="text3">
                    <span class="text3-1">{{ priceText }}</span>
                    <div class="price">
                        <img src="../../assets/icon_jiage_hei.png" alt="" />
                        <span>{{ showPrice }}</span>
                    </div>
                    <!-- <span class="text3-3">出价{{ info.bids }}次</span> -->
                </div>
            </div>
        </div>
        <img class="bg" src="@assets/png-diwen.png" alt="" />
    </router-link>
</template>

<script>
import auction from '../../mixins/auction';
export default {
    data() {
        return {
            time: 0,
            isFirst: true
        };
    },
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        },
        size: {
            type: String,
            default: 'normall'
        },
        isLink: {
            type: Boolean,
            default: true
        }
    },
    mixins: [auction],
    mounted() {
        this.setTime();
    },
    methods: {
        setTime() {
            let time = 0;
            if (this.info.status === 'NOTSTARTED') {
                time = this.getTime(this.info.startTime);
            } else {
                time = this.getTime(this.info.endTime);
            }
            if (time > 0) {
                this.time = time;
            }
            if (this.isFirst) {
                setTimeout(() => {
                    this.isFirst = false;
                }, 1000);
            }
        },
        finish(e) {
            if (this.isFirst) {
                return;
            }
            this.$http.get('/auctionActivity/get/' + this.info.id).then(res => {
                this.$emit('update:info', res);
                this.$nextTick(() => {
                    this.setTime();
                });
            });
        }
    }
};
</script>

<style lang="less" scoped>
.auction-info {
    border-radius: 30px;
    overflow: hidden;
    background-color: #fff;
    display: inline-flex;
    width: calc(100% - 16px);
    margin: 8px;
    align-items: stretch;
    box-sizing: border-box;
    color: #000;
    flex-direction: column;
    position: relative;
    .van-image {
        flex-shrink: 0;
        z-index: 1;
    }

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

        .text3 {
            .flex();
            align-items: flex-end;
            .text3-1 {
                font-size: 10px;
                font-weight: bold;
                color: #000000;
                line-height: 10px;
            }
            .price {
                .flex();
                img {
                    width: 8px;
                    height: 8px;
                    margin-top: 4px;
                }
                span {
                    font-size: 20px;
                    font-family: OSP-DIN, OSP;
                    font-weight: normal;
                    color: #000000;
                    line-height: 14px;
                }

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

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

        .sales-list {
            margin-top: 6px;
            .flex();
        }

        .sales {
            overflow: hidden;
            font-size: @font1;
            border-radius: 4px;

            span {
                padding: 0 10px;
                line-height: 20px;
                height: 20px;
                display: inline-block;
                &.sales-fir {
                    background: @prim;
                    color: @bg;
                }
                background-color: @bg3;
                color: @prim;
            }
        }
        .sales + .sales {
            margin-left: 14px;
        }

        .content-bottom {
            .flex();
            justify-content: space-between;
            margin-top: 10px;
            .user {
                .flex();
                font-size: 12px;
                color: #939599;
                line-height: 22px;
                span {
                    margin-left: 2px;
                }
            }
        }
    }

    .bg {
        position: absolute;
        width: 100px;
        height: 182px;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    &.isEnd {
        .time-line {
            .time {
                font-size: 12px;
                background-color: #f2f4f5;
                span {
                    color: #939599;
                }
            }
        }
    }
}

.time-line {
    flex-grow: 1;
    position: absolute;
    z-index: 2;
    top: 16px;
    left: 16px;

    .time {
        .flex();
        height: 22px;
        background: #ffffff;
        border-radius: 13px;
        display: inline-flex;
        padding: 0 10px;
        img {
            width: 18px;
            height: 18px;
        }
        span {
            margin-left: 2px;
            .flex();
            font-size: 12px;
            color: #ff7f1f;
            line-height: 22px;
            white-space: nowrap;
            .van-count-down {
                font-size: 12px;
                color: #ff7f1f;
                line-height: 22px;
            }
        }
    }

    &.time1 {
        span {
            color: #3ab200;
            .van-count-down {
                color: #3ab200;
            }
        }
    }
}
</style>
