<template>
  <div class="recharge-record">
    <template v-if="recordList.length">
      <p style="font-weight:500;" class="van-hairline--bottom" >充值记录</p>
      <ul>
        <li class="item van-hairline--bottom" v-for="{ id, name, trade_time, chain_times } in recordList" :key="id">
          <div>{{name}}</div>
          <div style="color:#B6B5BA; font-size:12px;">{{trade_time|timeFormat}}</div>
          <div class="count">+{{chain_times}}次</div>
        </li>
      </ul>
    </template>    
    <empty
      v-else
      :name="`chongzhijilu`"
      tip="暂无充值记录"></empty>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import { Cell, Form, Field, CellGroup, Button, Image, RadioGroup, Radio } from 'vant';
import { State } from 'vuex-class';
@Component({
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Image.name]: Image,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
  },
})
export default class RechargeRecord extends Vue {
  @State('userInfo') private userInfo!: any;
  private recordList: [] = [];
  private mounted() {
    this.$api.order.list(1).then((res: any) => {
      this.recordList = res.results || [];
    });
  }
}
</script>
<style scoped lang="scss">
  .recharge-record{
    text-align: left;
    padding: 17px;
    color: #353535;
    font-size: 16px;
    .item{
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(2, 30px);
      grid-auto-flow: column;
      .count{
        grid-row: 1/ span 2;
        align-self: center;
        justify-self: end;
      }
    }
  }
</style>