<template>
  <div class="book-recommend" v-show="init">
    <div
      :class="[
        'book-recommend-head',
        { 'no-complate': book.book_end_status === 0 }
      ]"
    >
      <template v-if="book.book_end_status === 1">
        <img
          class="book-recommend-head__img--complete"
          src="https://cdn-novel.bookkks.com/h5/complete.png"
          alt="完结"
        />
        <p class="book-recommend-head__font">本书已经看完啦</p>
      </template>
      <template v-else-if="book.book_end_status === 0">
        <img
          class="book-recommend-head__img--nocomplete"
          src="https://cdn-novel.bookkks.com/static/img/nocompletev2.jpg"
          alt="未完结"
        />
        <img
          v-if="pushMoreStatus"
          class="book-push-more"
          src="../assets/push-more.png"
          alt=""
          @click="upgBookStatus"
        />
        <img
          v-else
          class="book-push-more book-push-more-suc"
          src="../assets/push-more-suc.png"
          alt=""
        />
        <!-- <p class="book-recommend-head__font">本书未完</p>
        <p class="book-recommend-head__font">敬请期待后续更新</p> -->
      </template>
    </div>
    <div class="book-recommend-body">
      <div class="book-recommend-title section-edge">
        <span class="book-recommend-title__text">作者推荐</span>
        <span class="book-recommend-title__more" @click="updateList">
          换一换
          <i class="icon loading-1" :class="{ 'is-rotate': loading }"></i>
        </span>
      </div>
      <x-book
        class="book-recommend-headline section-edge-all"
        :prevent="loading"
        :key="list[0].book_id"
        :book="list[0]"
        multi
        @click="ClickStatistics(list[0].book_id)"
      >
        <p class="book-city-recommend-two__title">{{ list[0].name }}</p>
        <p class="book-city-recommend-two__intro">{{ list[0].intro }}</p>
      </x-book>
      <div class="book-recommend-other section-edge-all">
        <x-book
          v-for="book in list.slice(1)"
          :prevent="loading"
          :key="book.book_id"
          :book="book"
          @click="ClickStatistics(book.book_id)"
        ></x-book>
      </div>
      <router-link :to="BookCity">
        <input class="book-recommend-btn" type="button" value="去首页" />
      </router-link>
    </div>
  </div>
</template>
<script>
import { BookRecommend, BookCity } from "./namespace.js";
import {
  getReadOverRecommend,
  getDetail,
  getbookFromWhere,
  upgBookStatus
} from "../api";
export default {
  name: BookRecommend.name,
  data() {
    return {
      list: [{}, {}, {}, {}],
      BookCity: BookCity.route,
      loading: true,
      book: {},
      pushMoreStatus: 0,
      init: false
    };
  },
  methods: {
    ClickStatistics(bid) {
      getbookFromWhere(bid, "readerover");
    },
    getList() {
      this.loading = true;
      getReadOverRecommend(this.$route.query.bid).then(r => {
        this.loading = false;
        this.pushMoreStatus = r.book_status.urge_status;
        if (r.recommend_result.length) this.list = r.recommend_result;
        this.init = true;
      });
    },
    updateList() {
      if (this.loading) return;
      this.getList();
    },
    upgBookStatus() {
      upgBookStatus(this.book.book_id).then(() => {
        this.pushMoreStatus = 0;
      });
    }
  },
  created() {
    getDetail(this.$route.query.bid).then(r => {
      this.book = r;
      this.book.book_end_status = parseInt(this.book.book_end_status);
      this.init = true;
    });
    this.getList();
  }
};
</script>
