<template>
    <router-link
        :to="{
            path: '/' + $route.params.companyId + '/auctionDetail',
            query: {
                id: info.id
            }
        }"
        class="auction-info"
        :class="{ isEnd: isEnd }"
    >
        <van-image :radius="8" width="128" height="128" :src="getImg(changeImgs(info.pic, 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 @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="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>
    </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: 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: 10px 12px;
        .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;
                    white-space: nowrap;
                    .van-count-down {
                        font-size: 12px;
                        color: #ff7f1f;
                        line-height: 22px;
                    }
                }
            }
        }
        .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;
            }
        }
    }

    &.isEnd {
        .text2 {
            .time {
                font-size: 12px;
                background-color: #f2f4f5;
                span {
                    color: #939599;
                }
            }
        }
    }
}
</style>
