<template>
    <div class="search" success-text="加载成功" success-duration="500" pageType="light">
        <van-sticky class="list-top" :offset-top="bar && bar.show ? bar.height : 0">
            <div class="consignment_display">
                <div class="consignment_display_con">
                    <div class="consignment_display_con_title consignment_display_con_one">
                        <div class="consignment_display_con_text">寄售</div>
                        <div class="consignment_display_con_number">{{ displayInformation.consignmentNum }}</div>
                    </div>
                    <div class="consignment_display_con_title consignment_display_con_two">
                        <div class="consignment_display_con_text">展示</div>
                        <div class="consignment_display_con_number">{{ displayInformation.onlyShowNum }}</div>
                    </div>
                    <div class="consignment_display_con_title consignment_display_con_three">
                        <div class="consignment_display_con_text">交易中</div>
                        <div class="consignment_display_con_number">{{ displayInformation.transactingNum }}</div>
                    </div>
                </div>
            </div>
            <div class="consignment_display_choice" v-if="classification == true">
                <div class="consignment_display_choice_con">
                    <div class="consignment_display_choice_con_one">
                        <van-tabs
                            :ellipsis="false"
                            line-width="16"
                            line-height="2"
                            @click-tab="changeTabOne"
                            :class="{ trans: source == 'TRANSFER' }"
                            class="van-tabs-one"
                        >
                            <van-tab
                                :title="item.name"
                                :name="item.value"
                                :title-class="item.type === 'select' && sortDes ? sortDes : ''"
                                :key="index"
                                :lazy-render="false"
                                v-for="(item, index) in selectOptions"
                            >
                            </van-tab>
                        </van-tabs>
                        <van-tabs
                            v-model:active="sorts"
                            :ellipsis="false"
                            line-width="0"
                            line-height="0"
                            @click-tab="changeTab"
                            :class="{ trans: source == 'TRANSFER' }"
                            class="van-tabs-two"
                        >
                            <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 selectOptionsTwo"
                            >
                                <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>
                    <van-checkbox class="sala" v-model="checked" @change="getData(true)">
                        <span :class="checked ? 'sala_one' : 'sala_two'">仅看在售</span>
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-checkbox>
                </div>
            </div>
            <div class="consignment_display_choice" v-else>
                <div class="consignment_display_choice_con consignment_display_choice_cons">
                    <van-tabs
                        v-model:active="sorts"
                        :ellipsis="false"
                        line-width="16"
                        line-height="2"
                        @click-tab="changeTab"
                        :class="{ trans: source == 'TRANSFER' }"
                        class="van-tabs-two van-tabs-three"
                    >
                        <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 selectOptionsThree"
                        >
                            <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 class="sala" v-model="checked" @change="getData(true)">
                        <span :class="checked ? 'sala_one' : 'sala_two'">仅看在售</span>
                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-checkbox>
                </div>
            </div>
        </van-sticky>
        <!-- <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"
                    :lazy-render="false"
                    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="isSearch && source == 'TRANSFER' && !title"
                @change="getData(true)"
                class="sala"
                v-model="salable"
                >仅看在售</van-checkbox
            > -->

        <!-- <van-button
                @click="changeSort"
                v-if="isSearch && 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
            class="list"
            v-model:loading="loading"
            :immediate-check="false"
            :finished="finished"
            finished-text=""
            @load="getData"
        >
            <template v-for="(item, index) in list" :key="index">
                <product-info dark v-model:info="list[index]" @update:info="init"></product-info>
            </template>
            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_black.png')" />
        </van-list>
    </div>
</template>

<script>
import ProductInfo from '../../components/product/productInfo.vue';
// import product from '../../mixins/product';
import list from '../../mixins/list';
import search from '../../mixins/search';
// import search from '../../mixins/search';
// import { Swiper, SwiperSlide } from 'swiper/vue';

