<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="1000"
        class="detail"
        :class="{ dark: isNFT, isEnd: isEnd }"
        v-model="isLoading"
        @refresh="onRefresh"
        :pageType="isNFT ? 'dark' : 'light'"
    >
        <div class="top">
            <auction-banner :info="info" :assetInfo="assetInfo" @getProduct="getDetail"></auction-banner>
            <div class="price-bar" v-if="isEnd">
                <div class="price-left">
                    <div class="text1">{{ priceText }}</div>
                    <div class="text2">
                        <img src="../../assets/icon_jiage_bai.png" alt="" />
                        <span>{{ showPrice }}</span>
                    </div>
                    <i class="font_family icon-sanjiao"></i>
                </div>
                <div class="price-right">
                    <span>{{ timeText }}</span>
                    <span class="time-box">{{ time }}</span>
                </div>
            </div>
            <div class="price-bar" v-else>
                <div class="price-left">
                    <div class="text1">{{ priceText }}</div>
                    <div class="text2">
                        <img src="../../assets/icon_jiage_bai.png" alt="" />
                        <span>{{ showPrice }}</span>
                    </div>
                    <i class="font_family icon-sanjiao"></i>
                </div>
                <div class="price-right">
                    <span>{{ timeText }}</span>
                    <span class="time">{{ getNum(hours) }}</span>
                    <span>小时</span>
                    <span class="time">{{ getNum(current.minutes || 0) }}</span>
                    <span>分</span>
                    <span class="time">{{ getNum(current.seconds || 0) }}</span>
                    <span>秒</span>
                </div>
            </div>
            <div class="title">{{ info.name }}</div>
            <div class="title-sub">
                <span class="text1">出价{{ info.bids }}次</span>
            </div>
        </div>

        <div class="card" v-if="recordNum > 0">
            <div class="card-title" @click="showRecord">
                <img src="../../assets/icon-paimaijilu-bai.png" v-if="isNFT" alt="" />
                <img src="../../assets/icon-paimaijilu.png" alt="" v-else />
                <span class="flex1">拍卖纪录</span>
                <div class="card-title-r">
                    <span>共{{ recordNum }}条</span>
                    <img src="../../assets/icon_inter1.png" alt="" />
                </div>
            </div>
            <div class="card-content">
                <div class="record-item" v-for="(item, index) in records" :key="index">
                    <span>{{ item.user }}</span>
                    <span>{{ index === 0 ? '领先' : '出局' }}</span>
                    <span>¥{{ item.bidderPrice || 0 }}</span>
                    <span>{{ item.createdAt }}</span>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-title">
                <img src="../../assets/icon-paipingxinxi-bai.png" v-if="isNFT" alt="" />
                <img src="../../assets/auction1.png" alt="" v-else />
                <span>拍品信息</span>
            </div>
            <div class="card-content">
                <div class="card-info">
                    <span class="text1">增价拍</span>
                    <span class="text2">{{ info.startingPrice ? '竞拍价' : '一口价' }}</span>
                    <div class="card-right" v-if="info.startingPrice">
                        <span class="text1">起拍价</span>
                        <span class="text2">¥{{ info.startingPrice }}</span>
                    </div>
                </div>
                <div class="card-info" v-if="info.startingPrice">
                    <span class="text1">加价幅度</span>
                    <span class="text2">¥{{ info.increment }}</span>
                    <div class="card-right">
                        <span class="text1">保证金</span>
                        <span class="text2">¥{{ info.deposit }}</span>
                    </div>
                </div>
                <div class="card-info">
                    <span class="text1">开拍时间</span>
                    <span class="text2">{{ info.startTime }}</span>
                </div>
                <div class="card-info">
                    <span class="text1">结束时间</span>
                    <span class="text2">{{ info.endTime }}</span>
                </div>
            </div>
        </div>
        <auction-asset v-if="isNFT" :info="assetInfo"></auction-asset>
        <div class="card" v-else>
            <div class="card-title">
                <img src="../../assets/icon-paipingxinxi-bai.png" v-if="isNFT" alt="" />
                <img src="../../assets/auction2.png" v-else alt="" />
                <span>拍品描述</span>
            </div>
            <div v-if="info.detail" class="card-content card-detail" v-html="info.detail"></div>
        </div>

        <div class="btn-bottom van-safe-area-bottom" :class="{ showPopup: showPopup }">
            <div class="fixed-list">
                <div class="help" @click="showHelp">
                    <i class="font_family icon-help"></i>
                    <div>帮助</div>
                </div>

                <div class="btn-list" v-if="isbidder">
                    <van-button type="primary" block round @click="goBuy">
                        <div>竞拍成功，去支付</div>
                        <div class="sub">
                            (请在
                            <van-count-down :time="buyTime" @finish="getDetail" format="HH小时mm分ss秒"></van-count-down
                            >内支付)
                        </div>
                    </van-button>
                </div>
                <div
                    class="btn-list not"
                    v-else-if="
                        info.status === 'PURCHASED' ||
                        info.status === 'FINISH' ||
                        (info.status === 'PASS' && !recordInfo.payDeposit)
                    "
                >
                    <van-button disabled block round>竞拍结束</van-button>
                </div>
                <div class="btn-list not" v-else-if="info.status === 'NOTSTARTED'">
                    <van-button disabled block round>未开始</van-button>
                </div>
                <div class="btn-list not" v-else-if="info.status === 'PASS' && recordInfo.payDeposit">
                    <van-button disabled block round>
                        <div>已流拍</div>
                        <div class="sub" v-if="info.purchaserId === userInfo.id">
                            （保证金 ¥{{ info.deposit }} 不退回）
                        </div>
                    </van-button>
                </div>

                <template v-else-if="info.status === 'ONGOING' || info.status === 'FIXED_PRICE_PURCHASED'">
                    <div class="btn-list" v-if="!info.startingPrice">
                        <van-button
                            type="primary"
                            :disabled="info.status === 'FIXED_PRICE_PURCHASED'"
                            block
                            round
                            @click="goBuy"
                            >立即支付</van-button
                        >
                    </div>

                    <div class="btn-list" v-else>
                        <van-button type="primary" @click="goBuy" block plain>
                            <div>直接购买</div>
                            <div class="sub">¥{{ info.fixedPrice }}</div>
                        </van-button>
                        <van-button type="primary" block v-if="isLeader">
                            <div>竞价中</div>
                            <div class="sub">(出价金额为 ¥{{ info.purchasePrice }})</div>
                        </van-button>

                        <van-button type="primary" block v-else-if="isOut" @click="goCreated">
                            <div>已出局</div>
                            <div class="sub">(重新出价)</div>
                        </van-button>
                        <van-button type="primary" block v-else-if="recordInfo.payDeposit" @click="goCreated"
                            >去出价</van-button
                        >
                        <van-button type="primary" v-else block @click="goDeposit">
                            <div>立即参拍</div>
                            <div class="sub">（保证金 ¥{{ info.deposit }}）</div>
                            <!-- <div class="sub">
                                (请在
                                <van-count-down
                                    :time="buyTime"
                                    @finish="getDetail"
                                    format="HH小时mm分ss秒"
                                ></van-count-down
                                >内支付)
                            </div> -->
                        </van-button>
                    </div>
                </template>

                <!-- <div class="btn-list">
                    <van-button type="primary" block round>立即支付</van-button>
                </div> -->
            </div>
        </div>

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

        <auction-help ref="help" @changePopup="changePopup"></auction-help>
        <auction-rule ref="rule" @changePopup="changePopup"></auction-rule>
        <auction-records ref="record" :auctionId="auctionId" :recordNum="recordNum"></auction-records>
    </van-pull-refresh>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';

