<template>
    <!-- 顶部导航栏 -->
    <!-- <TopNavigation/> -->
    <!-- 搜素 -->
    <van-pull-refresh
        success-text="加载成功"
        success-duration="1000"
        class="discover"
        v-model="isLoading"
        @refresh="onRefresh"
    >
        <van-sticky :offset-top="0">
            <div class="search_con">
                <div class="search" @click="$router.push('/productSearch')">
                    <img src="@assets/icon-sosuo.png" alt="" class="search_img" />
                    <span class="search_text">搜索你想要的</span>
                </div>
            </div>
        </van-sticky>
        <div
            class="explore_content"
            :class="
                (currentRecommendationList.length < 3 && hotCollectionList.length == 0) ||
                (currentRecommendationList.length == 0 && hotCollectionList.length < 3)
                    ? 'shop_list_one'
                    : ''
            "
        >
            <!-- 商品展示 -->
            <div class="commodity_display">
                <!-- <van-swipe :loop="false" :width="94" :height="90" :show-indicators="false">
                <van-swipe-item v-for="(item, index) in commodityDisplayList" :key="index">
                    <van-image width="94px" height="90px" :src="getImg(item.pic)" fit="cover" />
                </van-swipe-item>
            </van-swipe> -->
                <swiper v-if="commodityDisplayList.length > 0" slides-per-view="auto">
                    <swiper-slide
                        class="setting"
                        v-for="item in commodityDisplayList"
                        :key="item.id"
                        style="width: 94px"
                    >
                        <van-image width="94px" height="90px" radius="8" :src="getImg(item.pic)" fit="cover" @click="goNext(item)"/>
                    </swiper-slide>
                </swiper>
            </div>
            <!-- banner图展示 -->
            <div class="banner">
                <div class="banner_con" v-for="(item, index) in bannerList" :key="index" @click="showJump(index)">
                    <img :src="item.img" alt="" class="banner_con_img" />
                    <div class="banner_con_title">
                        <div class="banner_con_titleone">{{ item.titleone }}</div>
                        <!-- <div class="banner_con_titletwo">{{ item.titletwo }}</div> -->
                    </div>
                </div>
            </div>
            <div class="content_list">
                <!-- 本期推荐 -->
                <page-title
                    title="本期推荐"
                    :to="{ path: '/productList', query: { type: 'DEFAULT', title: '本期推荐' } }"
                >
                </page-title>
                <div class="current_recommendation">
                    <template v-for="(item, index) in currentRecommendationList" :key="item.id">
                        <CollectionList v-model:info="currentRecommendationList[index]"></CollectionList
                    ></template>
                </div>
                <!-- <List :dataList="currentRecommendationList"></List> -->
                <!-- 最HOT收藏品 -->
                <page-title
                    title="最HOT收藏品"
                    :to="{ path: '/productList', query: { type: 'DEFAULT', title: '最HOT收藏品' } }"
                >
                </page-title>
                <div class="current_recommendation">
                    <template v-for="(item, index) in hotCollectionList" :key="item.id">
                        <CollectionList v-model:info="hotCollectionList[index]"></CollectionList
                    ></template>
                </div>
            </div>
        </div>
    </van-pull-refresh>
</template>

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

