<template>
    <div>
        <div class="book f-row-b-c">
            <div>书架</div>
            <van-icon name="wap-nav" size="20" />
        </div>

        <div class="book_body ">
            <van-cell title="正在阅读" value="查看更多" is-link />
            <refreshList :freshMap="freshMap" :classMap="classMap" @refresh="onRefresh" @onLoad="onLoad"  >
                <div>
                    <List :goodsList="bookList" :cardAttr="cardAttr"></List>
                </div>
                <van-empty v-if="bookList.length == 0" class="no-data" description="暂无数据" />
            </refreshList>
        </div>
    </div>
</template>

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

const freshMap = reactive({
  refreshLoad: false,
  listLoading: false,
  listFinished: false,
});
const cardAttr = reactive({
  columnNum: 3,
  gutter: 10,
  itemClass: "recommend_item",
});
const classMap = reactive({
  refreshClass: "book_box",
});

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

// 触底加载
const onLoad = () => {
    console.log(2223);
    
    bookList = bookList.concat(bookPage.bookList)
    freshMap.listLoading = false;
    freshMap.listFinished = false;
    if (bookList.length > 50) {
        freshMap.listFinished = true;
    }
};

</script>

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

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

</style>