<template>
  <div class="distribution">
    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" @resert="queryList" @search="queryList" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { userBalanceList } from '@/api/distribution'
@Component({components:{}})
export default class DistributionDevel extends Vue {
  config:any={
    attr:{
      calculateH:true
    },
    // search:{
    //   attr:{
    //     size:'small'
    //   },
    //   columns:[
    //     [{
    //       label:'内部订单号',
    //       prop:'orderId',
    //       component:'by-input'
    //     },{
    //       label:'买家ID',
    //       prop:'buyerId',
    //       component:'by-input'
    //     },{
    //       label:'买家帐号',
    //       prop:'buyerAccount',
    //       component:'by-input'
    //     },{
    //       label:'审核状态',
    //       prop:'status',
    //       component:'by-select',
    //       compConfig:{
    //         attr:{
    //           clearable:true,
    //           data:[{
    //             label:'待审核',
    //             value:'WaitConfirm'
    //           },{
    //             label:'已审核',
    //             value:'Confirmed'
    //           },{
    //             label:'已失效',
    //             value:'Invalid'
    //           }]
    //         }
    //       }
    //     }],
    //     [{
    //       span:6,
    //       label:'支付渠道',
    //       prop:'payment',
    //       component:'by-input'
    //     },{
    //       span:6,
    //       label:'卖家ID',
    //       prop:'sellerId',
    //       component:'by-input'
    //     },{
    //       span:6,
    //       label:'卖家账号',
    //       prop:'sellerAccount',
    //       component:'by-input'
    //     }
    //     // ,{
    //     //   label:'支付时间',
    //     //   prop:'payDate',
    //     //   component:'by-date-picker',
    //     //   compConfig:{
    //     //     attr:{
    //     //       editable:false,
    //     //       type:'datetimerange',
    //     //       format:'yyyy-MM-dd HH:mm:ss'
    //     //     }
    //     //   }
    //     // }
    //     ]
    //   ]
    // },
    tool:{
      tools:{
        // search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        // align:'center',
      },
      columns:[{
        title:'分销订单数',
        field:'orderQuantity',
        width:120
      },{
        title:'余额',
        field:'balance',
        width:120,
      },{
        title:'已结算金额',
        field:'overBalance',
        width:120
      },{
        title:'待结算余额',
        field:'waitBalance',
        width:120
      },{
        title:'不予结算余额',
        field:'unableBalance',
        width:120
      },{
        title:'用户名',
        field:'username',
        width:120
      },{
        title:'下级数量',
        field:'childQuantity',
        width:120
      },{
        title:'收款资料',
        field:'collectionInfo',
        width:120
      },{
        title:'一级分佣金额',
        field:'oneAmount',
        width:120
      },{
        title:'二级分佣金额',
        field:'twoAmount',
        width:120
      },
      // {
      //   title:'三级分佣金额',
      //   field:'threeAmount',
      //   width:120
      // },
      {
        title:'应用ID',
        field:'appId',
        width:120
      },{
        title:'流程ID',
        field:'processId',
        width:120
      },{
        title:'状态',
        field:'status',
        width:140
      }]
    }
  }
  load=false
  isSearch=false
  timeNum = 0;
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  //分页
  pagination(){
    if(this.isSearch){
      this.queryList();
    }else{
      this.getList()
    }
  }
  //列表请求（只有分页，不包含搜素条件）
  getList(){
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      setTimeout(()=>{
        this.getList()
      },500) 
      this.timeNum ++;
      return
    }
    this.isSearch = false;
    let data = (this.$refs.view as any).getPage();
    this.requestList(data);
  }
  //列表请求（包含分页和搜素条件）
  queryList(){
    this.isSearch = true;
    let data = (this.$refs.view as any).getQuery();
    this.requestList(data);
  }
  requestList(data:any){
    this.load = true;
    userBalanceList(data).then((res:any) => {
      this.load = false;
      (this.$refs.view as any).setTableValue(res.data.records);
      let page = {
        pageNo: res.data.current, //当前页
        pageSize: res.data.size, //每页条数
        total: res.data.total //总条数
      };
      (this.$refs.view as any).setPage(page)

    }).catch(()=>{
      this.load = false;
    })
  }
}
</script>

<style lang="scss" scoped>
.distribution{
  width: 100%;
  height: 100%;
}
</style>