<template>
  <div class="order-pay">
    <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 payOrderTag from './components/tag.vue'
import orderFrom from './components/orderFrom.vue'
import {query} from '@/api/orderPay'
@Component({components:{}})
export default class OrderPay 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:'orderId',
        width:120
      },{
        title:'订单来源',
        field:'sourceFrom',
        width:150,
        component:orderFrom
      },{
        title:'外部支付单号',
        field:'outerPayId',
        width:150
      },{
        title:'是否支付',
        field:'isOrderPay',
        width:120,
        component:'text-change',
        compConfig:{
          attr:{
            data:[{
              value:0,
              label:'否'
            },{
              value:1,
              label:'是'
            }]
          }
        }
      },{
        title:'支付渠道',
        field:'payment',
        width:120
      },{
        title:'买家ID',
        field:'buyerId',
        width:120
      },{
        title:'买家帐号',
        field:'buyerAccount',
        width:120
      },{
        title:'卖家ID',
        field:'sellerId',
        width:120
      },{
        title:'卖家账号',
        field:'sellerAccount',
        width:120
      },{
        title:'支付金额',
        field:'amount',
        width:120
      },{
        title:'支付时间',
        field:'payDate',
        width:140
      },{
        title:'审核状态',
        field:'status',
        width:120,
        component:payOrderTag
      },{
        title:'店铺名称',
        field:'shopName',
        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;
    query(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>
.order-pay{
  height: 100%;
  width: 100%;
  overflow-y: hidden;
}
</style>