<template>
    <div class="follow">
        <div ref="top" class="list-top">
            <div class="top">
                <div class="search" @click="$router.push('/' + this.$route.params.companyId + '/productSearch')">
                    <img src="@assets/icon-sosuo.png" alt="" />
                    <span>搜索你要的精彩</span>
                </div>
            </div>

            <!-- <van-checkbox v-if="source == 'TRANSFER' && !title" @change="getData(true)" class="sala" v-model="salable"
                >仅看在售</van-checkbox
            > -->
            <!-- <van-button
                @click="changeSort"
                v-if="source == 'TRANSFER' && !title"
                class="sala"
                color="#F5F7FA"
                type="primary"
                size="mini"
                icon="arrow-down"
                icon-position="right"
                round
                >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
            > -->
        </div>
        <div
            class="swiper"
            @click="
                $router.push({
                    path: '/' + $route.params.companyId + '/activityList'
                })
            "
            v-if="companyInfo.mintActivity"
        >
            <img src="@assets/zhuzao.png" alt="" />
        </div>

        <van-sticky :offset-top="50">
            <div class="classification_selection">
                <van-tabs
                    v-model:active="sort"
                    :ellipsis="false"
                    line-width="0"
                    line-height="0"
                    @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-checkbox @change="getData(true)" class="sala" v-model="salable">仅看在售</van-checkbox>
                <!-- <div class="allCategories" @click="categorySelections">
                    <div class="allCategories_con" :class="categorySelection ? 'allCategories_con_one' : ''">
                        全部类目
                    </div>
                    <img
                        src="@assets/icon-quanbuleimu@3x.png"
                        alt=""
                        class="allCategories_img"
                        v-if="categorySelection == false"
                    />
                    <img src="@assets/icon-quanbuleimuone@3x.png" alt="" class="allCategories_img" v-else />
                </div> -->
            </div>
        </van-sticky>
        <!-- <van-action-sheet
            v-model:show="showAction"
            @select="selectAction"
            :actions="actions"
            cancel-text="取消"
            close-on-click-action
        /> -->
        <van-overlay :show="show" @click="(show = false), (categorySelection = false)"></van-overlay>
        <van-pull-refresh
            success-text="加载成功"
            success-duration="500"
            v-model="isLoading"
            :head-height="80"
            @refresh="onRefresh"
        >
            <van-list
                v-model:loading="loading"
                :finished="finished"
                finished-text=""
                :immediate-check="false"
                @load="getData"
            >
                <template v-for="(item, index) in showList" :key="index">
                    <product-info dark v-model:info="list[index]" @update:info="init"></product-info>
                </template>

                <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何藏品哦~" />
            </van-list>
        </van-pull-refresh>
    </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 product from '../../mixins/product';