// import SwiperCore, { Pagination, Autoplay } from 'swiper';
import AuctionDeposit from '../../components/auction/deposit.vue';
import AuctionHelp from '../../components/auction/help.vue';
import AuctionRule from '../../components/auction/rule.vue';
import AuctionBanner from '../../components/auction/banner.vue';
import AuctionAsset from '../../components/auction/asset.vue';
import AuctionRecords from '../../components/auction/records.vue';
import { useCountDown, useToggle } from '@vant/use';
import auction from '../../mixins/auction';
import { mapState } from 'vuex';
export default {
    name: 'auctionDetail',
    inject: ['setKeeps', 'changeTab'],
    mixins: [auction],
    setup() {
        const [timeDown, toggleTime] = useToggle(false);
        const countDown = useCountDown({
            onFinish: () => {
                toggleTime();
            }
        });

        return {
            current: countDown.current,
            countDown: countDown,
            timeDown: timeDown
        };
    },
    components: {
        AuctionDeposit,
        AuctionHelp,
        AuctionRule,
        AuctionBanner,
        AuctionAsset,
        AuctionRecords
    },
    data() {
        return {
            auctionId: 0,
            info: {},
            assetInfo: {},
            showPopup: false,
            time: '',
            recordInfo: {},
            records: [],
            recordNum: 0,
            buyTime: 0
        };
    },
    watch: {
        timeDown() {
            this.getDetail();
        }
    },
    computed: {
        ...mapState(['userInfo']),
        hours() {
            let hours = 0;
            if (this.current.days) {
                hours += this.current.days * 24;
            }
            hours += this.current.hours || 0;
            return hours;
        },
        isOut() {
            if (
                this.recordInfo.payDeposit &&
                this.recordInfo.bidderPrice &&
                this.recordInfo.bidderPrice !== this.info.deposit &&
                !this.isLeader
            ) {
                return true;
            } else {
                return false;
            }
        }
    },
    mounted() {
        if (this.$route.query.id) {
            this.auctionId = this.$route.query.id;
        }
        this.getDetail();
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/mineAddress') {
            this.setKeeps(['auctionDetail']);
        } else if (!to.meta.menuPage) {
            this.setKeeps(['auctionDetail'], false);
        }

        next();
    },
    methods: {
        showHelp() {
            this.$refs.help.show = !this.$refs.help.show;
            this.changePopup(true);
        },
        changePopup(flag = false) {
            this.showPopup = flag;
        },
        startCount(time = 24 * 3600 * 1000) {
            if (this.info.status === 'NOTSTARTED') {
                time = this.dayjs(this.info.startTime).diff(this.dayjs());
            } else if (this.info.status === 'ONGOING') {
                time = this.dayjs(this.info.endTime).diff(this.dayjs());
            }
            if (!this.isEnd) {
                if (time > 0) {
                    this.countDown.reset(time);
                    this.countDown.start();
                }
            } else {
                this.time = this.info.endTime;
            }
        },
        getRecord() {
            this.$http.get('/auctionRecord/hasPayDeposit?auctionId=' + this.auctionId).then(res => {
                this.recordInfo = res;
            });

            this.$http
                .post(
                    '/auctionRecord/all',
                    {
                        query: {
                            auctionId: this.auctionId,
                            type: 'BIDDER',
                            del: false
                        },
                        size: 2,
                        page: 0,
                        sort: 'id,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.records = res.content;
                    this.recordNum = res.totalElements;
                });
        },
        getDetail() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            return this.$http
                .get('/auctionActivity/get/' + this.auctionId)
                .then(res => {
                    // res.model3d = {
                    //     name: '99.FBX',
                    //     thumb: null,
                    //     type: null,
                    //     url: 'https://cdn.raex.vip/fbx/2022-01_20-11/LzpIMaHFSiCmINEx/99.FBX'
                    // };

                    this.info = res;
                    this.startCount();
                    this.getRecord();
                    //改变头部颜色
                    this.$nextTick(() => {
                        if (this.isNFT) {
                            this.changeTab('#0f0f0f');
                        }
                        if (this.isbidder) {
                            this.$http.get('/sysConfig/get/auction_cancel_time').then(res => {
                                let date1 = this.dayjs(this.info.endTime).add(Number(res.value), 'minute');
                                let date2 = this.dayjs();
                                let time = date1.diff(date2);
                                if (time > 0) {
                                    this.buyTime = time;
                                }
                            });
                        }
                    });

                    //获取nft详情
                    if (res.auctionType === 'NFT' && res.assetId) {
                        return this.$http.get('/asset/get/' + res.assetId);
                    } else {
                        return Promise.reject();
                    }
                })
                .then(res => {
                    console.log(res);
                    this.$toast.clear();
                    this.assetInfo = res;
                })
                .catch(e => {
                    this.$toast.clear();
                    if (e && e.error) {
                        this.$dialog
                            .alert({
                                title: '提示',
                                message: e.error
                            })
                            .then(res => {
                                this.$router.back();
                            });
                    }
                });
        },
        goBuy() {
            this.checkLogin().then(() => {
                this.$router.push({
                    name: 'auctionSubmit',
                    query: {
                        auctionId: this.info.id,
                        paymentType: this.isbidder ? 'PURCHASE_PRICE' : 'FIXED_PRICE'
                    }
                });
            });
        },
        goDeposit() {
            this.goCreated();
            // this.checkLogin().then(() => {
            //     this.$refs.deposit.init();
            // });
        },
        goCreated() {
            this.$router.push('/' + this.$route.params.companyId + '/auctionOffer?auctionId=' + this.auctionId);
        },
        showRecord() {
            this.$refs.record.show = true;
        },
        onRefresh() {
            this.changePopup();
            this.getDetail().then(() => {
                this.isLoading = false;
            });
        }
    }
};
</script>

