<template>
  <div class="generateBatch">
    <module-view :propConfig="config" ref="view" v-loading="load" @pagination="pagination" @onRefresh="getList" 
    @resert="queryList" @search="queryList" />
    <addUserModal ref="addUserModalView" @handle="handle" />
    <UpdateStateModal ref="updateStateModalView" @stateHandle="stateHandle" />
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import addUserModal from "./addUserModal.vue"
import Cookies from 'js-cookie'
import UpdateStateModal from "./updateStateModal.vue";
@Component({components:{addUserModal, UpdateStateModal}})
export default class BatchList extends Vue {
  load=false;
  time:any;
  timeNum = 0;
  isSearch=false;
  data:Array<any> = []
  config:any={
    attr:{
      calculateH:true
    },
    search:{
      attr:{
        size:'small'
      },
      columns:[
        [{
          label:'拣货员',
          prop:'user01',
          component:'by-input',
          compConfig:{}
        },{
          label:'播种员',
          prop:'user02',
          component:'by-input',
          compConfig:{}
        },
        {
          label:'状态',
          prop:'state',
          component: 'by-select',
          compConfig: {
            attr: {
              placeholder: '请选择状态',
              clearable: true,
              data: [{
                value: '等待拣货',
                label: '等待拣货'
              }, {
                value: '正在拣货',
                label: '正在拣货'
              }, {
                value: '正在播种',
                label: '正在播种'
              }, {
                value: '等待出库验货',
                label: '等待出库验货'
              }, {
                value: '终止拣货',
                label: '终止拣货'
              }]
            }
          }
        }]
      ]
    },
    tool:{
      tools:{
        // add:true,
        // delete:true,
        search:true,
        refresh:true
      },
      customTools:[
        { name: '安排拣货员', event:{
          click:() =>{
            this.packHandle('1');
          }
        }},
        { name: '安排播种员', event:{
          click:() =>{
            this.packHandle('2');
          }
        }},
        { name: '修改状态', event:{
          click:() =>{
            this.stateUpdate()
          }
        }},
        { name: '打印订单', event:{
          click:() =>{

          }
        }},
        { name: '按批次发货', event:{
          click:() =>{

          }
        }},
      ]
    },
    table:{
      attr:{
        size:'mini',
        seq:true,
        checkbox: true,
        align:'center',
        // checkbox:true
      },
      columns:[{
        title:'批次号',
        field:'number',
      },{
        title:'类型',
        field:'type',
      },{
        title:'拣货员',
        field:'user01',
      },{
        title:'播种员',
        field:'user02'
      },{
        title:'订单数',
        field:'orderNum'
      },{
        title:'单品类数',
        field:'typeNum'
      },{
        title:'商品种数',
        field:'num1'
      },{
        title:'已拣数',
        field:'jNum1'
      },{
        title:'未拣数',
        field:'jNum2'
      },{
        title:'缺货数',
        field:'num3'
      },{
        title:'状态',
        field:'state'
      },{
        title:'仓库',
        field:'store'
      },{
        title:'生成日期',
        field:'time'
      },{
        title:'创建人',
        field:'createUser'
      }
      ]
    },
  }
  mounted(){
    this.$nextTick(()=>{
      this.getList()
    })
  }

  handle(parm:any) {
    let data = (this.$refs.view as any).getSelectData();
    let n = ''
    for(const nItem of parm.data){
      n = n ? n + ',' + nItem : nItem;
    }
    for (const item of data) {
      for (const it of this.data) {
        if(item.number == it.number) {
          if(parm.type == '1'){
            it.user01 = n
          }else{
            it.user02 = n
          }
          break
        }
      }
    }
    Cookies.set('batchData', JSON.stringify(this.data));
  }
  //安排拣货员/播种员
  packHandle(n:string) {
    let data = (this.$refs.view as any).getSelectData();
    if(data.length == 0) {
      this.$message('请选择数据！');
      return
    }
    (this.$refs.addUserModalView as any).setShow(true);
    (this.$refs.addUserModalView as any).setType(n);
  }
  stateHandle(v:string) {
    let data = (this.$refs.view as any).getSelectData();
    for (const item of data) {
      for (const it of this.data) {
        if(item.number == it.number) {
          it.state = v
          break
        }
      }
    }
    Cookies.set('batchData', JSON.stringify(this.data));
  }
  //修改状态
  stateUpdate() {
    let data = (this.$refs.view as any).getSelectData();
    if(data.length == 0) {
      this.$message('请选择数据！');
      return
    }
    (this.$refs.updateStateModalView as any).setShow(true);
  }

  //分页
  pagination(){
    if(this.isSearch){
      this.queryList();
    }else{
      this.getList()
    }
  }
  //列表请求（只有分页，不包含搜素条件）
  getList(){
    let d = Cookies.get('batchData');
    if(d) {
      try{
        this.data = JSON.parse(d);
      }catch(e){
        console.error('数据转换异常！');
      }
    }

    
    if(!this.$refs.view){
      if(this.timeNum > 5){
        return
      }
      setTimeout(()=>{
        this.getList()
      },500) 
      this.timeNum ++;
      return
    }
    (this.$refs.view as any).setTableValue(this.data);
    // 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);
    let newData:Array<any> = []
    let data = (this.$refs.view as any).getQuery();
    for(const item of this.data) {
      let isa = true
      if(data.user01 && item.user01.indexOf(data.user01) === -1) {
        isa = false
      }
      if(data.user02 && item.user02.indexOf(data.user02) === -1) {
        isa = false
      }
      if(data.state && item.state.indexOf(data.state) === -1) {
        isa = false
      }
      if(isa) {
        newData.push(item)
      }
    }
    (this.$refs.view as any).setTableValue(newData);
  }
  requestList(data:any){
    this.load = true;
    
  }
}
</script>

<style lang="scss" scoped>

</style>

<style scoped>
.generateBatch{
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
</style>