import list from '../../mixins/list';
import banner from '../../mixins/banner';
import { useWindowSize } from '@vant/use';
import { mapState } from 'vuex';
export default {
    name: 'productList',
    components: { ProductInfo },
    inject: ['setKeeps', 'scrollWrapper', 'changeScroll', 'barHeight'],
    mixins: [product, list, banner],
    setup() {
        const { width, height } = useWindowSize();

        return { windowWidth: width };
    },
    data() {
        return {
            list: [],
            empty: false,
            beforeSort: '',
            sort: 'id,desc',
            sortDes: '',
            type: '',
            source: '',
            minterId: '',
            selectOptions: [
                {
                    label: '综合排序',
                    value: 'id,desc'
                },
                // {
                //     label: '最新',
                //     value: 'id,desc;'
                // },
                // {
                //     label: '最热',
                //     value: 'likes,desc'
                // },
                {
                    label: '价格',
                    value: 'price',
                    type: 'select'
                }
            ],
            url: '/collection/all',
            title: '',
            salable: '',
            scrollTop: 0,
            showAction: false,
            banners: [],
            settings: [],
            normalHeight: 0,
            settingId: 0,
            showSetting: false,
            barShow: false,
            notLike: '',
            categorySelection: false,
            selectCategoryOne: false,
            activeSettingIndex: '',
            activeSettingIndexOne: '',
            offsetWidth: 0,
            show: false
        };
    },
    computed: {
        ...mapState(['companyId', 'companyInfo']),
        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;
        },
        bannerHeight() {
            let height = Math.ceil(this.banners.length / 2);
            let _h = this.accMul(40, height);
            if (_h > this.maxBannerHeight) {
                _h = this.maxBannerHeight - 10;
            }
            return this.showSetting && _h ? _h + 30 : 0;
        },
        maxBannerHeight() {
            let _h = this.accMul(40, 5);
            return _h + 12;
        },
        moreLeft() {
            if ((this.activeSettingIndex + 1) % 2 == 0) {
                let offsetWidth = this.offsetWidth + 19 + 16 + this.offsetWidth / 2 - 28;
                return offsetWidth;
            } else {
                return this.offsetWidth / 2 - 11;
            }
            // let index =
            //     [...this.settings].findIndex(item => {
            //         return item.id === this.settingId;
            //     }) || 0;

            // let _l = this.accAdd(-21.6, this.accMul(this.windowWidth, 0.1));
            // let _pW = this.accAdd(-3.2, this.accMul(this.windowWidth, 0.2));
            // let _w = this.accMul(_pW, index);
            // return this.accAdd(_l, _w);
        }
    },
    watch: {
        showSetting() {
            if (this.showSetting) {
                document.getElementById('scroll-wrapper').style.overflow = 'hidden';
            } else {
                document.getElementById('scroll-wrapper').style.overflow = 'auto';
            }
        }
    },
    mounted() {
        this.init();
        this.$nextTick(() => {
            if (document.getElementById('navBar')) {
                this.barShow = true;
            } else {
                this.barShow = false;
            }
        });

        this.$http
            .get('/sysConfig/get/collect_not')
            .then(res => {
                console.log(res);
                this.notLike = res.value;
                return Promise.resolve();
            })
            .catch(e => {
                return Promise.resolve();
            })
            .then(() => {
                this.getData(true);
            });

        this.emitter.on('updateList', info => {
            let list = [...this.list];
            list.forEach((item, index) => {
                if (info.id === item.id) {
                    list[index] = info;
                }
            });
            this.list = list;
        });
    },
    methods: {
        onRefresh() {
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        },
        init() {
            this.$store.dispatch('getUsedBuy');
            this.source = 'TRANSFER';
            this.salable = true;
            // this.getBanner();
            this.getSetting();
            if (this.isLogin) {
                this.$store.dispatch('getUserInfo').then(res => {
                    if (!res.riskWarning) {
                        this.$dialog.alert({
                            title: '风险提示声明',
                            message:
                                'RAEX绿洲宇宙平台发售的数字藏品具备收藏欣赏或版权价值，RAEX绿洲宇宙发售的藏品首发价格为官方指导价，RAEX绿洲宇宙对藏品二手市场价格不构成任何指导建议。请各位藏家理性消费，仔细阅读相关权益，杜绝恶意炒作，避免损失。',
                            confirmButtonText: '已阅读并同意'
                        });
                        this.updateUser({ riskWarning: true }, false);
                    }
                });
            }
        },
        touchEvent() {
            this.hideSetting();
        },
        getSetting() {
            this.$http
                .post('/setting/byFlag', { flag: 1 })
                .then(res => {
                    this.settings = res.filter(item => {
                        return item.pic;
                    });
                    setTimeout(() => {
                        this.$nextTick(() => {
                            this.normalHeight = this.$refs.top.$el.offsetHeight;
                        });
                    }, 500);
                })
                .catch(e => {
                    console.log(e);
                    this.$message.error(e.error);
                });
        },
        showBanner(settingId, index) {
            this.activeSettingIndex = index;
            if (this.settingId === settingId && this.showSetting) {
                this.hideSetting();
            } else {
                this.settingId = settingId;
                this.showSetting = true;
                this.$http
                    .post(
                        '/banner/all',
                        {
                            query: {
                                type: 'MARKET',
                                del: false,
                                settingId: settingId
                            },
                            size: 99,
                            sort: 'sort,asc;createdAt,desc'
                        },
                        { body: 'json' }
                    )
                    .then(res => {
                        this.banners = res.content;
                    });
            }
        },
        goNextOne(info, props = '', settingId) {
            this.activeSettingIndexOne = settingId;
            if (info.link && info.linkType === 'collections') {
                let linkContent = encodeURIComponent(info.linkContent);
                // this.$router.push(`/productSearch?search=${info.linkContent}${props}`);
                this.$router.push(
                    '/' + this.$route.params.companyId + `/productSearchCorpse?search=${linkContent}${props}`
                );
            }
        },
        hideSetting() {
            this.showSetting = false;
            setTimeout(() => {
                this.banners = [];
            }, 300);
        },
        categorySelections() {
            this.categorySelection = !this.categorySelection;
            if (this.categorySelection == true) {
                this.$nextTick(() => {
                    this.show = true;
                    this.offsetWidth = this.$refs.zombie[0].offsetWidth;
                });
            } else {
                this.show = false;
            }
        },
        changeSort() {
            this.showAction = true;
        },
        selectAction(action) {
            if (action.name == '综合排序') {
                this.salable = '';
            }
            if (action.name == '在售中') {
                this.salable = true;
            }
            if (action.name == '仅展示') {
                this.salable = false;
            }
            this.hideSetting();
            this.getData(true);
        },
        changeTab(info) {
            this.$nextTick(() => {
                if (info.name === 'price') {
                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                }
                this.categorySelection = false;
                this.show = false;
                this.hideSetting();
                this.getData(true, this.normalHeight).then(() => {
                    this.changeScroll(this.normalHeight);
                });
            });
        },
        beforeData() {
            let sort = this.sort;
            if (sort == 'price') {
                sort = 'price,' + this.sortDes;
            }
            return {
                query: {
                    type: this.type,
                    onShelf: true,
                    del: false,
                    salable: this.salable,
                    companyId: this.companyId
                },
                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
            };
        },
        goSearch() {
            let url = '/' + this.$route.params.companyId + '/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) {
        document.getElementById('scroll-wrapper').style.overflow = 'auto';
        if (to.name === 'productDetail' || to.path === '/productSearchCorpse') {
            this.beforeSort = this.sort;
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['productList']);
        } else {
            this.beforeSort = '';
            this.scrollTop = 0;
            this.setKeeps(['productList'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: #272b2e;
    padding-bottom: 100px;
}
.van-list {
    padding: 8px;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
    min-height: calc(var(--app-height) - 200px);
}
.top {
    display: flex;
    padding: 9px 16px;
    background-color: #222426;
    display: flex;
    align-items: center;
    z-index: 21;
    .search {
        flex-grow: 1;
        background-color: #373b3e;
        display: flex;
        align-items: center;
        padding: 4px 20px;
        border-radius: 21px;
        img {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
        font-size: 14px;
        color: @text3;
        line-height: 24px;
    }
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: #272b2e;
}
// /deep/.van-tab {
// flex-grow: 0;
// padding: 0 0 0 0;
// margin-right: 50px;

.tab {
    position: relative;
    padding-right: 14px;
    .van-icon {
        position: absolute;
        right: 0;

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

        &.van-icon-arrow-up {
            bottom: 8px;
        }
    }
}

/deep/.trans {
    .van-tab {
        margin-right: 30px;
    }

    .van-tabs__wrap {
        height: 24px;
        line-height: 24px;
    }
}

.van-tabs {
    background-color: #222426;
}
.classification_selection {
    height: 50px;
    padding: 13px 16px;
    box-sizing: border-box;
    background: #222426;
    border-top: 1px solid #272b2e;
    display: flex;
    justify-content: space-between;
    position: relative;
    .allCategories {
        display: flex;
        .allCategories_con {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            line-height: 24px;
        }
        .allCategories_con_one {
            font-weight: bold;
            color: #43ce00;
        }
        .allCategories_img {
            width: 18px;
            height: 18px;
            margin-left: 2px;
            padding-top: 3px;
        }
    }

    .van-checkbox {
        position: absolute;
        right: 0;
        top: 12px;
        --van-checkbox-label-color: #fff;
        --van-checkbox-size: 12px;
        --van-checkbox-checked-icon-color: var(--prim);
    }
}
.list-top {
    position: relative;

    .series_selection {
        width: 100%;
        margin-top: -1px;
        padding: 6px 16px 4px;
        box-sizing: border-box;
        background: #222426;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        // transition: height ease-in-out 0.4s;
        .series_selection_con {
            width: calc(50vw - 25.5px);
            height: 30px;
            background: #272b2e;
            border-radius: 4px;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #939599;
            line-height: 30px;
            text-align: center;
            margin-bottom: 12px;
        }
        .active {
            font-weight: bold;
            color: #43ce00;
        }
        .series_selection_cons {
            font-weight: bold;
            color: #43ce00;
        }
    }
}
/deep/.sala {
    position: absolute;
    right: 16px;
    bottom: 11px;
    color: @text3!important;
    min-width: 92px;
    font-size: 12px;
    background: #272b2e !important;
    // .van-checkbox__icon {
    //     color: #fff;
    //     transform: scale(0.6);

    //     .van-icon {
    //         border-color: @text3;
    //     }

    //     &.van-checkbox__icon--checked {
    //         .van-icon {
    //             border-width: 0;
    //             .linear();
    //             &::before {
    //                 color: #fff;
    //             }
    //         }
    //     }
    // }
    // .van-checkbox__label {
    //     color: @text3;
    //     margin-left: 0px;
    //     font-size: @font1;
    // }
}
.swiperContent {
    background: #222426;
    border-bottom: 1px solid #272b2e;
    padding: 10px 16px;
}
.setting {
    padding-bottom: 6px;
    .name {
        height: 17px;
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        margin-top: 4px;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
.list-top {
    transition: height ease-in-out 0.4s;
    position: sticky;
    top: 0;
    z-index: 20;
}
/deep/.van-sticky--fixed {
    background-color: #222426;
    transition: height ease-in-out 0.4s;
}
.mySwiper {
    z-index: 21;
    position: relative;
}
.banner-box {
    width: 100%;
    height: 0;
    transition: height ease-in-out 0.4s;
    z-index: 21;
    position: relative;
    overflow: hidden;
    .more {
        width: 24px;
        height: 8px;
        display: block;
        position: absolute;
        left: 16px;
        top: 0px;
        transition: left ease-in-out 0.3s;
    }
}
.banner-list {
    width: 100%;
    position: relative;
    background: #373b3e;
    border-radius: 8px;
    padding: 12px;
    padding-bottom: 0px;
    box-sizing: border-box;
    overflow: auto;
    margin-top: 8px;
    .flex();
    flex-wrap: wrap;
    justify-content: space-between;
    .banner-item {
        width: calc(50vw - 37.5px);
        height: 28px;
        background: #272b2e;
        border-radius: 4px;
        margin-bottom: 12px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #939599;
        line-height: 28px;
        padding: 0px 10px;
        box-sizing: border-box;
        text-align: center;
        .flex();
        justify-content: center;
    }
    .actives {
        background: #3ab200;
        color: #ffffff;
    }
    .setting {
        width: calc(20vw - 19.2px);
        padding-bottom: 6px;
        margin-top: 6px;
        .name {
            margin-top: 4px;
        }
    }
}
.banner-wrapper {
    position: absolute;
    width: 100vw;
    height: 100vh;
    height: var(--app-height);
    background-color: transparent;
    top: -89px;
    left: 0;
    z-index: 20;
}
/deep/ .van-tabs__nav--complete {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    border-top: none !important;
}
/deep/ .van-overlay {
    z-index: 6;
}

.swiper {
    padding: 10px 16px;
    img {
        width: 100%;
        height: auto;
        display: block;
    }
}
</style>
