<template>
    <van-pull-refresh
        class="auction"
        success-text="加载成功"
        success-duration="1000"
        :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }"
        v-model="isLoading"
        @refresh="onRefresh"
        pageType="light"
    >
        <van-sticky :offset-top="barHeight">
            <div class="search-bar">
                <span class="icon">拍卖中心</span>
                <div class="search-input" @click="$router.push('/' + $route.params.companyId + '/auctionSearch')">
                    <img src="../../assets/icon-sosuo1.png" alt="" />
                    <span>搜索你要的精彩</span>
                </div>
            </div>
        </van-sticky>

        <swiper v-if="banners.length > 0" pagination :space-between="16" class="mySwiper" :autoplay="{ delay: 3500 }">
            <swiper-slide v-for="item in banners" :key="item.id">
                <van-image
                    width="calc(100vw - 32px)"
                    height="140px"
                    :src="getImg(item.pic)"
                    fit="cover"
                    @click="goNext(item)"
                    radius="16"
                />
            </swiper-slide>
        </swiper>
        <van-grid :border="false">
            <van-grid-item
                :icon="require('../../assets/yikou.png')"
                :to="{
                    path: '/' + $route.params.companyId + '/auctionList',
                    query: { status: 'ONGOING', pageName: '随时拍' }
                }"
                text="随时拍"
            />
            <van-grid-item
                :icon="require('../../assets/suishi.png')"
                :to="{
                    path: '/' + $route.params.companyId + '/auctionList',
                    query: { hasFixedPrice: true, pageName: '一口价' }
                }"
                text="一口价"
            />
            <van-grid-item
                :icon="require('../../assets/shuzi.png')"
                :to="{
                    path: '/' + $route.params.companyId + '/auctionList',
                    query: { auctionType: 'NFT', pageName: '数字艺术' }
                }"
                text="数字艺术"
            />
            <van-grid-item @click="wait" :icon="require('../../assets/zhengji.png')" text="拍卖征集" />
        </van-grid>
        <van-tabs v-model:active="auctionType" @change="getData(true)">
            <van-tab title="官方拍卖" name="OFFICIAL"></van-tab>
            <van-tab title="数字艺术" name="NFT"></van-tab>
            <van-tab title="藏传文玩" name="ENTITY"></van-tab>
        </van-tabs>
        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
            <template v-for="(item, index) in list" :key="index">
                <auction-info-large v-model:info="list[index]" v-if="auctionType === 'OFFICIAL'"></auction-info-large>
                <auction-info v-model:info="list[index]" v-else></auction-info>
            </template>
            <!-- <template v-for="i in 10" :key="i">
                <auction-info></auction-info>
            </template> -->

            <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何藏品哦~" />
        </van-list>
    </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';

// install Swiper modules
SwiperCore.use([Pagination, Autoplay]);
import list from '../../mixins/list';
import auctionInfo from '../../components/auction/info.vue';
import auctionInfoLarge from '../../components/auction/infoLarge.vue';
import banner from '../../mixins/banner';
export default {
    name: 'auctionHome',
    mixins: [list, banner],
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
    components: {
        Swiper,
        SwiperSlide,
        auctionInfo,
        auctionInfoLarge
    },
    data() {
        return {
            auctionType: 'OFFICIAL',
            url: '/auctionActivity/all',
            list: [],
            banners: [],
            scrollTop: 0
        };
    },
    mounted() {
        this.getBanner();
    },
    methods: {
        getBanner() {
            return this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'AUCTION',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    this.$toast.clear();
                });
        },
        beforeData() {
            let source = '';
            let auctionType = '';
            if (this.auctionType === 'OFFICIAL') {
                source = 'OFFICIAL';
            } else {
                auctionType = this.auctionType;
            }
            return {
                query: {
                    auctionType: auctionType,
                    status: 'NOTSTARTED,ONGOING',
                    source: source
                },
                sort: 'id,desc'
            };
        },
        onRefresh() {
            Promise.all([this.getBanner(), this.getData(true)]).then(() => {
                this.isLoading = false;
            });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === 'auctionDetail') {
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['auctionHome']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['auctionHome'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.auction {
    position: relative;
}
.search-bar {
    padding: 9px 16px;
    .flex();
    .icon {
        font-size: 16px;
        font-weight: bold;
        color: #000000;
        line-height: 24px;
    }

    .search-input {
        height: 32px;
        background: #f5f7fa;
        border-radius: 8px;
        flex-grow: 1;
        margin-left: 10px;
        .flex();
        padding: 0 16px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
        span {
            font-size: 14px;
            color: #c8c9cc;
            line-height: 24px;
        }
    }
}

/deep/.mySwiper {
    margin: 11px 16px;
    .swiper-pagination {
        overflow: hidden;

        .swiper-pagination-bullet {
            width: 16px;
            height: 4px;
            // border-radius: 2px;
            margin: 0 0;
            background-color: #fff;
            opacity: 0.5;

            &.swiper-pagination-bullet-active {
                background-color: @prim;
                opacity: 1;
            }
            border-radius: 0;

            &:first-child {
                border-radius: 2px 0 0 2px;
            }
            &:last-child {
                border-radius: 0 2px 2px 0;
            }
        }
    }
}

/deep/.van-grid {
    .van-grid-item__content {
        padding: 10px 16px;
    }
    .van-icon__image {
        width: 32px;
        height: 32px;
    }
    .van-grid-item__text {
        margin-top: 4px;
        font-size: 12px;
        color: #000;
    }
}

/deep/.van-tabs {
    padding: 0 16px;
    position: relative;

    .van-tab {
        margin-right: 30px;
        .van-tab__text {
            font-size: 16px;
        }

        &.van-tab--active {
            .van-tab__text {
                color: #000;
                font-weight: bold;
            }
        }
    }
    .van-tabs__nav--line {
        padding-bottom: 0;
    }
    .van-tabs__line {
        width: 16px;
        height: 2px;
        bottom: 0px;
    }
}

.van-list {
    padding: 8px;
    background: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 40px, #f5f5f5 100%);
    min-height: calc(100vh - 156px);
}
</style>
