<template>
    <div class="discover" :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }">
        <van-sticky ref="top" :offset-top="bar.value && 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="box-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">
                <asset-info :info="item"></asset-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="hot-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="hot-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 AssetInfo from '../../components/asset/assetInfo.vue';
import asset from '../../mixins/asset';
import list from '../../mixins/list';
import search from '../../mixins/search';
export default {
    name: 'assetSearch',
    mixins: [asset, list, search],
    inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
    components: {
        AssetInfo
    },
    data() {
        return {
            active: 'explore',
            stiky: null,
            type: '',
            empty: false,
            list: [],
            typeOptions: [
                {
                    label: '全部',
                    type: ''
                },
                {
                    label: '售卖',
                    type: 'ON_SALE'
                },
                {
                    label: '仅展示',
                    type: 'NORMAL'
                }
            ],
            search: '',
            url: '/asset/all',
            status: '',
            scrollTop: 0
        };
    },
    mounted() {
        if (this.$route.query.status) {
            this.status = this.$route.query.status;
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    userId: this.$store.state.userInfo.id,
                    status: this.status
                },
                search: this.search
            };
        }
    },
    watch: {
        isSearch() {
            this.changeScroll(0);
        }
    },
    activated() {
        this.$nextTick(() => {
            this.changeScroll(this.scrollTop);
        });
    },
    beforeRouteLeave(to, from, next) {
        if (to.path === '/creatorDetail') {
            this.scrollTop = this.scrollWrapper.value.scrollTop;
            this.setKeeps(['assetSearch']);
        } else {
            this.scrollTop = 0;
            this.setKeeps(['assetSearch'], false);
        }
        next();
    }
};
</script>

<style lang="less" scoped>
.top {
    display: flex;
    padding: 10px 16px;
    background-color: @bg;
    .top-btn {
        flex-grow: 1;
        .btn {
            font-size: 16px;
            line-height: 26px;
            display: inline-block;
            vertical-align: text-bottom;

            &.active {
                color: @prim;
                font-size: 20px;
                font-weight: bold;
                line-height: 30px;
            }
        }

        .btn + .btn {
            margin-left: 30px;
        }
    }
}
/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;
    }
}
.select {
    position: absolute;
    right: 16px;
    bottom: 9px;
    color: @text3 !important;
    min-width: 96px;
}
// /deep/.van-sticky {
//     position: relative;
// }

.discover {
    background-color: @bg3;
    min-height: 100vh;
    box-sizing: border-box;
}

/deep/ .mySwiper {
    width: calc(100vw - 32px);
    height: calc(41vw - 13px);

    .swiper-pagination {
        bottom: 12px;
    }

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

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

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

    /* 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: 4px;
}
.grid-img {
    display: block;
}
.van-grid {
    margin-top: 12px;
}
/deep/ .van-grid-item__content {
    padding: 14px 20px 16px;
}
/deep/ .van-grid-item__text {
    color: #fff;
    font-size: 13px;
    line-height: 18px;
    margin-top: 4px;
}

.title {
    padding: 16px 20px 8px;
    color: @prim;
    font-size: 18px;
    font-weight: bold;
}

.box-list {
    // display: flex;
    // flex-wrap: wrap;
    padding: 8px 8px 100px;
}

/deep/.van-tab {
    color: #fff;
    flex-grow: 0;
    padding: 0 0 0 0;
    margin-right: 30px;

    &.van-tab--active {
        color: @prim;
    }
}
/deep/.van-tabs__nav {
    padding-left: 16px;
}

/deep/ .van-tabs__line {
    bottom: 20px;
}

/deep/.van-action-sheet__description::after {
    border-bottom: 1px solid #f2f2f2;
}
.hot-content {
    padding: 10px 0 6px 16px;

    .hot-title {
        font-size: @font2;
        color: @text3;
        line-height: 24px;
    }

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

/deep/.product {
    background-color: @bg;
    .name {
        color: @text0!important;
    }
}
</style>