<style lang="less" scoped>
/deep/.mySwiper {
    position: relative;
    z-index: 1;
    .van-image {
        display: block;
    }
    .swiper-pagination {
        background: rgba(0, 0, 0, 0.3);
        border-radius: 9px;
        height: 20px;
        color: #ffffff66;
        right: 16px;
        width: auto;
        left: auto;
        bottom: 25px;
        padding: 0 10px;

        .swiper-pagination-current {
            color: #fff;
        }
    }
}
.price-bar {
    background: linear-gradient(270deg, #ffc61f 0%, #f95532 100%);
    border-radius: 16px 16px 0px 0px;
    height: 60px;
    display: flex;
    overflow: hidden;
    transform: translateY(-15px);
    position: relative;
    z-index: 2;
    .price-left {
        .icon-sanjiao {
            font-size: 62px;
            color: #feb420;
            position: absolute;
            right: -23px;
            top: -4px;
            display: block;
        }
        .flex();
        padding-left: 16px;
        position: relative;
        width: calc(50% - 20px);

        .text1 {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
            line-height: 17px;
            margin-top: 5px;
        }

        .text2 {
            .flex();
            align-items: flex-end;
            img {
                width: 10px;
                height: 11px;
                margin-bottom: 3px;
                margin-left: 3px;
            }
            span {
                font-size: 32px;
                font-family: OSP-DIN, OSP;
                color: #ffffff;
                line-height: 24px;
                margin-left: 2px;
            }
        }
    }

    .price-right {
        flex-grow: 1;
        background: linear-gradient(270deg, #ffc61f 0%, #feb420 100%);
        .flex();
        justify-content: center;
        span {
            font-size: 12px;
            font-weight: bold;
            color: #ffffff;
            line-height: 17px;

            &.time {
                min-width: 22px;
                height: 22px;
                display: inline-block;
                color: #cc9163;
                line-height: 22px;
                text-align: center;
                background-color: #fff;
                border-radius: 4px;
                margin: 0 4px;
                padding: 0 2px;
                box-sizing: border-box;
                font-weight: bold;
            }

            &.time-box {
                display: inline-block;
                line-height: 22px;
                text-align: center;
                background-color: #fff;
                border-radius: 4px;
                margin: 0 4px;
                padding: 0 6px;
                font-weight: normal;
            }
        }
    }
}

.title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    line-height: 24px;
    padding: 1px 16px 10px;
}
.title-sub {
    height: 37px;
    .flex();
    justify-content: space-between;
    padding: 0 16px;
    font-size: 12px;
    color: #c8c9cc;
    line-height: 17px;
}
.detail {
    background-color: #f5f7fa;
    // padding-bottom: 50px;
    .bottom(50px);
}
.top {
    background-color: #fff;
}
.card + .card {
    margin-top: 10px;
}
.card {
    background-color: #fff;

    .card-title {
        .flex();
        padding: 12px 16px 10px;
        img {
            width: 18px;
            height: 18px;
        }
        span {
            font-size: 14px;
            font-weight: bold;
            color: #000000;
            line-height: 24px;
            margin-left: 10px;
        }
        .flex1 {
            flex-grow: 1;
        }
        .card-title-r {
            .flex();
            span {
                font-size: 12px;
                color: #939599;
                line-height: 17px;
            }
            img {
                width: 24px;
                height: 24px;
            }
        }
    }

    .card-content {
        padding: 0 16px 16px;

        .card-info {
            .flex();
            .text1 {
                font-size: 12px;
                color: #939599;
                line-height: 17px;
                display: inline-block;
                min-width: 48px;
            }
            .text2 {
                font-size: 12px;
                color: #000000;
                line-height: 17px;
                margin-left: 10px;
                flex-grow: 1;
            }

            .card-right {
                .flex();
                width: 100px;
                .text1 {
                    min-width: 36px;
                }
            }
        }

        .card-info + .card-info {
            margin-top: 6px;
        }

        /deep/&.card-detail {
            img {
                width: 100%;
                height: auto;
                display: block;
            }
        }
    }
}
.btn-bottom {
    height: 56px;
}

.fixed-list {
    padding: 9px 16px;
    .bottom(9px);
    position: fixed;
    z-index: 20;
    background-color: #fff;
    border-top: 1px solid #f2f4f5;
    bottom: 0;
    left: 0;
    right: 0;
    .flex();

    .help {
        .flex-col();
        align-items: center;
        color: #1a1a1a;
        img {
            width: 24px;
            height: 24px;
        }

        .icon-help {
            font-size: 24px;
            display: block;
        }
        div {
            font-size: 12px;
            line-height: 12px;
            transform: scale(0.8);
            margin-top: 2px;
        }
        margin-left: 8px;
    }
    .btn-list {
        flex-grow: 1;
        margin-left: 31px;
        .flex();
        .van-button {
            flex-grow: 1;
            font-weight: bold;
            /deep/.van-button__text {
                .flex-col();
                align-content: center;
            }
            .sub {
                font-size: 12px;
                font-weight: normal;
                transform: scale(0.83);
                text-align: center;
                .van-count-down {
                    color: #fff;
                }
                .flex();
                justify-content: center;
            }
            outline: none;
            border-radius: 0;
        }
        border-radius: 100px;
        overflow: hidden;
        border: 1px solid #3ab200;

        &.not {
            border-color: #939599;
            .van-button--disabled {
                border-color: #939599;
                background-color: #939599;
                color: #fff;
                opacity: 1;
            }
        }
    }
}

.record-item {
    .flex();
    font-size: 12px;
    color: #939599;
    line-height: 17px;
    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;
    }

    &:first-child {
        color: @prim;
    }
}