// import 'swiper/swiper.min.css';
// import 'swiper/swiper-bundle.min.css';
export default {
    name: 'productSearch',
    components: { ProductInfo },
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [list],
    // setup() {
    //     let swiperRef = null;

    //     const setSwiperRef = swiper => {
    //         swiperRef = swiper;
    //     };

    //     return { swiperRef: null, setSwiperRef };
    // },
    data() {
        return {
            list: [],
            beforeSort: '',
            empty: false,
            search: '',
            stiky: null,
            type: '',
            source: '',
            minterId: '',
            url: '/collection/all',
            scrollTop: 0,
            sort: 'price',
            sorts: 'price',
            sortDes: 'asc',
            title: '',
            selectOptions: [],
            selectOptionsTwo: [
                {
                    label: '价格',
                    value: 'price',
                    type: 'select'
                }
            ],
            selectOptionsThree: [
                {
                    label: '价格排序',
                    value: 'price',
                    type: 'select'
                }
            ],
            activeIcon: require('@assets/icon_gouxuan_pre@3x.png'),
            inactiveIcon: require('@assets/icon_gouxuan_xiao@3x.png'),
            salable: '',
            checked: true,
            beforeChecked: '',
            showAction: false,
            showHall: false,
            settings: [],
            banners: [],
            classification: '',
            displayInformation: {},
            rarityLabel: ''
        };
    },
    // watch: {
    //     isSearch() {
    //         this.changeScroll(0);
    //     }
    // },
    computed: {
        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;
        },
        tabs() {
            let settings = [...this.settings];
            let banners = [...this.banners];
            return settings.map(item => {
                return {
                    ...item,
                    children: banners.filter(banner => {
                        return banner.settingId === item.id;
                    })
                };
            });
        }
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
        // this.$store.dispatch('getUsedBuy');
        // if (this.$route.query.type) {
        //     this.type = this.$route.query.type;
        //     console.log("12213",this.type)
        // }
        if (this.$route.query.source) {
            this.source = this.$route.query.source;
            // this.salable = true;
            // console.log("12213",this.source)
            // this.sort = 'createdAt,desc';
        }
        if (this.$route.query.minterId) {
            this.minterId = this.$route.query.minterId;
        }
        // if (this.$route.query.minterId) {
        //     this.minterId = this.$route.query.minterId;
        //     console.log("12213",this.minterId)
        // }
        // if (this.$route.query.title) {
        //     this.title = this.$route.query.title;
        // }

        if (this.$route.query.search) {
            console.log('dgdfd', this.$route.query.search);
            this.search = this.$route.query.search;
            let search = this.$route.query.search;
            this.$http
                .get('/rarityLabel/label/' + search)
                .then(res => {
                    this.selectOptions = Object.values(res);
                    if (Object.values(res).length > 0) {
                        this.classification = true;
                        this.rarityLabel = Object.values(res)[0].value;
                    } else {
                        this.classification = false;
                    }
                    this.getData(true);
                })
                .catch(() => {});
            this.$http
                .get('/collection/count/' + search)
                .then(res => {
                    this.displayInformation = res;
                })
                .catch(() => {});
        }
        // this.$http
        //     .get('/sysConfig/get/hall_show')
        //     .then(res => {
        //         if (res.value === true || res.value === '1') {
        //             this.showHall = true;
        //         } else {
        //             return Promise.reject();
        //         }
        //     })
        //     .catch(() => {
        //         this.showHall = false;
        //     });
        // this.$http
        //     .post('/setting/byFlag', { flag: 1 })
        //     .then(res => {
        //         this.settings = res;
        //         this.$http
        //             .post(
        //                 '/banner/all',
        //                 {
        //                     query: {
        //                         type: 'MARKET',
        //                         del: false
        //                     },
        //                     size: 999,
        //                     sort: 'sort,asc;createdAt,desc'
        //                 },
        //                 { body: 'json' }
        //             )
        //             .then(res => {
        //                 this.banners = res.content;
        //                 this.$nextTick(() => {
        //                     if (this.swiperRef) {
        //                         this.swiperRef.update();
        //                     }
        //                 });
        //             });
        //     })
        //     .catch(e => {
        //         console.log(e);
        //         this.$message.error(e.error);
        //     });
        // 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: {
        // clear() {
        //     this.$dialog
        //         .confirm({
        //             message: '确定要清除全部搜索记录吗?'
        //         })
        //         .then(() => {
        //             this.clearHistory();
        //         });
        // },
        // 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';
                }
                console.log('15r14', this.sortDes);
                this.getData(true);
            });
        },
        changeTabOne(info) {
            this.rarityLabel = info.title;
            this.getData(true);
            console.log('fdf', info);
        },
        beforeData() {
            let sort = this.sort + ',' + this.sortDes;
            if (this.checked) {
                this.salable = true;
            } else {
                this.salable = '';
            }
            let type = this.type;
            if (!type && !this.showHall) {
                type = 'DEFAULT,BLIND_BOX';
            }
            // if (sort == 'price') {
            //     sort = 'price,' + this.sortDes;
            // }
            // let type = this.type;
            // if (!type && !this.showHall) {
            //     type = 'DEFAULT,BLIND_BOX';
            // }
            return {
                query: {
                    onShelf: true,
                    type: type,
                    minterId: this.minterId,
                    del: false,
                    source: this.source,
                    salable: this.salable,
                    rarityLabel: this.rarityLabel
                },
                search: this.search,
                sort
            };
        }
        // onRefresh() {
        //     if (this.isSearch) {
        //         this.getData(true).then(() => {
        //             this.isLoading = false;
        //         });
        //     } else {
        //         this.isLoading = false;
        //         // this.$http.get('sysConfig/get/hot_search').then(res => {
        //         //     this.hots = res.value.split(',').filter(item => {
        //         //         return item !== ' ' && !!item;
        //         //     });
        //         //     this.isLoading = false;
        //         // });
        //         // this.getHistory();
        //     }
        // },
        // isNew(info) {
        //     let date1 = this.dayjs(info.createdAt).add(1, 'week');
        //     return date1.isAfter(this.dayjs());
        // }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);

            setTimeout(() => {
                // this.beforeSort = this.sort
                // this.beforeChecked = this.checked
                this.sort = this.beforeSort;
                this.checked = this.beforeChecked;
            }, 1000);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.name === 'productDetail') {
            // this.sort = this.beforeSort;
            // this.checked = this.beforeChecked;
            this.beforeSort = this.sort;
            this.beforeChecked = this.checked;
            this.scrollTop = this.scrollWrapper.scrollTop;
            this.setKeeps(['productSearch']);
        } else {
            this.beforeSort = '';
            this.scrollTop = 0;
            this.setKeeps(['productSearch'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.search {
    background: #272b2e;
    // padding-bottom: 100px;
}
.top {
    background-color: @bg3;
    padding: 0 16px;
    height: 50px;
    display: flex;
    align-items: center;
    .name {
        font-size: 20px;
        // font-weight: bold;
        color: @prim;
        line-height: 30px;
    }
}
// /deep/.trans {
//     .van-tab {
//         margin-right: 30px;
//     }
// }
.list-top {
    position: relative;
}
.consignment_display {
    height: 90px;
    padding: 8px 16px;
    box-sizing: border-box;
    background: #222426;
    .consignment_display_con {
        display: flex;
        padding: 11px 12px 10px;
        box-sizing: border-box;
        background: #272b2e;
        border-radius: 8px;
        .consignment_display_con_title {
            flex-grow: 1;
        }
        .consignment_display_con_one {
            text-align: left;
        }
        .consignment_display_con_two {
            text-align: center;
            border-left: 1px solid rgba(255, 255, 255, 0.06);
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            flex-grow: 1.3;
        }
        .consignment_display_con_three {
            text-align: right;
        }
        .consignment_display_con_text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 24px;
        }
        .consignment_display_con_number {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: bold;
            color: #43ce00;
            line-height: 28px;
        }
    }
}
.consignment_display_choice {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: #222426;
    .consignment_display_choice_con {
        height: 28px;
        padding: 11px 16px;
        display: flex;
        justify-content: space-between;
        .consignment_display_choice_con_one {
            display: flex;
        }
        /deep/.sala {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 24px;
            font-weight: 400;
            .img-icon {
                width: 16px;
                height: 16px;
                margin-right: -5px;
                padding-top: 2px;
            }
            .sala_one {
                color: #ffffff;
            }
            .sala_two {
                color: #939599;
            }
            /deep/ .van-checkbox__icon {
                line-height: 16px !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;
            // }
        }
        .van-tabs-one {
            width: 184px;
            height: 28px;
            background: #272b2e;
            border-radius: 4px;
            font-size: 15px;
            line-height: 28px;
            /deep/ .van-tabs__nav--complete {
                padding-left: 12px !important;
                padding-right: 12px !important;
                border-top: none;
                justify-content: space-between;
            }
            /deep/ .van-tabs__nav--line {
                height: 100% !important;
                padding-bottom: 0px;
            }
            /deep/ .van-tabs__line {
                bottom: 1px;
            }
            /deep/ .van-tabs__wrap {
                height: 28px;
            }
        }
        .van-tabs-two {
            margin-left: 21px;
            height: 28px;
            /deep/ .van-tabs__wrap {
                height: 28px;
            }
            /deep/ #van-tabs-5-0 {
                margin-right: 0px !important;
            }
            /deep/ .van-tabs__nav--complete {
                padding-left: 0 !important;
                padding-right: 0 !important;
                border-top: none;
            }
            /deep/ .van-tabs__nav--line {
                height: 100% !important;
                padding-bottom: 0px;
            }
            .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/.van-tab--active {
                .tab {
                    .van-icon-arrow-up {
                        color: #646566;
                    }
                }
                &.asc {
                    .tab {
                        .van-icon-arrow-up {
                            color: @prim;
                        }
                        .van-icon-arrow-down {
                            color: #646566;
                        }
                    }
                }
            }
        }
    }
    .consignment_display_choice_cons {
        padding: 13px 16px;
        .van-tabs-three {
            margin-left: 0;
        }
        /deep/ .van-tabs__line {
            bottom: 0px !important;
            left: -5px !important;
        }
    }
}
// /deep/.van-tabs {
//     .van-tabs__nav {
//         padding-left: 16px;
//     }
// }
.list {
    padding: 8px 8px 100px;
}
// /deep/.van-tab {
// flex-grow: 0;
// padding: 0 0 0 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;
//         }
//     }
// }
// /deep/.van-tab--active {
//     .tab {
//         .van-icon-arrow-up {
//             color: #646566;
//         }
//     }
//     &.asc {
//         .tab {
//             .van-icon-arrow-up {
//                 color: @prim;
//             }
//             .van-icon-arrow-down {
//                 color: #646566;
//             }
//         }
//     }
// }
// /deep/.van-tabs__nav--line.van-tabs__nav--complete {
//     border-color: @tabBorder;
// }
/deep/.van-search {
    .van-field__left-icon {
        display: flex;
        align-items: center;
    }
    .van-icon {
        display: flex;
        align-items: center;
    }
    .van-field__control {
        color: @text0;
    }

    .van-search__action {
        color: @text4;
    }
}

.hot-content {
    padding: 10px 0 6px 16px;

    .title {
        font-size: @font2;
        color: #000000;
        line-height: 24px;
        font-weight: normal;
        .flex();

        img {
            width: 18px;
            height: 18px;
            margin-left: 6px;
        }
    }

    .hot-list {
        span {
            display: inline-block;
            font-size: @font1;
            color: @text4;
            line-height: 22px;
            padding: 0 12px;
            margin: 6px 16px 0 0;
            background: @bg;
            border-radius: 12px;
        }
    }
}

// /deep/.sala {
//     position: absolute;
//     right: 16px;
//     top: 60px;
//     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;
// }
// }
.mySwiper {
    padding: 16px;
}
.tab-slide {
    width: 240px;
    background: #ffffff;
    border-radius: 4px;
    height: 457px;
    overflow: auto;
    position: relative;
    .tab-top {
        position: sticky;
        top: 0;
        z-index: 2;
        img {
            width: 240px;
            height: 44px;
        }
        span {
            position: absolute;
            font-size: 14px;
            font-weight: bold;
            color: #3ab200;
            line-height: 44px;
            top: 0;
            left: 12px;
        }
    }
    .tab-item {
        height: 37px;
        .flex();
        padding: 0 12px;
        position: relative;
        z-index: 1;
        .text1 {
            flex-grow: 1;
            margin: 0 6px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .num {
            font-size: 12px;
            color: #ffffff;
            line-height: 14px;
            background-color: #00000044;
            width: 14px;
            text-align: center;
            flex-shrink: 0;
        }

        .new {
            font-size: 10px;
            color: #ff733c;
            line-height: 14px;
            width: 14px;
            flex-shrink: 0;
            background-color: #ff733c20;
            text-align: center;
        }
        &:nth-child(1) {
            .num {
                background: linear-gradient(180deg, #f48753 0%, #e54f29 100%);
            }
        }
        &:nth-child(2) {
            .num {
                background: linear-gradient(180deg, #ffa934 0%, #f16f25 100%);
            }
        }
        &:nth-child(3) {
            .num {
                background: linear-gradient(180deg, #f8c246 0%, #ff9819 100%);
            }
        }

        &::after {
            content: '';
            left: 12px;
            right: 12px;
            height: 1px;
            background: #f4f5f7;
            position: absolute;
            bottom: 0;
        }

        &:last-child {
            z-index: 3;
            background-color: #fff;
            &::after {
                content: '';
                height: 52px;
                background: #fff;
                position: absolute;
                left: 0;
                right: 0;
                bottom: -52px;
                z-index: 2;
            }
        }

        &:nth-last-child(2) {
            &::after {
                content: none;
            }
        }
    }

    .more {
        padding: 10px 0;
        background-color: #fff;
        .flex-col();
        align-items: center;
        img {
            width: 16px;
            height: 16px;
        }
        div {
            font-size: 10px;
            color: rgba(0, 0, 0, 0.2);
            line-height: 10px;
        }
        position: sticky;
        bottom: 0;
        z-index: 2;
    }
}
/deep/ #van-tabs-1-2 {
    margin-right: 0px !important;
}
/deep/ .van-tab {
    margin-right: 0px !important;
    // flex-grow: 1 !important;
}
</style>
