<template>
  <div class="record record--order">
    <x-header></x-header>
    <div class="record-head">
      <p class="is-active">章节</p>
      <router-link tag="p"
                   replace
                   :to="RecordOrderBook">整本</router-link>
      <router-link tag="p"
                   replace
                   :to="RecordGift">送礼物</router-link>
    </div>
    <transition-group tag="div"
                      class="record-list"
                      name="fade-list"
                      v-if="total">
      <div class="record-item"
           v-for="(v) in record"
           :key="v.id">
        <p class="record-item__name">{{v.book_name}}</p>
        <p class="record-item__chapter">{{v.chapter_name}}</p>
        <p class="record-item__time">{{v.created_at}}</p>
        <p class="record-item__fee red">{{v.fee}} {{typeof v.fee === 'number' ? "书币" : ""}}</p>
      </div>
    </transition-group>
    <x-page v-if="record.length"
            @change="getOrder"
            :current="current"
            :total="total"></x-page>
    <div class="record-none"
         v-else>
      暂无消费记录
    </div>
  </div>
</template>
<script>
import { RecordOrder, RecordOrderBook, RecordGift } from "./namespace.js";
// import record from "../mock/record-subscribe.json";
import { getRecordOrderByChapter } from "../api";
export default {
  name: RecordOrder.name,
  data() {
    return {
      RecordOrderBook: RecordOrderBook.route,
      RecordGift: RecordGift.route,
      record: [],
      total: 0,
      current: 1
    };
  },
  methods: {
    getOrder(page) {
      getRecordOrderByChapter(page).then(r => {
        this.record = r.list.map((item, i) => {
          return Object.assign(item, {
            id: i + 1
          });
        });
        this.current = r.meta.current_page;
        this.total = r.meta.last_page;
        scrollTo(0, 0);
      });
    }
  },
  created() {
    this.getOrder();
  }
};
</script>
