<template>
  <div class="book-detail disable-copy" v-if="test">
    <x-header>
      <span class="single-line">{{book.name}}</span>
    </x-header>
    <x-book :book="book" :prevent="true" class="book-detail-book" multi width="1.8rem">
      <p class="x-book-info__name">{{book.name}}</p>
      <p class="x-book-info__author">
        <span>{{book.category_name}}</span>
        <span class="red x-book-info__status">{{book.book_end_status ? '完结' : '连载'}}</span>
      </p>
      <p class="x-book-info__count">字数：{{book.size}}</p>
      <div class="book-detail-handle">
        <div
          class="book-detail-handle__btn book-detail-handle__add"
          style="color:#b2b2b2;border-color:#e5e5e5"
        >{{book.is_on_user_shelf ? '已' : ''}}加入书架</div>
        <div class="book-detail-handle__read book-detail-handle__btn" style="background:#e5e5e5;border-color:#e5e5e5">立即阅读</div>
      </div>
    </x-book>
    <div class="book-detail-intro">
      <span @click="debug">{{ extended ? book.intro : book.intro.slice(0,110)}}</span>
      <v-touch class="book-detail-extend" tag="span" @tap="introExtend" v-if="!extended">展开</v-touch>
    </div>
    <div tag="div" class="book-detail-lastest">最新章节：{{book.last_chapter}}</div>
    <div class="section-title section-edge-all">
      <span>目录</span>
      <span class="book-catalog-total">共{{book.book_chapter_total}}章</span>
      <span class="book-catalog-update">{{book.last_update_time}}</span>
    </div>
    <div class="book-catalog-list">
      <div class="book-catalog-item" v-for="v in catalogs" :key="v.chapter_id">
        <span class="book-catalog-item__name">{{v.chapter_name}}</span>
        <img v-if="v.chapter_is_vip" src="../assets/书库-vip.png" class="book-catalog-item__vip">
      </div>
    </div>
    <!-- <router-link tag="div"
                 :to="BookCatalog"
                 class="book-detail-more">更多目录 > </router-link>
    <div class="section-title section-edge-all"> 同款推荐 </div>
    <div class="book-detail-recommend section-edge-all">
      <x-book v-for="book in recommend"
              :book="book"
              :key="book.id"></x-book>
    </div>-->
  </div>
</template>
<script>
import { BookDetail, BookCatalog, Reader } from "./namespace.js";
import {
  getDetail,
  getCatalog,
  getSimilar,
  addShelf,
  getBookDetail,
  getChapterList
} from "../api";
// import books from "../mock/recommend.js";
import catalogs from "../mock/catalogs.js";
// import vconsole from 'vconsole'
export default {
  name: BookDetail.name,
  data() {
    return {
      test: false,
      BookCatalog: {
        name: BookCatalog.name,
        query: { id: this.$route.query.id }
      },
      Reader: Reader.route,
      book: {},
      extended: true, //大于110的简介隐藏部分
      recommend: [],
      catalogs: [],
      count: 0,
      prevTime: 0,
      endTime: 0,
      showDebug: false
    };
  },
  methods: {
    addBookshelf() {
      addShelf(this.book.book_id).then(r => {
        this.book.is_on_user_shelf = 1;
      });
    },
    introExtend() {
      this.extended = true;
    },
    readBook(cid) {
      this.$router.push({
        name: Reader.name,
        query: {
          bid: this.book.book_id,
          cid: cid
        }
      });
    },
    init(id) {
      console.log(id);
      if (!id) {
        this.$router.replace("/");
      }
      getBookDetail(id).then(r => {
        this.book = r;
        this.test = true;
      });
      getChapterList(id).then(r => {
        this.catalogs = r.list;
      });
    },
    debug() {
      if (this.showDebug) return;
      this.count++;
      this.prevTime = this.endTime;
      this.endTime = new Date().valueOf();
      if (this.endTime - this.prevTime > 3000) this.count = 0;
      if (this.count === 5) {
        // var vConsole = new vconsole()
        this.count = 0;
        this.showDebug = true;
      }
    }
  },
  watch: {
    $route(to) {
      this.init(to.query.id);
    }
  },
  created() {
    this.init(this.$route.query.id);
  }
  // beforeRouteUpdate(to, from, next) {
  //   next();
  //   this.init(to.query.id);
  // },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     console.log(1)
  //     // vm.init(to.query.id);
  //   });
  // }
};
</script>
