<template>
    <div>
        <div class="cate f-row-b-c">
            <div>全部书籍</div>
            <van-icon name="search"  size="18" />
        </div>

        <div class="cate_body f">
            <van-sidebar v-model="active" class="sidebarwp">
                <van-sidebar-item v-for="(item, index) in side_list" :key="index" :title="item.name" />
            </van-sidebar>
            <div class="by_rg f1">
                <refreshList :freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"  :resetScroll="resetScroll">
                    <div>
                        <List :goodsList="bookList" :cardAttr="cardAttr"></List>
                    </div>
                    <van-empty v-if="bookList.length == 0" class="no-data" description="暂无数据" />
                </refreshList>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { catePage } from '@/libs/mock'
const side_list = catePage.side_list
var  bookList = catePage.bookList

const active = ref(0)
const resetScroll = ref(0);
const freshMap = reactive({
  refreshLoad: false,
  listLoading: false,
  listFinished: false,
});
const cardAttr = reactive({
  columnNum: 2,
  gutter: 10,
  itemClass: "recommend_item",
});
const classMap = reactive({
  refreshClass: "classify_refresh_box",
});


//下拉刷新
const onRefresh = () => {
    freshMap.refreshLoad = true;
    setTimeout(() => {
        bookList= catePage.bookList
        freshMap.refreshLoad = false;
    }, 1000)
};

// 触底加载
const onLoad = () => {
    bookList = bookList.concat(catePage.bookList)
    freshMap.listLoading = false;
    freshMap.listFinished = false;
    if (bookList.length > 50) {
        freshMap.listFinished = true;
    }
};
</script>

<style lang="scss" scoped>
.cate {
    padding: 0 15px;
    position: relative;
    background: linear-gradient(90deg, rgba(205, 218, 252), rgba(255, 240, 230, ));
    height: 80px;
    line-height: 50px;
}

.cate::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.sidebarwp {
    height: calc(100vh - 130px);

    .van-sidebar-item {
        background-color: #fff;
        text-align: center;
    }

    .van-sidebar-item--select {
        font-size: 18px;
    }
}
</style>