<import name="x-page" src="../../components/page/page.ux"></import>
 
<template>
  <div class="recharge-record__wrap">
    <div class="flex-box">
      <div class="user-account__wrap" if="{{user}}">
      <div class="account-blance">
        <text class="blance-title">余额</text>
        <text class="blance-info">{{user.balance}}书币</text>
      </div>
      <text class="account-pay" @click="toPay">
        去充值
      </text>
    </div>
    </div>
    <div class=" recharge-list__wrap">
      <div class="title-bar">
        <text class="title">充值订单</text>
      </div>
      <div class="recharge-list">
        <block for="{{rechargeList}}">
          <div class="recharge-item">
            <div class="item-info">
              <text class="item-number">订单号：{{$item.trade_no}}</text>
              <div class="item-pay">
                <text>充值</text>
                <text class="pay-number">{{$item.price}}</text>
                <text>元</text>
              </div>
            </div>
            <text class="item-status {{$item.status==='UNPAID'?'':'paid'}}">{{$item.status==='UNPAID'?'未支付':'已支付'}}</text>
          </div>
        </block>
      </div>
    </div>
    <x-page current="{{page.current}}" total="{{page.total}}" @prev="prev" @next="next"></x-page>
  </div>
</template>

<script>
import router from "@system.router";
import { rechargeApi, getUserInfo } from "../../api/index";
export default {
  private: {
    rechargeList: [],
    user: {},
    page: {
      total: 0,
      current: 1
    },
  },
  onInit() {
    this.getOrder();
    this.getUserInfo();
  },
  async getUserInfo() {
    let user = await getUserInfo();
    this.user = user;
  },
  async getOrder(page = 1, page_size = 10) {
    let res = await rechargeApi({ page: page, page_size });
    let { list, meta } = res;
    this.rechargeList = list;
    this.page = {
      total: meta.last_page,
      current: meta.current_page
    }
  },
  toPay() {
    router.push({
      uri: "/views/Pay"
    })
  },
  prev() {
    this.getOrder(--this.page.current);
  },
  next() {
    this.getOrder(++this.page.current);
  }
}
</script>

<style lang="less">
@import "../../assets/less/recharge.less";
</style>
