<!--
 * @Author: ZhengXiaowei
 * @Date: 2019-05-14 09:41:22
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-06-28 16:25:10
 * @Description: file content
 -->
<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.book_category }}</span>
        <span class="red x-book-info__status">{{
          book.book_end_status ? "完结" : "连载"
        }}</span>
      </p>
      <p class="x-book-info__count">字数：{{ book.book_word_count }}</p>
      <div class="book-detail-handle">
        <div
          class="book-detail-handle__btn book-detail-handle__add"
          @click="addBookshelf"
        >
          {{ book.is_on_user_shelf ? "已" : "" }}加入书架
        </div>
        <div
          @click="readBook(book.first_cid)"
          class="book-detail-handle__read book-detail-handle__btn"
        >
          立即阅读
        </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>
    <router-link
      :to="{
        name: Reader.name,
        query: { bid: book.book_id, cid: book.last_cid }
      }"
      tag="div"
      class="book-detail-lastest"
      >最新章节：{{ book.last_chapter }}</router-link
    >
    <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">
      <router-link
        class="book-catalog-item"
        :to="{ name: Reader.name, query: { bid: v.bid, cid: v.chapter_id } }"
        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"
        />
      </router-link>
    </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.book_id"
        prevent
        @click="toSimilar(book.book_id)"
      ></x-book>
    </div>
  </div>
</template>
<script>
import { BookDetail, BookCatalog, Reader } from "./namespace.js";
import { getDetail, getCatalog, getSimilar, addShelf } from "../api";
// import books from "../mock/recommend.js";
import catalogs from "../mock/catalogs.js";

import wx from "weixin-js-sdk";
import useWxConfig from "../util/share";

let book = null;
// 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() {
      this.book = book;
      console.log(this.book.cover);
      this.extended = book.intro.length < 110;
      this.test = true;
      getSimilar(book.book_id, book.book_category_id).then(r => {
        this.recommend = r;
      });
      getCatalog(book.book_id).then(r => {
        this.catalogs = r.data.slice(0, 10);
      });
    },
    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;
      }
    },
    toSimilar(book_id) {
      this.$router.replace({
        name: BookDetail.name,
        query: {
          id: book_id
        }
      });
    }
  },
  watch: {
    $route(to) {
      this.init(to.query.id);
    },
    book(b) {
      // 和喜悦相关的分享
      const xiyue_config = window.options.xiyue_info;
      const is_leyue_site = !!~location.href.indexOf(".leyuee");
      console.log("is leyuee site:", is_leyue_site);
      if (xiyue_config && is_leyue_site) {
        let book = this.book;
        let redirect_url = `${location.origin}/reader?bid=${book.book_id}&cid=${book.first_cid}`;
        let configuration = {
          // config: newt.share_config,
          book: {
            cover_url: book.cover_url,
            book_summary: book.book_summary,
            book_name: book.book_name
          },
          link:
            xiyue_config.register_url +
            "?openid=" +
            xiyue_config.openid +
            "&redirect=" +
            encodeURIComponent(redirect_url)
        };
        useWxConfig(wx, configuration);
      }
    }
  },
  created() {
    this.init();
  },
  beforeRouteUpdate(to, from, next) {
    getDetail(to.query.id, "detail")
      .catch(e => {
        let replace_url = e.data.data.url + location.pathname + location.search;
        location.replace(replace_url);
      })
      .then(r => {
        book = r;
        next();
      });
  },
  beforeRouteEnter(to, from, next) {
    let pos;
    if (to.params && to.params.pos) {
      pos = to.params.pos;
    }
    let id = to.query.id;
    if (!id) next({ path: "/", replace: true });
    getDetail(id, "detail", pos)
      .catch(e => {
        let replace_url = e.data.data.url + location.pathname + location.search;
        location.replace(replace_url);
      })
      .then(r => {
        book = r;
        next();
      });
  }
};
</script>
