<template>
    <!-- <div class="follow">
        <div class="swiperContent" ref="swiperContent">
            <swiper
                pagination
                :slidesPerView="'auto'"
                class="mySwiper"
                :spaceBetween="20"
                :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, '&source=TRANSFER')" />
                </swiper-slide>
            </swiper>
        </div>

        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? 46 : 0">
            <div class="top" v-if="!minterId">
                <div class="name">{{ title || pageName }}</div>
                <img src="@assets/icon-sosuo.png" alt="" @click="goSearch" class="search" />
            </div>
            <van-tabs
                v-model:active="sort"
                :ellipsis="false"
                line-width="16"
                line-height="2"
                @click-tab="changeTab"
                :class="{ trans: source == 'TRANSFER' }"
            >
                <van-tab
                    :title="item.label"
                    :name="item.value"
                    :title-class="item.type === 'select' && sortDes ? sortDes : ''"
                    :key="index"
                    v-for="(item, index) in selectOptions"
                >
                    <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>
                </van-tab>
            </van-tabs>
            <van-button
                @click="changeSort"
                v-if="source == 'TRANSFER' && !title"
                class="sala"
                color="#F5F7FA"
                type="primary"
                size="small"
                icon="arrow-down"
                icon-position="right"
                round
                >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
            >
        </van-sticky>

        <van-action-sheet
            v-model:show="showAction"
            @select="selectAction"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
        />

        <van-list v-model:loading="loading" :finished="finished" finished-text="- 更多藏品敬请期待 -" @load="getData">
            <template v-for="(item, index) in showList" :key="index">
                <product-info v-model:info="list[index]" @update:info="init"></product-info>
            </template>

            <van-empty
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                v-if="empty"
                description="没有任何藏品哦~"
            />
        </van-list>
    </div> -->
    <!-- 顶部导航栏 -->
    <!-- <TopNavigation/> -->
    <div class="content">
        <van-sticky ref="top" class="list-top" :offset-top="bar.value && bar.value.show ? barHeight : 0">
            <div class="content_top">
                <div class="selected_recommendations">
                    <div class="selected_recommendations_title">{{ title || pageName }}</div>
                    <img
                        :src="require('@assets/icon-sosuo.png')"
                        alt=""
                        class="selected_recommendations_img"
                        @click="goSearch"
                    />
                </div>
                <div class="recommended_switching">
                    <!-- 标签页展示切换 -->
                    <van-tabs
                        v-model:active="sort"
                        :ellipsis="false"
                        line-height="2"
                        title-active-color="#28B6FF"
                        @click-tab="changeTab"
                        :class="{ trans: source == 'TRANSFER' }"
                    >
                        <van-tab
                            :title="item.label"
                            :name="item.value"
                            :title-class="item.type === 'select' && sortDes ? sortDes : ''"
                            :key="index"
                            v-for="(item, index) in selectOptions"
                        >
                            <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>
                        </van-tab>
                    </van-tabs>
                    <!-- <div class="label_tabs">
                        <div :class="tabLabel == 'whole'?'label_selected':'label_not_selected'" @click="tabLabel='whole'" class="label_tab">全部</div>
                        <div :class="tabLabel == 'onSale'?'label_selected':'label_not_selected'" @click="tabLabel='onSale'" class="label_tab">最新</div>
                        <div :class="tabLabel == 'showOnly'?'label_selected':'label_not_selected'" @click="tabLabel='showOnly'" class="label_tab">最热</div>
                        <div :class="tabLabel == 'notShown'?'label_selected':'label_not_selected'" @click="tabLabel='notShown'" class="label_tab">价格
                            <div class="price_symbol" v-if="tabLabel != 'notShown'">
                                <img :src="require('@assets/icon-arrow-down.png')" alt="" class="price_symbol_one price_symbol_img">
                                <img :src="require('@assets/icon-arrow-down.png')" alt="" class="price_symbol_img">
                            </div>
                            <div class="price_symbol" v-else>
                                <img :src="require('@assets/iocn_zhankai.png')" alt="" class="price_symbol_img">
                                <img :src="require('@assets/iocn_zhankai.png')" alt="" class="price_symbol_img price_symbol_one">
                            </div>
                        </div>
                    </div> -->
                    <div class="sorting_selection" @click="changeSort">
                        <div class="sorting_selection_con">
                            {{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}
                        </div>
                        <img :src="require('@assets/icon-arrow-down.png')" alt="" class="sorting_selection_img" />
                    </div>
                </div>
            </div>
        </van-sticky>
        <van-action-sheet
            v-model:show="showAction"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
            @select="selectAction"
        />
        <van-list
            style="padding-bottom: 1px"
            v-model:loading="loading"
            :finished="finished"
            finished-text="- 更多藏品敬请期待 -"
            @load="getData"
        >
            <div class="selected_recommendations_list">
                <template v-for="(item, index) in showList" :key="item.id">
                    <CollectionList v-model:info="list[index]"></CollectionList
                ></template>
            </div>
            <van-empty
                :image="require('@assets/kong_png_yongyoude  (1).png')"
                v-if="empty"
                description="没有任何藏品哦~"
            />
        </van-list>
    </div>
</template>

<script>
// import TopNavigation from "../../components/TopNavigation.vue"
import CollectionList from '../../components/CollectionList.vue';
import list from '../../mixins/list';
// import { ref } from 'vue';
export default {
    mixins: [list],
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
    components: {
        CollectionList
    },
    data() {
        return {
            list: [],
            empty: false,
            beforeSort: '',
            sort: 'id,desc',
            sortDes: '',
            type: '',
            source: '',
            minterId: '',
            url: '/collection/all',
            selectOptions: [
                {
                    label: '全部',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                {
                    label: '最热',
                    value: 'likes,desc'
                },
                {
                    label: '价格',
                    value: 'price',
                    type: 'select'
                }
            ],
            title: '',
            salable: '',
            scrollTop: 0,
            showAction: false
        };
    },
    computed: {
        pageName() {
            return this.getLabelName(this.source, this.sourceOptions) || this.getLabelName(this.type, this.typeOptions);
        },
        showList() {
            let list = [];
            let allList = [...this.list];
            allList.forEach(item => {
                let info = list.find(_item => {
                    return _item.id === item.id;
                });
                if (!info) {
                    list.push(item);
                }
            });
            return list;
        },
        actions() {
            let list = [{ name: '综合排序' }, { name: '在售中' }, { name: '仅展示' }];
            if (this.salable === '') {
                list[0].color = '#28B6FF';
            }
            if (this.salable === true) {
                list[1].color = '#28B6FF';
            }
            if (this.salable === false) {
                list[2].color = '#28B6FF';
            }
            return list;
        }
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
        if (this.$route.query.source) {
            this.source = this.$route.query.source;
            if (this.source === 'TRANSFER') {
                this.salable = true;
                // this.getBanner();

                if (this.isLogin) {
                    this.$store.dispatch('getUserInfo').then(res => {
                        if (!res.riskWarning) {
                            this.$dialog.alert({
                                title: '风险提示声明',
                                message:
                                    '传奇数藏平台发售的数字藏品具备收藏欣赏或版权价值，传奇数藏发售的藏品首发价格为官方指导价，传奇数藏对藏品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。',
                                confirmButtonText: '已阅读并同意'
                            });
                            this.updateUser({ riskWarning: true }, false);
                        }
                    });
                }
            } else {
                this.banners = [];
            }
        }

        if (this.$route.query.minterId) {
            this.minterId = this.$route.query.minterId;
        }
        if (this.$route.query.title) {
            this.title = this.$route.query.title;
        }
    },
    methods: {
        changeSort() {
            this.showAction = true;
        },
        selectAction(action) {
            if (action.name == '综合排序') {
                this.salable = '';
            }
            if (action.name == '在售中') {
                this.salable = true;
            }
            if (action.name == '仅展示') {
                this.salable = false;
            }
            this.getData(true);
        },
        changeTab(info) {
            this.$nextTick(() => {
                if (info.name === 'price') {
                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                }
                this.getData(true).then(() => {
                    // this.changeScroll(this.$refs.swiperContent.offsetHeight);
                });
            });
        },
        beforeData() {
            let sort = this.sort;
            if (sort == 'price') {
                sort = 'price,' + this.sortDes;
            }
            return {
                query: {
                    type: this.type,
                    source: this.source,
                    onShelf: true,
                    del: false,
                    minterId: this.minterId,
                    salable: this.salable
                },
                sort: sort
            };
        },
        goSearch() {
            let url = '/productSearch';
            if (this.type) {
                url += '?type=' + this.type;
            }
            if (this.source) {
                url += '?source=' + this.source;
            }
            this.$router.push(url);
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
            setTimeout(() => {
                this.sort = this.beforeSort;
            }, 1000);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === 'productDetail') {
            this.beforeSort = this.sort;
            this.scrollTop = this.scrollWrapper.value.scrollTop;
            this.setKeeps(['productList']);
        } else {
            this.beforeSort = '';
            this.scrollTop = 0;
            this.setKeeps(['productList'], false);
        }
        next();
    }
};
// 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 product from '../../mixins/product';
// import list from '../../mixins/list';
// import banner from '../../mixins/banner';
// export default {
//     name: 'productList',
//     components: { ProductInfo, Swiper, SwiperSlide },
//     inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
//     mixins: [product, list, banner],
//     data() {
//         return {
//             list: [],
//             empty: false,
//             beforeSort: '',
//             sort: 'id,desc',
//             sortDes: '',
//             type: '',
//             source: '',
//             minterId: '',
//             selectOptions: [
//                 {
//                     label: '全部',
//                     value: 'id,desc'
//                 },
//                 {
//                     label: '最新',
//                     value: 'createdAt,desc'
//                 },
//                 {
//                     label: '最热',
//                     value: 'likes,desc'
//                 },
//                 {
//                     label: '价格',
//                     value: 'price',
//                     type: 'select'
//                 }
//             ],
//             url: '/collection/all',
//             title: '',
//             salable: '',
//             scrollTop: 0,
//             showAction: false,
//             banners: []
//         };
//     },
//     computed: {
//         pageName() {
//             return this.getLabelName(this.source, this.sourceOptions) || this.getLabelName(this.type, this.typeOptions);
//         },
//         showList() {
//             let list = [];
//             let allList = [...this.list];
//             allList.forEach(item => {
//                 let info = list.find(_item => {
//                     return _item.id === item.id;
//                 });
//                 if (!info) {
//                     list.push(item);
//                 }
//             });
//             return list;
//         },
//         actions() {
//             let list = [{ name: '综合排序' }, { name: '在售中' }, { name: '仅展示' }];
//             if (this.salable === '') {
//                 list[0].color = this.$colors.prim;
//             }
//             if (this.salable === true) {
//                 list[1].color = this.$colors.prim;
//             }
//             if (this.salable === false) {
//                 list[2].color = this.$colors.prim;
//             }
//             return list;
//         }
//     },
//     mounted() {
//         this.$store.dispatch('getUsedBuy');
//         if (this.$route.query.type) {
//             this.type = this.$route.query.type;
//         }

//         if (this.$route.query.source) {
//             this.source = this.$route.query.source;
//             if (this.source === 'TRANSFER') {
//                 this.salable = true;
//                 this.getBanner();

//                 if (this.isLogin) {
//                     this.$store.dispatch('getUserInfo').then(res => {
//                         if (!res.riskWarning) {
//                             this.$dialog.alert({
//                                 title: '风险提示声明',
//                                 message:
//                                     '传奇数藏平台发售的数字藏品具备收藏欣赏或版权价值，传奇数藏发售的藏品首发价格为官方指导价，传奇数藏对藏品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。',
//                                 confirmButtonText: '已阅读并同意'
//                             });
//                             this.updateUser({ riskWarning: true }, false);
//                         }
//                     });
//                 }
//             } else {
//                 this.banners = [];
//             }
//         }

//         if (this.$route.query.minterId) {
//             this.minterId = this.$route.query.minterId;
//         }
//         if (this.$route.query.title) {
//             this.title = this.$route.query.title;
//         }
//     },
//     methods: {
//         getBanner() {
//             this.$http
//                 .post(
//                     '/banner/all',
//                     {
//                         query: {
//                             type: 'MARKET',
//                             del: false
//                         },
//                         sort: 'sort,asc;createdAt,desc'
//                     },
//                     { body: 'json' }
//                 )
//                 .then(res => {
//                     this.banners = res.content;
//                 });
//         },
//         changeSort() {
//             this.showAction = true;
//         },
//         selectAction(action) {
//             if (action.name == '综合排序') {
//                 this.salable = '';
//             }
//             if (action.name == '在售中') {
//                 this.salable = true;
//             }
//             if (action.name == '仅展示') {
//                 this.salable = false;
//             }
//             this.getData(true);
//         },
//         changeTab(info) {
//             this.$nextTick(() => {
//                 if (info.name === 'price') {
//                     this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
//                 }
//                 this.getData(true, this.$refs.swiperContent.offsetHeight).then(() => {
//                     this.changeScroll(this.$refs.swiperContent.offsetHeight);
//                 });
//             });
//         },
//         beforeData() {
//             let sort = this.sort;
//             if (sort == 'price') {
//                 sort = 'price,' + this.sortDes;
//             }
//             return {
//                 query: {
//                     type: this.type,
//                     source: this.source,
//                     onShelf: true,
//                     del: false,
//                     minterId: this.minterId,
//                     salable: this.salable
//                 },
//                 sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
//             };
//         },
//         goSearch() {
//             let url = '/productSearch';
//             if (this.type) {
//                 url += '?type=' + this.type;
//             }
//             if (this.source) {
//                 url += '?source=' + this.source;
//             }
//             this.$router.push(url);
//         }
//     },
//     activated() {
//         this.$nextTick(() => {
//             this.changeScroll(this.scrollTop);
//             setTimeout(() => {
//                 this.sort = this.beforeSort;
//             }, 1000);
//         });
//     },
//     beforeRouteLeave(to, from, next) {
//         if (to.path === '/productDetail') {
//             this.beforeSort = this.sort;
//             this.scrollTop = this.scrollWrapper.value.scrollTop;
//             this.setKeeps(['productList']);
//         } else {
//             this.beforeSort = '';
//             this.scrollTop = 0;
//             this.setKeeps(['productList'], false);
//         }
//         next();
//     }
// };
</script>

<style lang="less" scoped>
/deep/ .van-tabs__nav--complete {
    padding: 0;
    border: none;
}
/deep/.van-list__finished-text{
    font-size: 12px;
}
/deep/ .van-tab {
    margin-right: 30px;
}
/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
    padding: 0;
}
.navBar {
    width: 100%;
    height: 44px;
}
.shop_list_one {
    height: 100%;
    position: absolute;
}
/deep/ .van-tabs__line {
    display: none;
}
.content {
    width: 100%;
    // height: 100%;
    background-color: #0a0a1b;
    .content_top {
        width: 100%;
        height: 90px;
        background: #15152d;
        padding: 16px 0px 10px 0px;
        // padding: 16px 16px 10px;
        box-sizing: border-box;
        .selected_recommendations {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 0px 16px;
            .selected_recommendations_title {
                font-size: 16px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
            .selected_recommendations_img {
                width: 24px;
                height: 24px;
            }
        }
        .recommended_switching {
            display: flex;
            justify-content: space-between;
            padding-right: 16px;
            box-sizing: border-box;
            /deep/ .van-tabs__nav--line {
                padding: 0;
            }
            .tab {
                position: relative;
                padding-right: 14px;
                .van-icon {
                    position: absolute;
                    right: 0;
                    &.van-icon-arrow-down {
                        top: 8px;
                    }
                    &.van-icon-arrow-up {
                        bottom: 8px;
                    }
                }
            }
            .label_tabs {
                display: flex;
                .label_tab {
                    position: relative;
                    width: 28px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    margin-right: 30px;
                    line-height: 24px;
                    .price_symbol {
                        position: absolute;
                        top: 3px;
                        right: -15px;
                        display: flex;
                        flex-direction: column;
                        .price_symbol_img {
                            width: 10px;
                            height: 10px;
                        }
                        .price_symbol_one {
                            transform: rotate(180deg);
                        }
                    }
                }
                .label_selected {
                    font-weight: 500;
                    color: #28b6ff;
                }
                .label_not_selected {
                    font-weight: 400;
                    color: #939599;
                }
            }
            .sorting_selection {
                margin-top: 8px;
                width: 86px;
                height: 24px;
                background: #29293f;
                border-radius: 16px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #939599;
                display: flex;
                justify-content: space-between;
                padding: 4px 10px;
                box-sizing: border-box;
                .sorting_selection_con {
                    width: 50px;
                    height: 16px;
                    line-height: 16px;
                    text-align: center;
                }
                .sorting_selection_img {
                    width: 16px;
                    height: 16px;
                }
            }
        }
    }
    .selected_recommendations_list {
        width: 100%;
        background: #0a0a1b;
        padding: 16px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        .current_recommendation_con {
            width: 48%;
            height: 254px;
            background: #29293f;
            border-radius: 8px;
            margin-bottom: 16px;
            .current_recommendation_img {
                width: 100%;
                height: 164px;
                margin-bottom: 6px;
            }
            .current_recommendation_title {
                padding: 0 10px;
                width: 170px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                box-sizing: border-box;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
            }
            .current_recommendation_price {
                width: 100%;
                margin-top: 5px;
                padding-left: 22px;
                box-sizing: border-box;
                display: flex;
                position: relative;
                margin-bottom: 8px;
                .current_recommendation_price_one {
                    font-size: 10px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #28b6ff;
                    position: absolute;
                    bottom: 1px;
                    left: 12px;
                }
                .current_recommendation_price_two {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #28b6ff;
                }
            }
            .current_recommendation_bottom {
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0px 10px;
                box-sizing: border-box;
                .current_recommendation_bottom_left {
                    display: flex;
                }
                .current_recommendation_bottom_right {
                    display: flex;
                    height: 18px;
                }
                .current_recommendation_name_img {
                    width: 18px;
                    height: 18px;
                    border-radius: 50%;
                    margin-right: 4px;
                }
                .current_recommendation_name {
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                }
                .give_img {
                    width: 18px;
                    height: 18px;
                    margin-right: 2px;
                }
                .give_number {
                    height: 18px;
                    line-height: 18px;
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #939599;
                }
            }
        }
    }
}
.van-tab.van-tab--active {
    color: #28b6ff;
    font-weight: 500;
}
</style>
