<template>
  <div class="book-limit-free-page">
    <x-header>
      <div class="book-limit-free-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-limit-free-body">
      <p class="limit-tip" v-if="limit">限免结束时间：{{ limit }}</p>
      <div class="book-list-wrap">
        <template v-if="!isNotEmpty">
          <img
            class="empty"
            src="https://cdn-novel.bookkks.com/static/img/empty_bg_02.jpg"
            alt=""
          />
          <p class="empty-text">小编正在加急上架中，请耐心等待~</p>
        </template>
        <template v-else>
          <template v-for="book in books[active] ? books[active].list : []">
            <x-book
              class="book-item"
              :book="book"
              :key="book.book_id"
              width="1.5rem"
              multi
            >
              <p class="status" slot="shadow">免费</p>
              <div class="book-info">
                <p class="name">{{ book.book_name }}</p>
                <p class="intro">{{ book.book_summary }}</p>
              </div>
            </x-book>
          </template>
        </template>
      </div>
    </div>
  </div>
</template>

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

export default {
  data: () => ({
    active: 1,
    headers: [
      {
        label: "女生",
        value: 1
      },
      {
        label: "男生",
        value: 0
      }
    ],
    books: []
  }),
  computed: {
    limit() {
      const book = this.books[this.active];
      return book && book.time;
    },
    isNotEmpty() {
      const book = this.books[this.active];
      return book ? book.list.length : 0;
    }
  },
  methods: {
    onTabChange(item) {
      this.active = item.value;
    },
    initFreeBooks() {
      getBookLimitFree().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.initFreeBooks();
  }
};
</script>
