<template>
  <div class="page">
    <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 { returnOrder } from '@/api/cancelGoods'
import Items from "./components/items.vue";
@Component({components:{}})
export default class CancelGoods extends Vue {
  load=false;
  time:any;
  timeNum = 0;
  isSearch=false;
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small',
        labelWidth:'120px'
      },
      columns:[
        [{
          label:'物流编码',
          prop:'logisticsCode',
          component:'by-input',
          compConfig:{}
        },{
          label:'物流单号',
          prop:'expressCode',
          component:'by-input',
          compConfig:{}
        },
        // {
        //   label:'WMS同步单号',
        //   prop:'syncId',
        //   component:'by-input',
        //   compConfig:{}
        // },
        {
          label:'发货单ID',
          prop:'deliveryOrderId',
          component:'by-input',
          compConfig:{}
        }]
      ]
    },
    tool:{
      tools:{
        // add:true,
        // delete:true,
        search:true,
        refresh:true
      }
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'发货单ID',
        field:'deliveryOrderId',
        width:120
      },{
        title:'入库类型',
        field:'sendType',
        width:120
      },
      // {
      //   title:'入库确认回调地址',
      //   field:'callbackUrl',
      //   width:150
      // },
      {
        title:'物流编码',
        field:'logisticsCode',
        width:120
      },{
        title:'物流名称',
        field:'logisticsName',
        width:120
      },{
        title:'物流单号',
        field:'expressCode',
        width:120
      },{
        title:'商品',
        field:'items',
        component:Items,
        width:150
      },{
        title:'退货原因',
        field:'reason',
        width:150
      },{
        title:'备注',
        field:'remark',
        width:140
      },{
        title:'状态',
        field:'status',
        component:'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'创建成功，等待入库确认',
              value:'WAIT_CONFIRM'
            },{
              label:'订单失败',
              value:'FAILURE'
            },{
              label:'订单完成',
              value:'FINISH'
            },{
              label:'订单取消',
              value:'CANCEL'
            }]
          }
        },
        width:120
      },{
        title:'WMS同步单号',
        field:'syncId',
        width:120
      },{
        title:'是否全部入库',
        field:'isAllIn',
        component:'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'部分入库',
              value:0
            },{
              label:'全部入库',
              value:1
            }]
          }
        },
        width:120
      },{
        title:'订单完成时间',
        field:'orderConfirmTime',
        width:140
      },{
        title:'创建时间',
        field:'createTime',
        width:140
      }]
    },
  }

  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;
    returnOrder(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>
.page{
  height: 100%;
  width: 100%;
}
</style>