<template>
    <div class="page">
        <van-sticky :offset-top="46">
            <div class="status">竞价中</div>
        </van-sticky>

        <div class="container">
            <auction-info ref="info" :info="info"></auction-info>

            <div class="panel">
                <div class="panel-title">你的出价金额(元)</div>
                <van-stepper
                    :step="info.increment"
                    :min="min"
                    :max="max"
                    v-model="value"
                    theme="round"
                    button-size="22"
                    :decimal-length="2"
                    allow-empty
                    :default-value="defValue"
                />
                <div class="panel-tips">加价幅度¥{{ info.increment }}</div>
                <van-button type="primary" block round @click="submit">立即出价</van-button>
            </div>

            <div class="list-box">
                <div class="name">
                    <img src="../../assets/icon-paimaijilu.png" alt="" />
                    <span>拍卖纪录</span>
                </div>

                <div class="list">
                    <div class="item" v-for="(item, index) in records" :key="index">
                        <span>{{ item.user }}</span>
                        <span>{{ item.createdAt }}</span>
                        <span>{{ index === 0 ? '领先' : '出局' }}</span>
                        <span>¥{{ item.bidderPrice || 0 }}</span>
                    </div>
                </div>

                <div class="empty" v-if="records.length === 0">暂无数据</div>
            </div>
        </div>

        <auction-deposit
            @showRule="$refs.rule.show = true"
            ref="deposit"
            :info="info"
            @changePopup="changePopup"
            @refreash="onRefresh"
        ></auction-deposit>

        <auction-rule ref="rule" @changePopup="changePopup"></auction-rule>
    </div>
</template>

<script>
import auction from '../../mixins/auction';
import auctionInfo from '../../components/auction/info.vue';
import AuctionDeposit from '../../components/auction/deposit.vue';
import AuctionRule from '../../components/auction/rule.vue';
export default {
    data() {
        return {
            auctionId: 0,
            info: {},
            recordInfo: {},
            records: [],
            showPopup: false
        };
    },
    computed: {
        min() {
            return (this.info.purchasePrice || this.info.startingPrice || 0) + (this.info.increment || 0);
        },
        defValue() {
            return this.min;
        }
    },
    components: {
        auctionInfo,
        AuctionDeposit,
        AuctionRule
    },
    mounted() {
        if (this.$route.query.auctionId) {
            this.auctionId = this.$route.query.auctionId;
        }
        this.getDetail();
    },
    methods: {
        getDetail() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .get('/auctionActivity/get/' + this.auctionId)
                .then(res => {
                    this.info = res;
                    // this.startCount();
                    this.$nextTick(() => {
                        this.$refs.info.setTime();
                    });
                    this.getRecord();

                    this.$toast.clear();
                })
                .catch(e => {
                    this.$toast.clear();
                    if (e && e.error) {
                        this.$dialog
                            .alert({
                                title: '提示',
                                message: e.error
                            })
                            .then(res => {
                                this.$router.back();
                            });
                    }
                });
        },
        getRecord() {
            this.$http
                .post(
                    '/auctionRecord/all',
                    {
                        query: {
                            auctionId: this.auctionId,
                            type: 'BIDDER',
                            del: false
                        },
                        size: 3,
                        page: 0,
                        sort: 'id,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.records = res.content;
                });
            this.$http.get('/auctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
                this.recordInfo = res;
            });
        },
        submit() {
            if (!this.recordInfo.payDeposit) {
                this.goDeposit();
                return;
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.$http
                .post('/auctionRecord/create', {
                    auctionId: this.auctionId,
                    amount: this.value
                })
                .then(res => {
                    this.$toast.success('出价成功');
                    setTimeout(() => {
                        history.back();
                    }, 1000);
                })
                .catch(e => {
                    this.$toast.clear();
                    if (e && e.error) {
                        this.$toast(e.error);
                    }
                });
        },
        changePopup(flag = false) {
            this.showPopup = flag;
        },
        onRefresh() {
            this.$router.back();
        },
        goDeposit() {
            // this.goCreated();
            this.checkLogin().then(() => {
                this.$refs.deposit.init(this.value);
            });
        }
    }
};
</script>

<style lang="less" scoped>
.page {
    background-color: #f5f7fa;
}

.status {
    font-size: 12px;
    color: #ffffff;
    line-height: 28px;
    height: 28px;
    background: #ff7f1f;
    text-align: center;
}

.container {
    padding: 16px;
    .auction-info {
        margin: 0;
        width: 100%;
        display: flex;
    }
}
.panel {
    background: #ffffff;
    border-radius: 8px;
    margin-top: 16px;
    padding: 16px 18px;
    .flex-col();
    .panel-title {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
        text-align: center;
        padding-bottom: 16px;
    }

    /deep/ .van-stepper {
        .flex();
        .van-stepper__minus,
        .van-stepper__plus {
            width: 44px !important;
            height: 44px !important;
            color: #3ab200 !important;
            border: 1px solid #3ab200 !important;
            background-color: #f2f4f5 !important;
            font-weight: bold;
        }

        .van-stepper__input {
            height: 60px !important;
            background: #f5f7fa;
            border-radius: 8px;
            flex-grow: 1;
            margin: 0 20px;
            font-size: 40px;
            font-family: OSP-DIN, OSP;
            font-weight: normal;
            color: #3ab200;
        }

        .van-stepper__plus--disabled,
        .van-stepper__minus--disabled {
            color: #939599 !important;
            border-color: #939599 !important;
            background-color: #f2f4f5 !important;
            opacity: 1;
        }
    }

    .van-button {
        font-size: 16px;
        font-weight: bold;
    }

    .panel-tips {
        text-align: center;
        font-size: 12px;
        color: #3ab200;
        line-height: 17px;
        padding: 10px 0 12px;
    }
}

.list-box {
    padding: 20px 0;
    .name {
        .flex();
        img {
            width: 18px;
            height: 18px;
        }
        span {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            margin-left: 10px;
        }
    }

    .list {
        .item {
            font-size: 12px;
            color: #939599;
            line-height: 17px;
            .flex();

            &:first-child {
                color: #000;
            }
            margin-top: 10px;

            span {
                &: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;
            }
        }
    }
}

.empty {
    text-align: center;
    font-size: 12px;
    color: #939599;
    padding: 16px;
}
</style>