.dark {
    background-color: #0f0f0f;
    .fixed-list {
        background: #181818;
        border-color: #313233;
    }
    .help {
        color: #fff;
    }

    .top {
        background-color: #1c1c1c;
        .title {
            color: #fff;
        }
    }

    .card {
        background-color: #131313;
        .card-title {
            background-color: #1c1c1c;
            padding: 15px 16px 15px;
            span {
                color: #fff;
            }
        }
        .card-info {
            .text2 {
                color: #fff;
            }
        }
        .card-content {
            padding: 10px 16px;
        }
    }

    .btn-list {
        &.not {
            border-color: #303133;
            .van-button--disabled {
                border-color: #303133;
                background-color: #303133;
                color: #939599;
            }
        }
    }
}

.showPopup {
    .fixed-list {
        background-color: #fff;
        border-color: #f2f4f5;
        .help {
            color: #000;
        }
        .btn-list {
            &.not {
                border-color: #939599;
                .van-button--disabled {
                    border-color: #939599;
                    background-color: #939599;
                    color: #fff;
                }
            }
        }
    }
}

.isEnd {
    .price-bar {
        background: #939599;
        .price-left .icon-sanjiao {
            color: #f6f7fa;
        }
        .price-right {
            background: #f6f7fa;
            span {
                color: #939599;
            }
        }
    }
}
</style>
