<template>
    <div class="search" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
        <van-sticky ref="top" :offset-top="bar.value.show ? 46 : 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-sticky>
        <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">
                <creator-info v-model:info="list[index]"></creator-info>
            </template>
            <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.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">
                <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 CreatorInfo from '../../components/creator/CreatorInfo.vue';
import list from '../../mixins/list';
import search from '../../mixins/search';
export default {
    name: 'creatorSearch',
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    mixins: [list, search],
    components: { CreatorInfo },
    data() {
        return {
            list: [],
            empty: false,
            search: '',
            stiky: null,
            type: '',
            url: '/user/all',
            scrollTop: 0
        };
    },
    watch: {
        isSearch() {
            this.changeScroll(0);
        }
    },
    methods: {
        beforeData() {
            return {
                query: { minter: true },
                search: this.search
            };
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/assetDetail') {
            this.scrollTop = this.scrollWrapper.value.scrollTop;
            this.setKeeps(['creatorSearch']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['creatorSearch'], 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/.van-tabs {
    .van-tabs__nav {
        padding-left: 16px;
    }
}
// /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;
            }
        }
    }
}
/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;
        }
    }
}
.info {
    background-color: @bg;

    /deep/.van-button--mini {
        background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @prim, @warn) !important;

        &.follow {
            background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, @text3, @text3) !important;
        }
    }
}
</style>
