<template>
  <div class="record record--recharge">
    <x-header></x-header>
    <div class="section-title">账户信息</div>
    <div class="record-account">
      <div class="record-account__info record__count">
        <span>余额：</span>
        <span class="red">{{user.balance}}</span>
        <span>书币</span>
      </div>
      <router-link :to="Pay"
                   class="record-account__btn x-input--button">
        立即充值
      </router-link>
    </div>
    <hr class="hr">
    <div class="section-title">充值订单</div>
    <transition-group tag="div"
                      name="fade-list"
                      class="record-list"
                      v-if="total">
      <div class="record-item"
           v-for="(v) in record"
           :key="v.id">
        <p>订单号：{{v.trade_no}}</p>
        <p class="record__count">
          <span>充值</span>
          <span class="red">{{v.price}}</span>
          <span>元</span>
        </p>
        <p>{{v.pay_end_at}}</p>
        <div class="record-item__status"
             :style="{color: v.color}">{{v.label}}</div>
      </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 { RecordRecharge, Pay } from "./namespace.js";
// import record from "../mock/record-recharge.js";
import { getRecordRecharge, getUserInfo } from "../api";

export default {
  name: RecordRecharge.name,
  data() {
    return {
      record: [],
      total: 0,
      current: 1,
      user: {},
      Pay: Pay.route
    };
  },
  methods: {
    getOrder(page) {
      getRecordRecharge(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();
    getUserInfo().then(r => {
      this.user = r;
    });
  }
};
</script>
