<template>
  <div class="book-recent">
    <x-header>
      <div class="book-shelf-head">
        <span class="book-shelf-head__item is-active">最近阅读</span>
        <router-link tag="span"
                     replace
                     :to="BookShelf"
                     class="book-shelf-head__item">我的书架</router-link>
      </div>
    </x-header>
    <div class="banner-bar"
         v-if="hotList.length">
      <!-- <div class="book-shelf-bar">
        <div class="section-title">热门推荐</div>
      </div> -->
      <div class="book-city-banner">
        <mt-swipe>
          <mt-swipe-item v-for="(book,index) in hotList"
                         :key="index">
            <a href="javascript:void(0)"
               @touchstart="onTapBegin"
               @touchmove="onTapMove"
               @touchend="onTapEnd($event, book)">
              <x-book :book="book"
                      width="1.5rem"
                      multi
                      prevent>
                <p class="book-city-banner__title">{{book.book_name}}</p>
                <p class="book-city-banner__intro">{{book.book_summary}}</p>
              </x-book>
            </a>
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </div>
    <div class="book-shelf-bar">
      <div class="section-title">最近阅读<span>（共{{books.length}}本）</span></div>
      <v-touch class="book-shelf-bar__edit"
               @tap="editChange">{{edit?'完成':'管理'}}</v-touch>

    </div>
    <div class="book-recent-list"
         v-infinite-scroll="loadMore"
         infinite-scroll-disabled="loading"
         infinite-scroll-distance="10">
      <x-book v-for="(book,index) in books"
              :key="book.book_id"
              :book="book"
              class="book-recent-book"
              width="1.5rem"
              prevent
              @click="routeReader(book)"
              multi>
        <p class="x-book-info__name free-name">{{book.book_name}}
          <img v-if="book.is_advertise_sub"
               src="../assets/free-read.jpg" />
        </p>
        <p class="x-book-info__flex">
          <span class="x-book-info__lastest">
            <span class="red">最新：</span>{{book.last_chapter}}</span>
          <img src="../assets/书库-vip.png"
               class="x-book-info__vip">
        </p>
        <p class="x-book-info__recent">上次阅读：{{book.chapter_name}}</p>
        <div class="book-recent-book__add"
             @click.stop="addShelf(book)">
          <template v-if="!book.is_on_user_shelf">
            <span class="book-recent-book__heart">♥</span>加入书架
          </template>
          <template v-else>
            <span class="book-recent-book__heart is-added">♥</span>已加入书架
          </template>
        </div>
        <div slot="shadow"
             class="x-book-shadow"
             :class="edit?'is-edit':''"
             @click.stop="delBook(book,index)"></div>
      </x-book>
      <mt-spinner v-if="!isLoadLast"
                  type="fading-circle"
                  color="#32a1ff"></mt-spinner>
    </div>
    <x-footer></x-footer>
    <!-- <div class="free-entry"
         v-if="showFreeEntry">
      <img src="../assets/recent-free__entry.png"
           alt=""
           @click="toFreePage">
    </div> -->
    <div class="free-entry activity-entry"
         style="top: 70%"
         v-if="activity_link && activity_link.url">
      <img :src="activity_link.image"
           alt=""
           @click="tapActivity">
    </div>
  </div>
</template>
<script>
import { BookRecent, BookShelf, Reader, BookDetail } from "./namespace.js";
import {
  getReadrecord,
  delReadrecord,
  addShelf,
  recentSlideList,
  getbookFromWhere,
} from "../api";
// import books from "../mock/recommend.js";
export default {
  name: BookRecent.name,
  data() {
    return {
      BookShelf: BookShelf.route,
      books: [],
      edit: false,
      loading: true,
      isLoadLast: true,
      is_click: true,
      hotList: [],
      hideBookName: !!window.options.hide_book_name,
      showFreeEntry: window.options.guidepersonalaccount,
      activity_link: window.options.activity_link,
    };
  },
  methods: {
    ClickStatistics(bid) {
      console.log(bid);
      getbookFromWhere(bid, "readrecord");
    },
    loadMore() {
      this.loading = true;
      setTimeout(() => {
        console.log("loadMore");
        this.books = this.books.concat(this.books);
        this.loading = false;
      }, 2500);
    },
    editChange() {
      this.edit = !this.edit;
    },
    addShelf(book) {
      if (book.is_on_user_shelf) return;
      addShelf(book.bid).then((r) => {
        book.is_on_user_shelf = 1;
      });
    },
    delBook(book, index) {
      if (this.edit) {
        this.edit &&
          delReadrecord(book.bid).then((r) => {
            this.books.splice(index, 1);
          });
      } else {
        this.routeReader(book);
      }
    },
    routeReader(book) {
      this.$router.push({
        name: Reader.name,
        query: {
          bid: book.bid,
          cid: book.cid,
        },
      });
    },
    getRecentSwiperList() {
      recentSlideList().then((r) => {
        this.hotList = r.map((b) => {
          return Object.assign(b, {
            cover: b.cover_url,
          });
        });
      });
    },
    toFreePage() {
      if (this.showFreeEntry) {
        location.href = this.showFreeEntry.link + "&p_src=recent";
      }
    },
    tapActivity() {
      location.href = this.activity_link.url;
    },
    onTapBegin(e) {
      const { pageX } = e.touches[0];
      this.pageX = pageX;
    },
    onTapMove(e) {
      const { pageX } = e.touches[0];
      if (Math.abs(pageX - this.pageX) < 10) {
        this.is_click = true;
      } else this.is_click = false;
    },
    onTapEnd(e, book) {
      if (this.is_click) {
        this.ClickStatistics(book.book_id);
        this.$router.push({
          name: BookDetail.name,
          query: { id: book.book_id },
          params:{pos:'recent_banner'}
        });
      }
      this.is_click = true;
    },
  },
  created() {
    getReadrecord().then((r) => {
      this.books = r;
      this.getRecentSwiperList();
    });
  },
};
</script>

<style lang="scss">
.book-shelf-bar {
  padding-left: 0;

  span {
    font-size: 0.24rem;
    color: #999;
  }
}
</style>

<style lang="scss">
.free-entry {
  position: fixed;
  right: 0.4rem;
  top: 50%;
  transform: translate(0, -50%);
  font-size: 0;

  img {
    width: 1.72rem;
    height: 1.72rem;
  }
}
</style>