<template>
    <!-- 顶部导航栏 -->
    <!-- <TopNavigation/> -->
    <!-- 搜素 -->
    <!-- <van-pull-refresh
        success-text="加载成功"
        success-duration="1000"
        class="discover"
        v-model="isLoading"
        @refresh="onRefresh"
    > -->
    <div class="container">
        <div class="sticky sticky1" offset-top="safeTop">
            <div class="search_con">
                <div class="search" @click="$router.push('/productSearch')">
                    <img src="@assets/search-con@3x.png" alt="" class="search_img" />
                    <span class="search_text">请输入您想查找的藏品</span>
                </div>
            </div>
        </div>
        <!-- 商品展示 -->
        <div class="commodity_display" v-if="commodityDisplayList.length > 0">
            <swiper
                v-if="commodityDisplayList.length > 0"
                :slides-offset-after="0"
                slides-per-view="auto"
                centeredSlidesBounds
                @touchEnd="touchEndEvent"
                @slideChange="slideChangeEvent"
            >
                <swiper-slide
                    class="setting"
                    v-for="item in commodityDisplayList"
                    :key="item.id"
                    style="width: 88px"
                    @click="$router.push({ path: '/creatorDetail', query: { id: item.id } })"
                >
                    <van-image width="66px" height="66px" radius="33" :src="getImg(item.avatar)" fit="cover" />
                    <div class="setting_title">{{ item.nickname }}</div>
                </swiper-slide>

                <swiper-slide
                    class="slide-sek"
                    :style="{ width: `calc(100vw - ${commodityDisplayList.length * 84}px)` }"
                ></swiper-slide>

                <swiper-slide class="slide-more" @click="$router.push('/creatorList')">
                    <img src="@assets/slide-left.png" alt="" />
                    <span>查</span>
                    <span>看</span>
                    <span>更</span>
                    <span>多</span>
                </swiper-slide>
            </swiper>
            <!-- <div class="commodity_display_tip">
            <img :src="require('@assets/gengduo-con@3x.png')" alt="" class="commodity_display_tip_img"/>
            <div>左 滑 更 多</div>
        </div> -->
        </div>
        <div class="sticky sticky2">
            <van-tabs
                v-model:active="sort"
                :ellipsis="false"
                line-width="16"
                line-height="2"
                @click-tab="changeTab"
                @change="changeSort"
                :class="{ trans: source == 'TRANSFER' }"
            >
                <van-tab
                    :title="item.label"
                    :name="item.value"
                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
                    :key="index"
                    :lazy-render="false"
                    v-for="(item, index) in selectOptions"
                >
                    <!-- <template v-if="item.type === 'sales'" #title>
                        <div class="tab">
                            <span>{{ item.label }}</span>
                            <van-icon size="8" name="arrow-up" />
                            <van-icon size="8" name="arrow-down" />
                        </div>
                    </template> -->
                    <template v-if="item.type === 'select'" #title>
                        <div class="tab">
                            <span>{{ item.label }}</span>
                            <van-icon size="8" name="arrow-up" />
                            <van-icon size="8" name="arrow-down" />
                        </div>
                    </template>
                    <!-- <template v-if="item.type === 'views'" #title2>
                        <div class="tab">
                            <span>{{ item.label }}</span>
                            <van-icon size="8" name="arrow-up" />
                            <van-icon size="8" name="arrow-down" />
                        </div>
                    </template> -->
                </van-tab>
            </van-tabs>
        </div>
        <!-- <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> -->
        <div class="explore_content">
            <!-- 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> -->
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    @load="getData"
                    :finished-text="empty ? '' : '- 更多藏品敬请期待 -'"
                >
                    <div class="current_recommendation">
                        <template v-for="(item, index) in list" :key="item.id">
                            <CollectionList v-model:info="list[index]"></CollectionList
                        ></template>
                    </div>
                </van-list>
                <!-- <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>
    </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 list from '../mixins/list';
