<template>
  <div class="book-shelf">
    <x-header>
      <div class="book-shelf-head">
        <router-link :to="BookRecent"
                     tag="span"
                     replace
                     class="book-shelf-head__item">最近阅读</router-link>
        <span class="book-shelf-head__item is-active">我的书架</span>
      </div>
    </x-header>
    <div class="book-shelf-bar">
      <span>共{{books.length}}本</span>
      <v-touch @tap="editChange"
               class="book-shelf-bar__edit">管理</v-touch>
    </div>
    <x-shelf-core :books="books"
                  :bar="false"
                  :edit.sync="edit"
                  @read-book="readBook"
                  @edit-book="editBook"
                  @add-book="addBook">
      <x-book slot="book"
              slot-scope="{ book, className }"
              :book="book"
              :prevent="true"
              style="width: 2rem;margin: .2rem auto 0">
        <div slot="shadow"
             class="x-book-shadow"
             :class="className"></div>
      </x-book>
    </x-shelf-core>
  </div>
</template>
<script>
import { BookShelf, BookCity, BookRecent, Reader } from "./namespace.js";
// import books from "../mock/recommend.js";
import { getShelf, delShelf } from "../api";
export default {
  name: BookShelf.name,
  data() {
    return {
      BookRecent: BookRecent.route,
      books: [],
      edit: false
    };
  },
  methods: {
    readBook(book, index) {
      this.$router.push({
        name: Reader.name,
        query: {
          bid: book.bid,
          cid: book.last_cid
        }
      });
    },
    editBook(book, index) {
      delShelf(book.bid).then(r => {
        this.books.splice(index, 1);
      });
    },
    addBook() {
      this.$router.push(BookCity.route);
    },
    editChange() {
      this.edit = !this.edit;
    }
  },
  created() {
    getShelf().then(r => {
      this.books = r;
    });
  }
};
</script>
