<import name="book-list" src="./book-list"></import>

<template>
  <div class="page-container">
    <book-list
      list="{{library.list}}"
      show-load="{{library.load}}"
      onload-more="queryLibraryList"
      rank-list="{{rankList}}"
    >
      <div class="sub-container">
        <swiper autoplay="true" class="swiper">
          <image
            class="swiper-image"
            src="{{$item.swiper}}"
            for="swiperList"
            onclick="goToDetail($item)"
          ></image>
        </swiper>
      </div>
    </book-list>
  </div>
</template>

<script>
import { bookListData } from '../../assets/data/book-list.js'
export default {
  props: [],
  data: {
    library: {
      list: [],
      pageNo: 1,
      pageSize: 5,
      total: null,
      load: true
    },
    swiperList: bookListData,
    rankList: bookListData.slice(0, 3)
  },
  onInit() {
    this.queryLibraryList(1)
  },
  /* -------------------SelfCustomEvent------------------ */
  queryLibraryList(pageNo) {
    if (!isNaN(pageNo) && pageNo !== this.library.pageNo) {
      return
    }
    if (
      this.library.total &&
      (this.library.pageNo - 1) * this.library.pageSize >= this.library.total
    ) {
      this.library.load = false
      return
    }
    this.queryFn()
  },
  queryFn() {
    /* 
    开发时，根据pageNo和pageSize查询列表
    返回total和对应pageNo的list
    */
    this.library.total = 5
    // 模拟查询
    let total = this.library.pageNo * this.library.pageSize
    let end = this.library.total < total ? this.library.total : total
    let start = total - this.library.pageSize
    let concatList = bookListData.slice(start, end)
    // 更新列表
    this.library.list = this.library.list.concat(concatList)
    this.library.pageNo++
  },
  goToDetail(item) {
    console.log(item)
    // 根据id查询详情
    $utils.route2theUrl('pages/book-detail', { info: JSON.stringify(item) })
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';

.sub-container {
  width: 100%;
  .flex-box-mixins(column, flex-start, flex-start);
}
.swiper {
  indicator-selected-color: rgba(255, 255, 255, 1);
  indicator-color: rgba(255, 255, 255, 0.5);
  indicator-size: 12.5px;
  width: 100%;
  height: 400px;
  margin: @gap-4 0;
  .swiper-image {
    border-radius: 10px;
  }
}
</style>