import { ref } from 'vue';
// import TopNavigation from "../components/TopNavigation.vue"
export default {
    name: 'discover',
    // inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [product, banner, list],
    components: {
        CollectionList,
        Swiper,
        SwiperSlide
    },
    setup() {
        const container = ref(null);
        return { container };
    },
    inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'bodyScroll'],
    // 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: '藏品展览',
                //     titletwo: '介绍介绍介绍介绍'
                // }
            ],
            selectOptions: [
                // {
                //     label: '全部',
                //     value: 'id,desc'
                // },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                // {
                //     label: '销量',
                //     value: 'likes',
                //     type: 'select'
                // },
                {
                    label: '价格',
                    value: 'price',
                    type: 'select'
                }
                // {
                //     label: '浏览量',
                //     value: 'view,desc',
                //     type: 'select'
                // }
            ],
            // 商品展示列表
            commodityDisplayList: [],
            // 本期推荐列表
            list: [],
            // 最HOT收藏品
            hotCollectionList: [],
            url: '/collection/all',
            sortDes: 'asc',
            sortPre: '',
            scrollTop: 0,
            isEnd: false
        };
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        this.getInit();
    },
    methods: {
        touchEndEvent(swiper, e) {
            console.log(this.isEnd);
            if (this.isEnd) {
                this.$router.push('/creatorList');
            }
        },
        slideChangeEvent(swiper) {
            this.isEnd = swiper.isEnd;
        },
        slideChangeTransitionStartEvent(e) {
            console.log(e);
        },
        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
        // },
        changeSort(name) {
            // if(name!='price'&&name!='likes'){
            //     this.sortDes = 'asc'
            // }
        },
        changeTab(info) {
            if (this.sortPre != info.name) {
                this.sortDes = 'asc';
            }
            this.sortPre = info.name;
            this.$nextTick(() => {
                if (info.name === 'price') {
                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                }
                if (info.name === 'likes') {
                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                }
                this.getData(true);
            });
        },
        beforeData() {
            let sort = this.sort;
            if (sort == 'price') {
                sort = 'price,' + this.sortDes;
            }
            if (sort == 'likes') {
                sort = 'likes,' + this.sortDes;
            }
            return {
                query: {
                    onShelf: true,
                    type: this.type,
                    // source: this.source,
                    source: 'OFFICIAL',
                    minterId: this.minterId,
                    del: false,
                    salable: this.salable,
                    scanCode: false
                },
                search: this.search,
                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
            };
        },
        // 精品推荐跳转
        showJump(index) {
            if (index == 0) {
                // this.$router.push( "/productList")
                this.$router.push({ path: '/productList', query: { title: '精选推荐' } });
            } else {
                this.wait();
            }
        },
        // 获取图片展示数据
        getBanner() {
            this.$http
                .post(
                    '/user/all',
                    {
                        query: {
                            minter: true
                        },
                        sort: 'id,desc'
                    },
                    { body: 'json' }
                )
                .then(res => {
                    this.commodityDisplayList = res.content;
                    this.$toast.clear();
                });
        },
        // 获取本期推荐的列表
        getProduct(type = '', sort = 'sort,desc', size = 8) {
            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.path === '/productDetail') {
            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>
.scroll-wrapper {
    background: #201B15 !important;
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
.discover {
    background: #201B15;
}
.search_con {
    padding: 9px 15px 20px 15px;
    box-sizing: border-box;
    background: #201B15;
    // background: #201B15;
    .search {
        width: 100%;
        height: 38px;
        background: #2F2519;
        border-radius: 4px;
        padding: 7px 0 7px 35px;
        box-sizing: border-box;
        position: relative;
        line-height: 24px;
        .search_img {
            width: 24px;
            height: 24px;
            position: absolute;
            left: 10px;
            top: 7px;
        }
        .search_text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5f646f;
        }
    }
}
.commodity_display {
    padding-bottom: 20px;
}
.setting {
    // height: 94px;
    // padding-right: 24px;
    // padding-bottom: 20px;
    // background-color: #201B15;
    .setting_title {
        width: 68px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 6px;
        // height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        text-align: center;
        opacity: 0.5;
    }
}
.setting:last-child {
    padding-right: 0px;
}
.slide-more {
    width: 30px;
    height: 94px;
    background: #2F2519;
    border-radius: 8px 0px 0px 8px;
    font-size: 11px;
    color: #ffffff44;
    line-height: 14px;
    .flex-col();
    align-items: center;
    justify-content: center;
    // position: absolute;
    // right: 0;
    // top: 50%;
    // transform: translateY(-50%);
    img {
        width: 12px;
        height: 12px;
        margin-bottom: 3px;
    }
}
.current_recommendation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.commodity_display {
    padding-left: 15px;
    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%;
}
/deep/ .van-tabs--line .van-tabs__wrap {
    height: 40px;
    margin-bottom: 8px;
    .van-tab--active {
        font-weight: 500;
        color: #f2d5b2 !important;
    }
    .van-tab {
        // margin-right: 32px;
        // width: 20%;
        flex: 0 !important;
        font-size: 16px;
        color: rgba(255, 255, 255, 0.5);
    }
    // .van-tab:nth-of-type(4){
    //     margin-right: 0px;
    // }
    .tab {
        position: relative;
        padding-right: 14px;
        box-sizing: border-box;
        .van-icon {
            position: absolute;
            right: 0;

            &.van-icon-arrow-down {
                top: 8px;
            }

            &.van-icon-arrow-up {
                bottom: 8px;
            }
        }
    }
}
/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
    padding: 0px 15px !important;
    border: none !important;
    // justify-content: space-between;
}
/deep/ .van-tabs__line {
    width: 0px !important;
    height: 0px !important;
}
/deep/ .van-tab--grow {
    padding: 0px !important;
    margin-right: 50px;
}
.explore_content {
    width: 100%;
    background: #201B15;
    padding: 0px 15px 15px 15px;
    // margin-top: 44px;
    box-sizing: border-box;

    // .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: 8px;
                .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: 80px;
    }
}
// .commodity_display {
//     display: flex;
//     justify-content: space-between;
//     /deep/ .swiper-container{
//         margin-left: 0;
//         margin-right: 0;
//     }
//     .commodity_display_tip {
//         margin-left: 22px;
//         width: 30px;
//         padding: 11px 9px 0px;
//         box-sizing: border-box;
//         height: 94px;
//         background: #2F2519;
//         border-radius: 8px 0px 0px 8px;
//         font-size: 11px;
//         font-family: PingFangSC-Regular, PingFang SC;
//         font-weight: 400;
//         color: rgba(255, 255, 255, 0.3);
//         line-height: 14px;
//         .commodity_display_tip_img{
//             width: 12px;
//             height: 12px;
//         }
//     }
// }

.sticky {
    position: sticky;
    z-index: 20;
    background: #201B15;
    top: 0;

    &.sticky2 {
        top: calc(var(--safe-top) + 67px);
    }

    &.sticky1 {
        padding-top: var(--safe-top);
    }
}

.container {
    padding-top: 0 !important;
}
</style>