<template>
  <div class="recharge-record">
      <p style="font-weight:500;">充值记录</p>
      <ul>
        <li class="item" v-for="{id, name, chain_times, pay_time} in recordList" :key="id">
          <div>{{name}}</div>
          <div>{{pay_time}}</div>
          <div class="count">{{chain_times}}</div>
        </li>
      </ul>
  </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;
    .item{
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(2, 30px);
      grid-auto-flow: column;
      border-bottom:  1px solid red;
      .count{
        grid-row: 1/ span 2;
        align-self: center;
        justify-self: end;
      }
    }
  }
</style>