import 'swiper/swiper.min.css';
import 'swiper/swiper-bundle.min.css';
// 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';
import product from '../mixins/product';
import CollectionList from '../components/CollectionList.vue';
import banner from '../mixins/banner';
// import TopNavigation from "../components/TopNavigation.vue"
export default {
    // name: 'discover',
    // inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [product,banner],
    components: {
        CollectionList,
        Swiper,
        SwiperSlide
    },
    // components: {
    //     Swiper,
    //     SwiperSlide,
    //     ProductInfo,
    //     CreatorInfo
    // },
    data() {
        return {
            page: 0,
            isLoading: true,
            bannerList: [
                {
                    img: require('@assets/icon-jingxuan.png'),
                    titleone: '精选推荐'
                    // titletwo: '介绍介绍介绍介绍'
                },
                {
                    img: require('@assets/icon-zhanlan.png'),
                    titleone: '藏品展览'
                }
            ],
            // 商品展示列表
            commodityDisplayList: [],
            // 本期推荐列表
            currentRecommendationList: [],
            // 最HOT收藏品
            hotCollectionList: []
        };
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        this.getInit();
    },
    methods: {
        getInit() {
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            });
            this.getBanner();
            this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
                this.currentRecommendationList = res;
            });
            this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 4).then(res => {
                this.hotCollectionList = res;
            });
            // this.getMiner()
        },
        // 点赞的切换
        // give(index){
        //     let currentRecommendationList = this.currentRecommendationList
        //     currentRecommendationList[index].liked = !currentRecommendationList[index].liked
        // },
        // 精品推荐跳转
        showJump(index) {
            if (index == 0) {
                // this.$router.push( "/productList")
                this.$router.push({ path: '/productList', query: { title: '精选推荐' } });
            } else {
                this.$router.push({ path: '/hopeMarket', query: { title: '藏品展览' } });
                // this.wait();
            }
        },
        // 获取图片展示数据
        getBanner() {
            this.$http
                .post(
                    '/banner/all',
                    {
                        query: {
                            type: 'DISCOVER',
                            del: false
                        },
                        sort: 'sort,asc;createdAt,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.commodityDisplayList = res.content;
                    this.$toast.clear();
                });
        },
        // 获取本期推荐的列表
        getProduct(type = '', sort = 'sort,desc', size = 4) {
            let page = this.page;
            return this.$http
                .post(
                    '/collection/all',
                    {
                        page: 0,
                        size: size,
                        query: {
                            type: type,
                            onShelf: true,
                            del: false
                        },
                        sort
                    },
                    { body: 'json' }
                )
                .then(res => {
                    return Promise.resolve(res.content);
                    // this.shopList = [...this.shopList, ...res.content];
                });
        },
        getMiner() {
            this.$http
                .post(
                    '/user/all',
                    {
                        page: 0,
                        query: { minter: true },
                        size: 5,
                        sort: 'sales,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    // this.miners = res.content;
                    console.log('12354664', res.content);
                });
        },
        onRefresh() {
            this.page = 0;
            Promise.all([this.getInit(), this.$store.dispatch('getUsedBuy')]).then(res => {
                this.isLoading = false;
            });
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    }
    // beforeRouteLeave(to, from, next) {
    //     if (!to.meta.menuPage) {
    //         this.scrollTop = this.scrollWrapper.value.scrollTop;
    //         this.setKeeps(['index', 'discover']);
    //     } else {
    //         this.scrollTop = 0;
    //         this.setKeeps(['index', 'discover'], false);
    //     }
    //     next();
    // }
};
// mounted() {
//     this.$store.dispatch('getUsedBuy');
//     this.getInit();
// },
// methods: {
//     getInit() {
//         this.$toast.loading({
//             message: '加载中...',
//             forbidClick: true
//         });
//         this.getBanner();
//         this.getProduct('BLIND_BOX', this.sortOptions['精选盲盒']).then(res => {
//             this.box = res;
//         });
//         this.getProduct('DEFAULT', this.sortOptions['最HOT收藏品'], 'TRANSFER', 4).then(res => {
//             this.hots = res;
//         });
//         this.getProduct('DEFAULT', this.sortOptions['本期推荐']).then(res => {
//             this.products = res;
//         });
//         this.getMiner();
//     },
//     getProduct(type = '', sort = 'sort,desc', source = 'OFFICIAL', size = 4) {
//         return this.$http
//             .post(
//                 '/collection/all',
//                 {
//                     page: 0,
//                     size: size,
//                     query: {
//                         type: type,
//                         onShelf: true,
//                         del: false,
//                         source: source
//                     },
//                     sort: sort
//                 },
//                 { body: 'json' }
//             )
//             .then(res => {
//                 return Promise.resolve(res.content);
//             });
//     },
//     getBanner() {
//         this.$http
//             .post(
//                 '/banner/all',
//                 {
//                     query: {
//                         type: 'DISCOVER',
//                         del: false
//                     },
//                     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,TRANSFER'
//                     },
//                     sort: this.sortOptions['更多藏品']
//                 },
//                 { 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: { minter: true },
//                     size: 5,
//                     sort: 'sales,desc'
//                 },
//                 { body: 'json' }
//             )
//             .then(res => {
//                 this.miners = res.content;
//                 // console.log(this.miners);
//             });
//     }
// },
// activated() {
//     this.$nextTick(() => {
//         this.changeScroll(this.scrollTop);
//     });
// },
// beforeRouteLeave(to, from, next) {
//     if (!to.meta.menuPage) {
//         this.scrollTop = this.scrollWrapper.value.scrollTop;
//         this.setKeeps(['index', 'discover']);
//     } else {
//         this.scrollTop = 0;
//         this.setKeeps(['index', 'discover'], false);
//     }
//     next();
// }
</script>

<style lang="less" scoped>
.shop_list_one {
    height: 100%;
    position: absolute;
}
.discover{
    background: #0f0f27;
}
.search_con {
    padding: 12px 16px 24px 16px;
    box-sizing: border-box;
    background: #0f0f27;
    .search {
        width: 100%;
        height: 32px;
        background: #29293f;
        border-radius: 4px;
        padding: 5px 0 4px 33px;
        box-sizing: border-box;
        position: relative;
        .search_img {
            width: 16px;
            height: 16px;
            position: absolute;
            left: 10px;
            top: 6px;
        }
        .search_text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5f646f;
        }
    }
}
.setting {
    height: 90px;
    margin-right: 16px;
}
.setting:last-child {
    margin-right: 0px;
}
.current_recommendation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.explore_content {
    width: 100%;
    background: #0f0f27;
    padding: 0px 16px 16px 16px;
    // margin-top: 44px;
    box-sizing: border-box;
    /deep/ .van-cell__title span {
        color: #ffffff;
    }
    /deep/ .van-cell {
        padding: 4px 0px 8px 2px;
        box-sizing: border-box;
    }
    /deep/ .van-swipe__track {
        width: 100%;
    }
    .commodity_display {
        width: 100%;
        margin-bottom: 24px;
        display: flex;
        .van-swipe {
            width: 100%;
        }
        .van-swipe-item {
            margin-right: 16px;
        }
        .commodity_display_img {
            width: 94px;
            height: 90px;
        }
        // .commodity_display_img:last-of-type{
        //     margin-right: 50px;
        // }
    }
    .banner {
        width: 100%;
        height: 74px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        .banner_con {
            width: 48%;
            height: 74px;
            border-radius: 8px;
            padding: 10px 0px 8px 8px;
            display: flex;
            box-sizing: border-box;
            .banner_con_img {
                width: 56px;
                height: 56px;
                margin-right: 4px;
            }
            .banner_con_title {
                padding-top: 14px;
                .banner_con_titleone {
                    font-size: 16px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                }
                .banner_con_titletwo {
                    font-size: 10px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(245, 247, 250, 0.8);
                }
            }
        }
    }
    .banner_con:first-child {
        background: linear-gradient(134deg, #597cfa 0%, #57b7ff 100%);
    }
    .banner_con:last-child {
        background: linear-gradient(134deg, #28b6ff 0%, #597ffa 100%);
    }
    .hotCollection {
        margin-bottom: 50px;
    }
    .content_list {
        margin-bottom: 40px;
    }
}
</style>
