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

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import TagState from "./component/tagState.vue";
import ItemSku from "./component/ItemSku.vue";
import {query,WMSCreateEntryOrder} from '@/api/WMSInstoreBill'
import itemsModal from './component/itemsModal.vue'
@Component({components:{itemsModal}})
export default class WMSProduct extends Vue {
  load=false;
  time:any;
  timeNum = 0;
  isSearch=false;
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small'
      },
      columns:[
        [{
          label:'入库方式',
          prop:'sendType',
          span:8,
          component:'by-select',
          compConfig:{
            attr:{
              clearable:true,
              data: [{
                label:'越库入库',
                value:'YKRK'
              },{
                label:'B2B入库',
                value:'B2BRK'
              },{
                label:'B2C入库',
                value:'B2CRK'
              }]
            }
          }
        },
        {
          label:'状态',
          prop:'status',
          span:8,
          component:'by-select',
          compConfig:{
            attr:{
              clearable:true,
              data:[{
                value:'WAIT_CONFIRM',
                label:'创建成功，等待入库确认'
              },{
                value:'FAILURE',
                label:'订单失败'
              },{
                value:'FINISH',
                label:'订单完成'
              },{
                value:'CANCEL',
                label:'订单取消'
              }]
            }
          }
        }],
      ]
    },
    tool:{
      tools:{
        // add:true,
        // delete:true,
        search:true,
        refresh:true
      },
      customTools:[
        { name: '商品入库', icon: 'el-icon-plus', event:{
          click:() => {
            this.showModal()
          }
        }}
      ]
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'WMS同步单号',
        field:'syncId'
      },
      {
        title:'WMS仓库编号',
        field:'warehouseCode'
      },
      {
        title:'入库类型',
        field:'sendType',
        component: 'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'越库入库',
              value:'YKRK'
            },{
              label:'B2B入库',
              value:'B2BRK'
            },{
              label:'B2C入库',
              value:'B2CRK'
            }]
          }
        }
      },
      {
        title:'状态',
        field:'status',
        width:150,
        component:TagState
      },
      {
        title:'是否全部入库',
        field:'isAllIn',
        component: 'textChange',
        compConfig:{
          attr:{
            data:[{
              label:'全部入库',
              value:1,
              backgroundColor:'#f0f9eb',
              color:'#67c23a'
            },{
              label:'部分入库',
              value:0,
              backgroundColor:'#fef0f0',
              color:'#f56c6c'
            }]
          }
        }
      },
      {
        title:'订单完成时间',
        field:'orderConfirmTime',
        width:150
      },
      {
        title:'操作',
        action:true,
        width:100,
        plugins:[{
          name:'查看商品',
          event:{
            click:(item:any) => {
              this.itemInfo(item.items);
            }
          }
        }]
      }
    ]
    },
    modal:{
      tool:{
        tools:{
          return:true,
          // add:true
        },
        customTools:[{
          name: '入库推送', 
          icon: 'el-icon-plus',
          event:{
            click:() => {
              (this.$refs.view as any).getFormValidate(this.addInStore)
            }
          }
        }]
      },
      form:{
        attr:{
          width:'1000px',
          size:'small',
          labelWidth:'130px',
          rules:{
            partnerId:[
              {required: true, message: '请选择货主', trigger: 'change'}
            ],
            sendType:[
              {required: true, message: '请选择所属平台', trigger: 'change'}
            ],
            items:[
              {type: 'array',required: true, message: '请选择物料', trigger: 'change'},
            ]
          }
        },
        columns:[
          [{
            label:'货主',
            prop:'partnerId',
            component:'by-select',
            compConfig:{
              request:{
                url:'/omsOrder/omsPartner/queryAll',
                method:'get'
              },
              attr:{
                clearable:true,
                defaultIndex:0,
                label:'wmsMemberName',
                value:'id'
              }
            }
          },{
            label:'入库方式',
            prop:'sendType',
            component:'by-select',
            compConfig:{
              attr:{
                clearable:true,
                data: [{
                  label:'越库入库',
                  value:'YKRK'
                },{
                  label:'B2B入库',
                  value:'B2BRK'
                },{
                  label:'B2C入库',
                  value:'B2CRK'
                }]
              }
            }
          }],
          [{
            label:'物料',
            prop:'items',
            component:ItemSku
          }],
          [{
            label:'备注',
            prop:'remark',
            component:'by-input',
            compConfig:{
              attr:{
                type:'textarea'
              }
            }
          }]
        ]
      }
    }
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }
  //查看商品信息
  itemInfo(item:any){
    if(!item){
      this.$message('无法查到商品信息！');
      return
    }
    try{
      let data = JSON.parse(item);
      (this.$refs.itemsModal as any).setShow(true);
      (this.$refs.itemsModal as any).setData(data);
    }catch(e){
      this.$message('商品信息有误，请检查！');
    }
    
  }
  //分页
  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;
    })
  }
  //表单工具栏按钮事件
  modalHandle(n:string){
    if(n == 'onAdd'){
      (this.$refs.view as any).getFormValidate(this.addInStore)
    }
  }
  //表格工具栏按钮事件
  clickHandle(n:string){ 
    if(n == 'onAdd'){
      this.config.modal.tool.tools.add = true;
      delete this.config.modal.tool.tools.save;
      (this.$refs.view as any).initFormTool();
    }
  }
  showModal() {
    (this.$refs.view as any).modalShow = true
  }
  //添加
  addInStore(){
    let value = (this.$refs.view as any).getFormValue();
    if(value){
      this.load = true;
      WMSCreateEntryOrder(value).then((res:any)=>{
        this.load = false;
        this.$message({
          message:res.msg,
          type:'success'
        });
        (this.$refs.view as any).closeModal();
        this.getList();
      }).catch(()=>{
        this.load = false;
      })
    }
  }
  //点击详情
  detail(){
    this.config.modal.tool.tools.save = true;
    delete this.config.modal.tool.tools.add;
    (this.$refs.view as any).initFormTool();
  }
}
</script>

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