<template>
    <van-overlay :lock-scroll="false" :show="show" z-index="99" @click="show = false">
        <div class="wrapper">
            <div class="block" @click.stop>
                <div class="title">
                    <img src="../../assets/icon-paimaijilu.png" alt="" />
                    <span class="text1">拍卖纪录</span>
                    <span class="text2">共{{ recordNum }}条</span>
                    <img src="../../assets/icon_close_tips.png" @click="show = false" alt="" class="close" />
                </div>
                <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
                    <div class="record-item" v-for="(item, index) in list" :key="index">
                        <span>{{ item.user }}</span>
                        <span>{{ index === 0 ? '领先' : '出局' }}</span>
                        <span>¥{{ item.bidderPrice || 0 }}</span>
                        <span>{{ showTime(item.createdAt) }}</span>
                    </div>
                    <div class="empty" v-if="empty">暂无拍卖纪录</div>
                </van-list>
            </div>
        </div>
    </van-overlay>
</template>

<script>
import list from '../../mixins/list';
import auction from '../../mixins/auction';

export default {
    props: {
        auctionId: {
            type: Number,
            default: 0
        },
        recordNum: {
            type: Number,
            default: 0
        }
    },
    mixins: [list, auction],
    data() {
        return {
            show: false,
            url: '/auctionRecord/all',
            size: 10
        };
    },
    methods: {
        beforeData() {
            return {
                query: {
                    auctionId: this.auctionId,
                    type: 'BIDDER',
                    del: false
                },
                sort: 'id,desc'
            };
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 300px;
    height: 340px;
    background-color: #fff;
    border-radius: 8px;
    overflow: auto;

    .empty {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        line-height: 17px;
    }
}

.title {
    .flex();
    height: 40px;
    padding: 0 16px;
    border-bottom: 1px solid #f5f7fa;
    background-color: #fff;
    position: sticky;
    top: 0;
    img {
        width: 18px;
        height: 18px;
    }

    .text1 {
        flex-grow: 1;
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        margin: 0 6px;
    }
    .close {
        width: 24px;
        height: 24px;
    }

    .text2 {
        font-size: 12px;
        color: #c8c9cc;
        line-height: 17px;
        margin: 0 6px;
    }
}

.list {
    padding: 0 16px 30px;
    overflow: hidden;
}

.record-item {
    .flex();
    font-size: 12px;
    color: #939599;
    line-height: 17px;
    margin-top: 10px;

    span {
        white-space: nowrap;
        &:first-child {
            width: 20%;
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis;
            display: inline-block;
        }

        &:nth-child(3) {
            flex-grow: 1;
        }
    }

    span + span {
        margin-left: 18px;
    }

    &:first-child {
        color: @prim;
    }
}
</style>
