<template>
  <div class="book-city"
       ref="wrap">
    <div class="book-city-header">
      <div class="book-city-theme">
        <v-touch @tap="themeChange('boy')"
                 :class="[ 'book-city-theme__item', { 'is-active': theme === 'boy' } ]">男生</v-touch>
        <v-touch @tap="themeChange('girl')"
                 :class="[ 'book-city-theme__item', { 'is-active': theme === 'girl' } ]">女生</v-touch>
      </div>
      <div class="x-input--search">
        <img class="x-input__icon"
             src="../assets/搜索.png">
        <input class="x-input__inner"
               placeholder="主角/书名"
               type="text"
               @focus="$router.push(BookStock)">
      </div>
    </div>
    <div class="book-city-nav">
      <router-link tag="dl"
                   :to="BookStock"
                   class="book-city-nav__item">
        <dt><img class="book-city-nav__icon"
               src="https://cdn-novel.bookkks.com/static/img/library-2.png"></dt>
        <dd class="book-city-nav__text">书库</dd>
      </router-link>
      <router-link tag="dl"
                   :to="Rank"
                   class="book-city-nav__item">
        <dt><img class="book-city-nav__icon"
               src="https://cdn-novel.bookkks.com/static/img/rank-2.png"></dt>
        <dd class="book-city-nav__text">排行榜</dd>
      </router-link>
      <router-link tag="dl"
                   :to="BookLimitFree"
                   class="book-city-nav__item">
        <dt><img class="book-city-nav__icon"
               src="https://cdn-novel.bookkks.com/static/img/free-2.png"></dt>
        <dd class="book-city-nav__text">限免专区</dd>
      </router-link>
      <router-link tag="dl"
                   :to="BookShelf"
                   class="book-city-nav__item">
        <dt><img class="book-city-nav__icon"
               src="https://cdn-novel.bookkks.com/static/img/bookshelf-2.png"></dt>
        <dd class="book-city-nav__text">书架</dd>
      </router-link>
      <router-link tag="dl"
                   :to="Person"
                   class="book-city-nav__item">
        <dt><img class="book-city-nav__icon"
               src="https://cdn-novel.bookkks.com/static/img/personal-2.png"></dt>
        <dd class="book-city-nav__text">个人中心</dd>
      </router-link>
    </div>
    <div class="book-city-banner book-city-adbanner">
      <mt-swipe stop-propagation>
        <mt-swipe-item v-for="book in banner"
                       :key="book.id">
          <!-- <x-book :book="book"
                  width="1.5rem"
                  multi>
            <p class="book-city-banner__title">{{book.name}}</p>
            <p class="book-city-banner__intro">{{book.intro}}</p>
          </x-book> -->
          <template v-if="book.redirect_url">
            <a href="javascript:void(0)"
               @touchstart="onTapBegin"
               @touchmove="onTapMove"
               @touchend="onTapEnd($event, book)">
              <img :src="book.banner_url"
                   alt="">
            </a>
          </template>
          <template v-else>
            <img :src="book.banner_url"
                 alt="">
          </template>
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="book-city-recommend">
      <template v-for="(list,i) in list">
        <div class="book-city-recommend-one"
             v-if="!(i%2)"
             :key="list.type">
          <div class="section-title">{{list.lable}}</div>
          <div class="book-city-recommend-one__list">
            <div class="book-city-recommend-one__item"
                 v-for="book in list.books"
                 :key="book.id">
              <x-book :book="book"></x-book>
            </div>
          </div>
        </div>
        <div class="book-city-recommend-two"
             v-else
             :key="list.type">
          <div class="section-title">{{list.lable}}</div>
          <div class="book-city-recommend-two__line">
            <div class="book-city-recommend-two__item"
                 v-for="book in list.books.slice(0,4)"
                 :key="book.id">
              <x-book :book="book"
                      width="1.5rem"></x-book>
            </div>
          </div>
          <div class="book-city-recommend-two__list">
            <div class="book-city-recommend-two__section"
                 v-for="book in list.books.slice(4)"
                 :key="book.id">
              <x-book :book="book"
                      width="1.5rem"
                      multi>
                <p class="book-city-recommend-two__title">{{book.book_name}}</p>
                <p class="book-city-recommend-two__desc">{{book.book_summary}}</p>
              </x-book>
            </div>
          </div>

        </div>
        <!-- <div class="book-city-recommend-two"
             v-else
             :key="list.type">
          <div class="section-title">{{list.lable}}</div>
          <x-book :book="list.books[0]"
                  multi>
            <p class="book-city-recommend-two__title">{{list.books[0].name}}</p>
            <p class="book-city-recommend-two__intro">{{list.books[0].intro}}</p>
          </x-book>
          <div class="book-city-recommend-two__list">
            <router-link :to="{name:BookDetail.name,query:{id: book.book_id}}"
                         tag="p"
                         class="book-city-recommend-two__item"
                         v-for="book in list.books.slice(1)"
                         :key="book.id">
              <span class="book-city-recommend-two__type">[{{book.book_category}}] </span>
              <span class="book-city-recommend-two__name">{{book.name}}</span>
            </router-link>
          </div>
        </div>
 -->

      </template>
    </div>
    <!-- <div class="book-city-rank">
      <div class="section-title section-edge">排行榜</div>
      <div class="book-city-rank__types">
        <v-touch @tap="rankChange(1)"
                 :class="['book-city-rank__type', {'is-active': activeRank === 1}]">点击榜</v-touch>
        <v-touch @tap="rankChange(2)"
                 :class="['book-city-rank__type', {'is-active': activeRank === 2}]">字数榜</v-touch>
        <v-touch @tap="rankChange(3)"
                 :class="['book-city-rank__type', {'is-active': activeRank === 3}]">新书榜</v-touch>
      </div>
      <hr style="border-color: #f7f7f7">
      <mt-tab-container :value="activeRank"
                        @input="rankChange"
                        swipeable>
        <mt-tab-container-item :id="i"
                               v-for="i in 3"
                               :key="i">
          <router-link tag="div"
                       :to="{
                         name:BookDetail.name,
                         query:{
                           id: book.book_id
                         }
                       }"
                       class="book-city-rank__item"
                       v-for="(book,i) in rank[i-1] || []"
                       :key="book.book_id">
            <span class="book-city-rank__icon book-city-rank__icon--normal"
                  :class="i<3?'book-city-rank__icon--on':''">{{i+1}}</span>
            <span class="book-city-rank__name"
                  :class="i<3?'book-city-rank__name--on':''">{{book.name}}</span>
            <span class="book-city-rank__icon book-city-rank__icon--hot"
                  v-if="i<3"></span>
            <span class="book-city-rank__num"
                  v-else></span>
          </router-link>
        </mt-tab-container-item>
      </mt-tab-container>
    </div> -->
    <x-footer></x-footer>
  </div>
