<template>
  <section class="recharge dm-wrap">
      <div class="pb22"><el-date-picker  v-model="dateTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="rechargeRecord"></el-date-picker></div> 
      <el-table tooltipEffect="light" :data="tableList" style="width: 100%" v-loading="loading">
      <el-table-column align="left"  prop="timeEnd" label="充值时间" >
        <template slot-scope="scope">
          {{formateDateTimeByType(scope.row.timeEnd,'yyyy-MM-dd-HH-mm-ss')}}
        </template>
      </el-table-column>
      <el-table-column align="left"  prop="transactionId" label="充值流水号"></el-table-column>
      <el-table-column align="left"  prop="payType" label="充值方式" >
         <template slot-scope="scope">
          {{scope.row.payType===1?'微信':'支付宝'}}
         </template>
      </el-table-column>
      <el-table-column label="金额" align="left" prop="totalFee">
        <template slot-scope="scope" >
          {{(scope.row.totalFee/100).toFixed(2)}}元
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></el-pagination>
  </section>
</template>
<script>
import {rechargeRecord} from '@/service/api/rechargeApi.js'
import {formateDateTimeByType} from '@/utils/index.js';

export default {
  name:'recharge-record',
  data() {
    return {
      formateDateTimeByType,
      dateTime:[Date.now()-30*24*60*60*1000,Date.now()],
      loading:false,
      tableList:[],
      listParams:{
        currentPage:1,
        pageSize:20,
        beginTime:'',
        endTime:''
      },
      total:0,

    }
  },
  created(){
    this.rechargeRecord();
    this.$store.commit('mutations_breadcrumb',[{name:'企业管理',path:''},{name:'计费中心',path:'/recharge'},{name:'充值记录',path:''}]);
  },
  methods:{
    handleSizeChange(val) {
      this.listParams.pageSize = val;
      this.rechargeRecord();
    },
    handleCurrentChange(val) {
      this.listParams.currentPage = val;
      this.rechargeRecord();
    },

    async rechargeRecord() {
      this.loading = true;
      if (this.dateTime) {
        this.listParams.beginTime = formateDateTimeByType(this.dateTime[0],'yyyy-MM-dd');
        this.listParams.endTime = formateDateTimeByType(this.dateTime[1],'yyyy-MM-dd');
      } else {
        this.listParams.beginTime = '';
        this.listParams.endTime = '';
      }
      try {
        let res = await rechargeRecord(this.listParams);
        if (res.errorCode === 0 && res.result.result) {
          this.tableList = res.result.result;
        } else {
          this.tableList = [];
        }
      } catch (err) {
        console.log(err)
      }
      this.loading = false;

    }
  }
}
</script>

<style lang="scss" scoped>
.recharge-today{
  &-item{
      padding: 20px;
      margin:10px 20px;
      .fl{
            line-height: 24px;
      }
      .fr{
          line-height: 34px;
      }
  }
}
</style>
