<template>
    <div class="discover">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 0">
            <div class="top">
                <img src="../assets/nav_logo.png" class="logo" alt="" />

                <div class="search" @click="$router.push('/productSearch')">
                    <img src="../assets/icon-sosuo.png" alt="" />
                    <span>请输入</span>
                </div>
            </div>
        </van-sticky>

        <swiper pagination class="mySwiper" :autoplay="{ delay: 3500 }" v-if="banners.length > 0">
            <swiper-slide v-for="item in banners" :key="item.id">
                <img :src="item.pic" @click="goNext(item)" />
            </swiper-slide>
        </swiper>

        <van-grid :border="false">
            <van-grid-item text="精选推荐" :to="{ path: '/productList' }">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/info_icon_jingxuanxilie.png" />
                </template>
            </van-grid-item>
            <van-grid-item text="二手市场" :to="{ path: '/productList', query: { source: 'TRANSFER' } }">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/info_icon_ershoushichang.png" />
                </template>
            </van-grid-item>
            <van-grid-item text="铸造者" :to="{ path: '/creatorList' }">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/info_icon_zhuzaozhe.png" />
                </template>
            </van-grid-item>
            <van-grid-item text="拍卖系列" @click="wait">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/info_icon_paimaixilie.png" />
                </template>
            </van-grid-item>
            <!-- <van-grid-item text="铸造商店" @click="wait">
                <template v-slot:icon>
                    <img class="grid-img" src="../assets/info_icon_zhuzaoshangdian.png" />
                </template>
            </van-grid-item> -->
        </van-grid>

        <div class="box" v-if="box.length > 0">
            <page-title title="精选盲盒" :to="{ path: '/productList', query: { type: 'BLIND_BOX' } }"></page-title>
            <div class="box-list">
                <product-info v-for="(item, index) in box" :key="item.id" v-model:info="box[index]"></product-info>
            </div>
        </div>
        <div class="box" v-if="products.length > 0">
            <page-title
                title="本期推荐"
                :to="{ path: '/productList', query: { type: 'DEFAULT', source: 'OFFICIAL' } }"
            ></page-title>
            <div class="box-list">
                <template v-for="(item, index) in products" :key="item.id">
                    <product-info v-model:info="products[index]"></product-info
                ></template>
            </div>
        </div>
        <div class="box" v-if="hots.length > 0">
            <page-title
                title="最HOT收藏品"
                :to="{ path: '/productList', query: { type: 'DEFAULT', source: 'OFFICIAL' } }"
            ></page-title>
            <div class="box-list">
                <template v-for="(item, index) in hots" :key="item.id">
                    <product-info v-model:info="hots[index]"></product-info
                ></template>
            </div>
        </div>

        <div class="casting" v-if="miners.length > 0">
            <page-title title="最受欢迎铸造者" :to="{ path: '/creatorList' }"></page-title>
            <template v-for="(item, index) in miners" :key="index">
                <creator-info :rank="index < 3 ? index + 1 : 0" v-model:info="miners[index]"></creator-info>
            </template>
        </div>

        <div class="box">
            <page-title title="更多藏品" :isLink="false"></page-title>
            <van-list
                style="padding-bottom: 100px;"
                class="box-list"
                v-model:loading="loading"
                :finished="finished"
                finished-text=""
                @load="getList"
            >
                <template v-for="(item, index) in list" :key="item.id">
                    <product-info v-model:info="list[index]"></product-info>
                </template>
            </van-list>
        </div>

        <div class="tabbar-placeholder"></div>
    </div>
</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 ProductInfo from '../components/product/productInfo.vue';
import banner from '../mixins/banner';
import CreatorInfo from '../components/creator/CreatorInfo.vue';

export default {
    name: 'discover',
    inject: ['bar'],
    mixins: [banner],
    components: {
        Swiper,
        SwiperSlide,
        ProductInfo,
        CreatorInfo
    },
    data() {
        return {
            stiky: null,
            banners: [],
            box: [],
            products: [],
            hots: [],
            miners: [],
            list: [],
            loading: false,
            finished: false,
            page: 0,
            empty: false
        };
    },
    mounted() {
        this.getInit();
    },
    methods: {
        getInit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.getBanner();
            this.getProduct('BLIND_BOX').then(res => {
                this.box = res;
            });
            this.getProduct('DEFAULT', 'likes,desc;sort,desc;createdAt,desc').then(res => {
                this.hots = res;
            });
            this.getProduct().then(res => {
                this.products = res;
            });
            this.getMiner();
        },
        getProduct(type = '', sort = 'sort,desc') {
            return this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: 4,
                        query: {
                            type: type,
                            onShelf: true,
                            del: false,
                            source: 'OFFICIAL'
                        },
                        sort: sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    return Promise.resolve(res.content);
                });
        },
        getBanner() {
            this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'DISCOVER'
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.banners = res.content;
                    this.$toast.clear();
                });
        },
        getList() {
            if (this.page === 0) {
                this.list = [];
            }
            this.loading = true;
            this.finished = false;
            this.empty = false;
            this.$http
                .post(
                    '/collection/all',
                    {
                        page: this.page,
                        size: 20,
                        query: {
                            onShelf: true,
                            del: false,
                            source: 'OFFICIAL'
                        },
                        sort: 'sort,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.list = [...this.list, ...res.content];
                    this.empty = res.empty;
                    this.loading = false;
                    this.finished = res.last;
                    if (!res.last) {
                        this.page = this.page + 1;
                    }
                });
        },
        getMiner() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { hasRole: 'ROLE_MINTER' },
                        size: 5,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.miners = res.content;
                    // console.log(this.miners);
                });
        }
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 9px 16px;
    background-color: @bg;
    display: flex;
    align-items: center;
    .logo {
        width: 74px;
        height: 26px;
    }

    .search {
        flex-grow: 1;
        background-color: @bg3;
        display: flex;
        align-items: center;
        margin-left: 10px;
        padding: 4px 20px;
        border-radius: 21px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
        font-size: 14px;
        color: @text3;
        line-height: 24px;
    }
}

.discover {
    background-color: @bg3;
}

::v-deep(.mySwiper) {
    width: calc(100vw - 32px);
    height: calc(40vw - 12.8px);
    padding-top: 12px;

    .swiper-pagination {
        bottom: 6px;
    }

    .swiper-pagination-bullet {
        width: 6px;
        height: 2px;
        border-radius: 1px;
        background: #d7d7d7;
        margin: 0 3px;
    }

    .swiper-pagination-bullet-active {
        background: @prim;
    }
}

.swiper-slide {
    text-align: center;
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
.grid-img {
    display: block;
    width: 38px;
    height: 38px;
}
.van-grid {
    margin-top: 12px;
}
/deep/ .van-grid-item__content {
    padding: 14px 0 16px;
}
/deep/ .van-grid-item__text {
    color: #fff;
    font-size: @font1;
    line-height: 18px;
    margin-top: 4px;
}

.title {
    padding: 16px 20px 8px;
    color: @prim;
    font-size: @font3;
    font-weight: bold;
}

.box-list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 0 8px 2px;
}

/deep/.van-tab {
    color: #fff;
    flex: 0;
    padding: 20px;
    flex-shrink: 0;
    min-width: 74px;

    &.van-tab--active {
        color: @prim;
    }
}
.casting {
    padding-bottom: 10px;
}
</style>
