<template>
    <div class="search">
        <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 @click="getSearch(search)">搜索</div>
                </template>
            </van-search>
        </van-sticky>
        <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 v-model:info="list[index]" @update:info="init"></product-info>
            </template>
            <van-empty
                v-if="empty"
                description="什么都没有搜到哦~"
                :image="require('../../assets/kong_png_wusousuo.png')"
            />
        </van-list>
    </div>
</template>

<script>
import ProductInfo from '../../components/product/productInfo.vue';
import product from '../../mixins/product';
import list from '../../mixins/list';
export default {
    name: 'Search',
    components: { ProductInfo },
    inject: ['bar'],
    mixins: [product, list],
    data() {
        return {
            list: [],
            empty: false,
            search: '',
            stiky: null,
            type: '',
            source: '',
            minterId: '',
            url: '/collection/all'
        };
    },
    mounted() {
        if (this.$route.query.type) {
            this.type = this.$route.query.type;
        }
        if (this.$route.query.source) {
            this.source = this.$route.query.source;
        }
        if (this.$route.query.minterId) {
            this.minterId = this.$route.query.minterId;
        }
    },
    methods: {
        beforeData() {
            return {
                query: {
                    onShelf: true,
                    type: this.type,
                    source: this.source,
                    minterId: this.minterId,
                    del: false
                },
                search: this.search
            };
        },
        getSearch(search) {
            this.search = search;
            this.getData(true);
        }
    }
};
</script>

<style lang="less" scoped>
.search {
    background-color: #0f0f0f;
    padding-bottom: 100px;
}
.top {
    background-color: #181818;
    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;
    }
}
.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;
            }
        }
    }
}
/deep/.van-search {
    .van-field__left-icon {
        display: flex;
        align-items: center;
    }
    .van-icon {
        display: flex;
        align-items: center;
    }
}
</style>
