<template>
    <van-pull-refresh
        success-text="加载成功"
        success-duration="1000"
        class="follow"
        v-model="isLoading"
        @refresh="onRefresh"
        pageType="light"
    >
        <van-sticky ref="top" class="list-top" :offset-top="bar && bar.show ? bar.height : 0">
            <div class="top" v-if="!minterId">
                <div class="name">{{ 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-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="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">
                <auction-info v-model:info="list[index]"></auction-info>
            </template>

            <van-empty :image="require('@assets/kong_black.png')" v-if="empty" description="没有任何藏品哦~" />
        </van-list>
    </van-pull-refresh>
</template>

<script>
import auctionInfo from '../../components/auction/info.vue';
import product from '../../mixins/product';
import list from '../../mixins/list';
import banner from '../../mixins/banner';
export default {
    name: 'productList',
    components: { auctionInfo },
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [product, list, banner],
    data() {
        return {
            list: [],
            empty: false,
            beforeSort: '',
            sort: 'id,desc',
            sortDes: '',
            auctionType: '',
            source: '',
            minterId: '',
            selectOptions: [
                {
                    label: '全部',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    value: 'id,desc;'
                },
                {
                    label: '最热',
                    value: 'likes,desc'
                }
                // {
                //     label: '价格',
                //     value: 'price',
                //     type: 'select'
                // }
            ],
            url: '/auctionActivity/all',
            title: '',
            salable: '',
            scrollTop: 0,
            showAction: false,
            banners: [],
            swiperRef: null,
            pageName: '',
            status: '',
            hasFixedPrice: ''
        };
    },
    computed: {
        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.auctionType &&
            this.$route.query.auctionType !== undefined &&
            this.$route.query.auctionType !== 'undefined'
        ) {
            this.auctionType = this.$route.query.auctionType;
        }
        if (this.$route.query.status) {
            this.status = this.$route.query.status;
        }

        if (this.$route.query.hasFixedPrice === 'true' || this.$route.query.hasFixedPrice === true) {
            this.hasFixedPrice = true;
        }

        if (this.$route.query.pageName) {
            this.pageName = this.$route.query.pageName;
        }
    },
    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) {
            console.log(info);
            this.$nextTick(() => {
                if (info.name === 'price') {
                    this.sortDes = this.sortDes == 'desc' ? 'asc' : 'desc';
                }
                this.getData(true);
            });
        },
        beforeData() {
            let sort = this.sort;
            if (sort == 'price') {
                sort = 'price,' + this.sortDes;
            }
            return {
                query: {
                    auctionType: this.auctionType,
                    del: false,
                    status: this.status,
                    hasFixedPrice: this.hasFixedPrice
                },
                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
            };
        },
        goSearch() {
            let url = '/' + this.$route.params.companyId + '/auctionSearch';
            if (this.auctionType) {
                url += '?auctionType=' + this.type;
            }
            if (this.status) {
                url += '?status=' + this.status;
            }
            this.$router.push(url);
        },
        setSwiperRef(ref) {
            this.swiperRef = ref;
        },
        onRefresh() {
            this.getData(true).then(() => {
                this.isLoading = false;
            });
        }
    },
    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.scrollTop;
            this.setKeeps(['productList']);
        } else {
            this.beforeSort = '';
            this.scrollTop = 0;
            this.setKeeps(['productList'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.follow {
    background-color: @bg3;
    padding-bottom: 100px;
}
.van-list {
    padding: 8px;
    box-sizing: border-box;
    min-height: calc(100vh - 200px);
}
.top {
    background-color: @bg;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
    .name {
        font-size: @font3;
        font-weight: bold;
        color: @text0;
        line-height: 30px;
    }

    .search {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 16px;
        top: 13px;
    }
}

/deep/.van-tabs__nav--line.van-tabs__nav--complete {
    border-color: @tabBorder;
}
// /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 {
    background-color: @bg;
}

.list-top {
    position: relative;
}
/deep/.sala {
    position: absolute;
    right: 16px;
    top: 57px;
    color: @text3!important;
    min-width: 92px;
    font-size: 14px;
    // .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: #fff;
    border-bottom: 1px solid @tabBorder;
}
::v-deep(.mySwiper) {
    width: calc(100vw - 32px);
    height: 134px;
    padding: 20px 0;

    .swiper-pagination {
        bottom: 6px;
    }

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

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

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

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

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}
</style>
