<template>
  <div class="book-rank-page">
    <x-header>
      <div class="book-shelf-head">
        <span @click="$router.replace({ name: 'BookRecent' })" class="book-shelf-head__item">最近阅读</span>
        <span @click="$router.replace({ name: 'BookShelf' })" class="book-shelf-head__item">我的书架</span>
        <span @click="$router.replace({ name: 'BookExclusive' })" class="book-shelf-head__item is-active">专属书单</span>
      </div>
    </x-header>
    <div class="book-rank-body">
      <div class="book-list-wrap">
        <template v-if="!isNotEmpty">
          <img class="empty" src="https://cdn-novel.bookkks.com/static/img/empty_bg.jpg" alt="">
        </template>
        <template v-else>
          <template v-for="(book, index) in books">
            <div class="book-item-wrap" :key="book.bid">
              <img v-if="index < 3" class="number-top" :src="rank[index]" alt="">
              <span class="number" v-else>{{ index + 1 }}</span>
              <x-book class="book-item" @click="readBook" :book="book" width="1.5rem" multi>
                <div class="book-info">
                  <p class="name">{{ book.book_name }}</p>
                  <p class="intro">{{ book.intro }}</p>
                </div>
              </x-book>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { promotionExclusiveBook } from "@/api";
import { BookShelf, BookCity, BookRecent, Reader, BookExclusive } from "./namespace.js";
export default {
  data: () => ({
    rank: [
      require("@/assets/rank_1.png"),
      require("@/assets/rank_2.png"),
      require("@/assets/rank_3.png"),
    ],
    books: [],
  }),
  computed: {
    isNotEmpty() {
      return this.books.length > 0;
    },
  },
  methods: {
    readBook(book, index) {
      this.$router.push({
        name: Reader.name,
        query: {
          bid: book.bid,
          cid: book.cid
        }
      });
    },
    initRankBooks() {
      promotionExclusiveBook().then((r) => {
        console.log(r, 'promotionExclusiveBookpromotionExclusiveBook');
        this.books = r
      });
    },
  },
  created() {
    this.initRankBooks();
  },
};
</script>
