<template>
  <div class="book-rank-page">
    <x-header>
      <div class="book-rank-header">
        <p :class="['header-item', {'is-active': header.value === active}]"
           v-for="header in headers"
           :key="header.value"
           @click="onTabChange(header)">{{header.label}}</p>
      </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[active] ? books[active].list : []">
            <div class="book-item-wrap"
                 :key="book.book_id">
              <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"
                      :book="book"
                      width="1.5rem"
                      multi>
                <div class="book-info">
                  <p class="name">{{book.book_name}}</p>
                  <p class="intro">{{book.book_summary}}</p>
                </div>
              </x-book>
            </div>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getRankListV2 } from "@/api";

export default {
  data: () => ({
    active: 1,
    headers: [
      {
        label: "女生",
        value: 1,
      },
      {
        label: "男生",
        value: 0,
      },
    ],
    rank: [
      require("@/assets/rank_1.png"),
      require("@/assets/rank_2.png"),
      require("@/assets/rank_3.png"),
    ],
    books: [],
  }),
  computed: {
    isNotEmpty() {
      const book = this.books[this.active];
      return book ? book.list.length : 0;
    },
  },
  methods: {
    onTabChange(item) {
      this.active = item.value;
    },
    initRankBooks() {
      getRankListV2().then((r) => {
        this.books = r.map((item) => {
          let list = item.list.map((item2) => {
            return Object.assign(item2, {
              cover: item2.cover_url,
            });
          });
          return Object.assign(item, { list });
        });
      });
    },
  },
  created() {
    this.active = this.$parent.theme == "boy" ? 0 : 1;
    this.initRankBooks();
  },
};
</script>
