<template>
  <div class="rank">
    <x-header></x-header>
    <div class="rank-type">
      <v-touch v-for="(v,i) in  ['点击榜','字数榜','新书榜']"
               :key="i"
               tag="input"
               type="button"
               class="x-input--button"
               :class="{'is-plain': i+1 !== type}"
               :value="v"
               @tap="typeChange(i+1)">
      </v-touch>
    </div>
    <div class="rank-range">
      <v-touch v-for="(v,i) in  ['周','月','总']"
               :key="i"
               tag="input"
               type="button"
               class="x-input--button is-small"
               :class="{'is-plain': i+1 !== range}"
               :value="v"
               @tap="rangeChange(i+1)">
      </v-touch>
    </div>
    <mt-tab-container :value="tabRange"
                      @input="rangeChange"
                      swipeable>
      <mt-tab-container-item :id="'range-'+ i"
                             v-for="i in 3"
                             :key="i">
        <template v-if="theme === 'girl'">
          <div class="section-title section-edge">女生排行</div>
          <transition-group tag="div"
                            class="rank-list rank-list--boy"
                            name="fade-list">
            <template v-if="rank[type+'+'+i]">
              <x-book v-for="book in rank[type+'+'+i].female"
                      :key="book.book_id"
                      class="rank-book"
                      :book="book"
                      width="1.8rem"
                      multi>
                <x-book-info :book="book"></x-book-info>
              </x-book>
            </template>
          </transition-group>
        </template>
        <div class="section-title section-edge">男生排行</div>
        <transition-group tag="div"
                          class="rank-list rank-list--boy"
                          name="fade-list">
          <template v-if="rank[type+'+'+i]">
            <x-book v-for="book in rank[type+'+'+i].male"
                    :key="book.book_id"
                    class="rank-book"
                    :book="book"
                    width="1.8rem"
                    multi>
              <x-book-info :book="book"></x-book-info>
            </x-book>
          </template>
        </transition-group>
        <template v-if="theme === 'boy'">
          <div class="section-title section-edge">女生排行</div>
          <transition-group tag="div"
                            class="rank-list rank-list--boy"
                            name="fade-list">
            <template v-if="rank[type+'+'+i]">
              <x-book v-for="book in rank[type+'+'+i].female"
                      :key="book.book_id"
                      class="rank-book"
                      :book="book"
                      width="1.8rem"
                      multi>
                <x-book-info :book="book"></x-book-info>
              </x-book>
            </template>
          </transition-group>
        </template>
      </mt-tab-container-item>
    </mt-tab-container>
    <x-footer></x-footer>
  </div>
</template>
<script>
import { Rank } from "./namespace.js";
// import books from "../mock/recommend.js";
import { getRank } from "../api";
export default {
  name: Rank.name,
  data() {
    return {
      type: 1,
      range: 1,
      rank: {},
      theme: this.$parent.theme
    };
  },
  computed: {
    tabRange() {
      return "range-" + this.range;
    }
  },
  methods: {
    typeChange(i) {
      if (this.type === i) return;
      getRank(i, this.range).then(r => {
        this.type = i;
      });
    },
    rangeChange(i) {
      if(typeof i !== 'number'){
        i = +i.match(/\d/)[0]
      }
      if (this.range === i) return;
      getRank(this.type, i).then(r => {
        this.range = i;
      });
    }
  },
  created() {
    getRank().then(r => {
      this.rank = r;
    });
  }
};
</script>
