<import name="my-load-more" src="apex-ui/components/load-more/index"></import>

<template>
  <list class="list-container" onscrollbottom="loadMore">
    <list-item type="custom">
      <slot></slot>
    </list-item>
    <list-item type="title">
      <text class="rank-title">收藏榜单</text>
    </list-item>
    <list-item type="rank-item" for="{{rankList}}">
      <stack class="rank-item {{`rank-${$idx}`}}" onclick="goToDetail($item)">
        <div class="rank-bg"></div>
        <div class="rank-icon">
          <text>{{ $idx + 1 }}</text>
        </div>
        <div class="rank-text">
          <text>{{ $item.title }}</text>
          <text>{{ $item.author }}</text>
        </div>
      </stack>
    </list-item>
    <list-item type="title">
      <text class="list-title">图书列表</text>
    </list-item>
    <list-item
      type="book-item"
      class="book-item"
      for="{{list}}"
      onclick="goToDetail($item)"
    >
      <div class="list-image">
        <image src="{{$item.image}}"></image>
      </div>
      <div class="list-text">
        <text class="book-title text-title">{{ $item.title }}</text>
        <text class="book-author text-remark">{{ $item.author }}</text>
        <text class="book-description text-remark-black">{{
          $item.description
        }}</text>
        <text class="book-count text-remark">{{ $item.words }}万字</text>
      </div>
    </list-item>
    <list-item type="loadMore" class="load-status" if="showLoad">
      <my-load-more tip="加载更多"></my-load-more>
    </list-item>
    <list-item type="noMore" class="load-status" if="!showLoad">
      <my-load-more tip="没有更多内容了" loading="{{ false }}"></my-load-more>
    </list-item>
  </list>
</template>

<script>
export default {
  props: {
    list: {},
    showLoad: {
      default: true
    },
    title: {
      default: '图书列表'
    },
    rankList: {
      default: []
    }
  },
  /* -------------------SelfCustomEvent------------------ */
  goToDetail(item) {
    // 根据id查询详情
    console.log(item.id)
    $utils.route2theUrl('pages/book-detail', { info: item })
  },
  loadMore() {
    this.$emit('loadMore')
  }
}
</script>

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

.rank-title {
  margin-bottom: @gap-1;
  .list-title;
}
.rank-item {
  width: 100%;
  margin: @gap-2 0;
  .rank-icon {
    height: 60px;
    width: 60px;
    border-radius: 30px;
    .flex-box-mixins(row, center, center);
  }
  .rank-bg {
    border-radius: 30px;
    height: 60px;
    width: 100%;
  }
  .rank-text {
    width: 100%;
    padding-left: 80px;
    padding-right: 30px;
    .flex-box-mixins(row, space-between, center);
  }
  text {
    color: @white;
  }
}
.rank-0 {
  .rank-icon {
    background-color: #4f586e;
  }
  .rank-bg {
    background-color: #77819c;
  }
}
.rank-1 {
  .rank-icon {
    background-color: #2048af;
  }
  .rank-bg {
    background-color: #5873bd;
  }
}
.rank-2 {
  .rank-icon {
    background-color: #306df1;
  }
  .rank-bg {
    background-color: #6695fa;
  }
}

.book-item {
  height: 300px;
  .list-item;
  .flex-box-mixins(row, space-between, flex-start);
  .list-text {
    flex: 1;
    height: 100%;
    .flex-box-mixins(column, flex-start, flex-start);
    .book-title {
      lines: 1;
    }
    .book-description {
      lines: 2;
    }
    text {
      margin-bottom: @gap-1;
    }
  }
  .list-image {
    width: 180px;
    height: 240px;
    margin-right: @gap-3;
    background-color: @white-grey;
    border-radius: 8px;
    image {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }
  }
}
</style>