</template>
<script>
import {
  BookCity,
  BookStock,
  Rank,
  BookShelf,
  BookDetail,
  Person,
  BookLimitFree,
} from "./namespace.js";
// import books from "../mock/recommend.js";
import { getIndex, getRank } from "../api";
export default {
  name: BookCity.name,
  data() {
    return {
      theme: this.$parent.theme,
      BookStock: BookStock.route,
      Rank: Rank.route,
      BookShelf: BookShelf.route,
      Person: Person.route,
      BookDetail: BookDetail.route,
      BookLimitFree: BookLimitFree.route,
      is_click: true,
      rank: [],
      activeRank: 1,
      banner: [],
      list: [],
    };
  },
  methods: {
    rankChange(i) {
      if (i === this.activeRank) return;
      getRank(i, 1).then((r) => {
        if (!this.rank[i - 1])
          this.rank[i - 1] =
            r[i + "+1"][this.theme === "girl" ? "female" : "male"];
        this.activeRank = i;
      });
    },
    themeChange(theme) {
      this.theme = theme;
      this.$parent.theme = theme;
      localStorage.setItem("theme", theme);
      this.getIndex();
      getRank(this.activeRank, 1).then((r) => {
        this.rank = [];
        this.rank[this.activeRank - 1] =
          r[this.activeRank + "+1"][this.theme === "girl" ? "female" : "male"];
      });
    },
    getIndex() {
      getIndex(this.theme).then((r) => {
        this.banner = r[0].books;
        this.list = r.slice(1);
        const top = document.scrollingElement.scrollTop;
        this.$nextTick(() => {
          document.scrollingElement.scrollTop = top;
        });
      });
    },
    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) {
        location.href = book.redirect_url;
      }
      this.is_click = true;
    },
  },
  mounted() {
    // 哀悼日 网页变灰
    const mournDay =
      new Date().getTime() < new Date("2020-04-04").setHours(23, 59, 59, 999);
    if (mournDay) {
      this.$refs.wrap.style = "filter: grayscale(100%)";
    }
  },
  created() {
    this.getIndex();
    getRank().then((r) => {
      this.rank.push(r["1+1"][this.theme === "girl" ? "female" : "male"]);
    });
  },
};
</script>
