<template>
  <div>
    <div style="min-height: 400px;">
      <el-table :data="rechargeList">
        <el-table-column prop="createTime" label="充值时间"></el-table-column>
        <el-table-column prop="" label="充值金额">
          <template slot-scope="scope">
            <div>￥{{ scope.row.amount.toFixed(2) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="" label="支付方式">
          <template slot-scope="scope">
            <div>{{showPayMent(scope.row.paymentType)}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 20px;">
      <el-pagination :current-page.sync="query.pageNum" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 50, 100]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" background>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { balanceLogs } from "../../api/amount.js";
export default {
  data() {
    return {
      rechargeList: [],
      query: {
        source: 1,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
    };
  },
  created() {
    this.getBalanceLogs();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.rechargeList = [];
      this.getBalanceLogs();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.rechargeList = [];
      this.getBalanceLogs();
    },
    getBalanceLogs() {
      let params = { ...this.query };
      balanceLogs(params).then((res) => {
        if (res.code == 200) {
          this.rechargeList = res.data.data || [];
          this.total = res.data.totalNums || 0;
        }
      });
    },
    showPayMent(type) {
      let name;
      switch (type) {
        case 1:
          name= '支付宝支付'
          break;
        case 2:
          name= '微信支付'
          break;
        case 3:
          name= '银联支付'
          break;
        case 4:
          name= '余额支付'
          break;
        case 5:
          name= '三方运力支付'
          break;

        default:
          name = "--";
          break;
      }
      return name;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table td.el-table__cell {
  text-align: center !important;
}
/deep/ .el-table th.el-table__cell.is-leaf {
  text-align: center !important;
}
</style>
