<template>
    <van-pull-refresh
        class="search"
        success-text="加载成功"
        success-duration="1000"
        :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }"
        v-model="isLoading"
        @refresh="onRefresh"
        pageType="light"
    >
        <van-sticky ref="top" class="list-top" :offset-top="bar && bar.show ? bar.height : 0">
            <van-search
                ref="top"
                shape="round"
                v-model="search"
                placeholder="请输入"
                show-action
                autofocus
                :left-icon="require('@assets/svgs/icon-sosuo.svg')"
                @search="getSearch"
            >
                <template #action>
                    <div v-if="!isSearch" @click="getSearch(search)">搜索</div>
                    <div v-else @click="onCancel">取消</div>
                </template>
            </van-search>
            <van-tabs
                v-if="isSearch"
                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"
            v-if="isSearch"
        >
            <template v-for="(item, index) in list" :key="index">
                <auction-info v-model:info="list[index]"></auction-info>
            </template>
            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong.png')" />
        </van-list>
        <div class="search-content" v-else>
            <div class="hot-content" v-if="historys.length > 0">
                <div class="title">最近搜索</div>
                <div class="hot-list">
                    <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
                </div>
            </div>
            <div class="hot-content" v-if="hots.length > 0">
                <div class="title">热门搜索</div>
                <div class="hot-list">
                    <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
                </div>
            </div>
        </div>
    </van-pull-refresh>
</template>

<script>
import auctionInfo from '../../components/auction/info.vue';
import product from '../../mixins/product';
import list from '../../mixins/list';
import search from '../../mixins/search';
export default {
    name: 'auctionSearch',
    components: { auctionInfo },
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [product, list, search],
    data() {
        return {
            list: [],
            beforeSort: '',
            empty: false,
            search: '',
            stiky: null,
            auctionType: '',
            source: '',
            status: '',
            minterId: '',
            url: '/auctionActivity/all',
            scrollTop: 0,
            sort: 'id,desc',
            sortDes: '',
            title: '',
            selectOptions: [
                {
                    label: '全部',
                    value: 'id,desc'
                },
                {
                    label: '最新',
                    value: 'createdAt,desc'
                },
                {
                    label: '最热',
                    value: 'likes,desc'
                }
                // {
                //     label: '价格',
                //     value: 'price',
                //     type: 'select'
                // }
            ],
            salable: '',
            showAction: false
        };
    },
    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;
        }
    },
    mounted() {
        this.$store.dispatch('getUsedBuy');
        if (this.$route.query.auctionType) {
            this.auctionType = this.$route.query.auctionType;
        }
        if (this.$route.query.status) {
            this.status = this.$route.query.status;
        }
        if (this.$route.query.search) {
            this.search = this.$route.query.search;
            this.getSearch(this.search);
        }
    },
    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);
            });
        },
        beforeData() {
            let sort = this.sort;
            if (sort == 'price') {
                sort = 'price,' + this.sortDes;
            }
            return {
                query: {
                    auctionType: this.auctionType,
                    status: this.status,
                    del: false
                },
                search: this.search,
                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
            };
        },
        onRefresh() {
            if (this.isSearch) {
                this.getData(true).then(() => {
                    this.isLoading = false;
                });
            } else {
                this.$http.get('sysConfig/get/hot_search').then(res => {
                    this.hots = res.value.split(',').filter(item => {
                        return item !== ' ' && !!item;
                    });

                    this.isLoading = false;
                });
                this.getHistory();
            }
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);

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

<style lang="less" scoped>
.search {
    background-color: @bg3;
    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;
}
/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;
// 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/.van-tab--active {
    .tab {
        .van-icon-arrow-up {
            color: #646566;
        }
    }
    &.asc {
        .tab {
            .van-icon-arrow-up {
                color: @prim;
            }
            .van-icon-arrow-down {
                color: #646566;
            }
        }
    }
}
.van-tabs {
    background-color: @bg;
}
/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: @text3;
        line-height: 24px;
    }

    .hot-list {
        span {
            display: inline-block;
            font-size: @font1;
            color: @text4;
            line-height: 22px;
            padding: 0 12px;
            margin: 6px 16px 0 0;
            background: @hotBg;
            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;
    // }
}
</style>
