<template>
    <div class="search" :style="{ backgroundColor: isSearch ? '#0F0F27' : '#0F0F27' }">
        <van-sticky ref="top" :offset-top="46">
            <van-search
                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>
            <div class="search_filter" v-if="isSearch">
                <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-button
                    @click="changeSort"
                    v-if="isSearch && source == 'TRANSFER' && !title"
                    color="#29293F"
                    class="sala"
                    size="small"
                    icon="arrow-down"
                    icon-position="right"
                    >{{ salable ? '在售中' : salable === false ? '仅展示' : '综合排序' }}</van-button
                >
            </div>
            <!-- <van-checkbox
                v-if="isSearch && source == 'TRANSFER' && !title"
                @change="getData(true)"
                class="sala"
                v-model="salable"
                >仅看在售</van-checkbox
            > -->
        </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"
        >
            <div class="current_recommendation">
                 <template v-for="(item, index) in list" :key="index">
                    <CollectionList v-model:info="list[index]" @update:info="init"></CollectionList>
                </template>
            </div>
            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/storage_room_icon_01.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>
    </div>
</template>

<script>
import CollectionList from '../../components/CollectionList.vue'
import product from '../../mixins/product';
import list from '../../mixins/list';
import search from '../../mixins/search';
export default {
    name: 'productSearch',
    components: { CollectionList },
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [product, list, search],
    data() {
        return {
            list: [],
            beforeSort: '',
            empty: false,
            search: '',
            stiky: null,
            type: '',
            source: '',
            minterId: '',
            url: '/collection/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.type) {
            this.type = this.$route.query.type;
        }
        if (this.$route.query.source) {
            this.source = this.$route.query.source;
            this.salable = true;
            this.sort = 'createdAt,desc';
        }
        if (this.$route.query.minterId) {
            this.minterId = this.$route.query.minterId;
        }
        if (this.$route.query.title) {
            this.title = this.$route.query.title;
        }
        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: {
                    onShelf: true,
                    type: this.type,
                    source: this.source,
                    minterId: this.minterId,
                    del: false,
                    salable: this.salable
                },
                search: this.search,
                sort: this.sort === 'id,desc' ? this.sortOptions[this.title] || sort : sort
            };
        }
    },
    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(['productSearch']);
        } else {
            this.beforeSort = '';
            this.scrollTop = 0;
            this.setKeeps(['productSearch'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.search{
    background: #0F0F27;
}
/deep/ .van-sticky{
    padding: 12px 0px 10px;
    box-sizing: border-box;
    background: #15152D;
}
/deep/ .van-search {
    padding: 0px 16px;
    background: #15152d;
    box-sizing: border-box;
    // margin-bottom: 6px;
    .van-search__content {
        padding-left: 16px;
        background: #29293f;
        box-sizing: border-box;
    }
    .van-search__content--round {
        border-radius: 4px;
    }
    .van-search__action {
        padding-right: 0;
        padding-left: 12px;
        color: #939599;
        box-sizing: border-box;
        background: #15152d;
    }
    .van-field__control {
        color: #ffffff;
    }
    .van-icon__image {
        padding-top: 4px;
    }
}
.search_filter{
    // height: 44px;
    padding: 16px 16px 10px;
    box-sizing: border-box;
    display: flex;
    background: #15152D;
    justify-content: space-between;
}
/deep/ .van-tabs--line .van-tabs__wrap {
    height: 24px;
    .van-tab {
        margin-right: 30px;
    }
    .tab {
        position: relative;
        padding-right: 14px;
        box-sizing: border-box;
        .van-icon {
            position: absolute;
            right: 0;

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

            &.van-icon-arrow-up {
                bottom: 8px;
            }
        }
    }
}
/deep/ .van-tabs__nav--line.van-tabs__nav--complete {
        padding: 0 !important;
        border: none !important;
    }
/deep/ .van-tabs__line {
    width: 0px !important;
    height: 0px !important;
    }
.current_recommendation {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 16px;
    box-sizing: border-box;
}
.hot-content {
    padding: 10px 0 6px 16px;
    box-sizing: border-box;
    .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;
            box-sizing: border-box;
        }
    }
}
/deep/.sala {
    width: 86px;
    height: 24px;
    background: #29293F;
    border-radius: 12px;
    color: #939599 !important;
    // background: #29293F !important;
}
</style>
