<template>
  <vxe-modal v-model="value" id="autoSplitModal" width="400" v-loading="load" @show="show" @hide="hide" height="260" show-footer title="自动拆分">
    <div class="split-num">
      <div class="max-label">可拆分类型：</div>
      <el-select v-model="type" size="mini" style="width:200px" clearable placeholder="请选择类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <div class="split-num">
      <div class="max-label">可拆分数量：</div>
      <vxe-input v-model="val" size="small" style="width:200px" placeholder="请输入" type="integer"></vxe-input>
    </div>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { split } from '@/api/omsOrder'
@Component({components:{}})
export default class UpdateRmkModal extends Vue {
  value=false;
  load=false;
  val:number=0;
  type:string='';
  options=[{
    label:'普通订单',
    value:'Common'
  },{
    label:'补发订单',
    value:'Reissue'
  },{
    label:'分销Plus',
    value:'DistributionPlus'
  },{
    label:'供销Plus',
    value:'SupplyPlus'
  },{
    label:'换货订单',
    value:'Exchange'
  }]
  data:Array<any>=[];
  setShow(v:boolean){
    this.value = v;
  }
  setData(data:Array<any>){
    this.data = data;
  }
  show(){}
  hide(){
    this.val = 0
    this.type = ''
  }
  btn(){
    let n = Number(this.val)
    let paramArr:Array<any>=[]
    if(n) {
      this.data.forEach(ele => {
        if(ele.items && ele.items.length > 0) {
          let obj:any={}
          obj.id = ele.id
          obj.splitInfos=[]
          for(const item of ele.items){
            let num = item.qty - item.splitQty;
            if(num > n){
              if(this.type){
                if(this.type == ele.orderType){
                  obj.splitInfos.push({
                    qty:n,
                    orderItemId:item.id
                  })
                }
              }else{
                obj.splitInfos.push({
                  qty:n,
                  orderItemId:item.id
                })
              }
            }
          }
          if(obj.splitInfos.length > 0) {
            paramArr.push(obj)
          }
        }
        
      })
      console.log('拆单数据：',paramArr)
      if(paramArr.length == 0){
        this.$message('未找到匹配条件的订单')
        return
      }
      this.load = true
      let i = 0;
      for(const item of paramArr){
        split(item).then((res:any) => {
          i++
          if(i >= paramArr.length){
            this.load = false;
            this.$message({
              message:'拆分成功！',
              type:'success'
            })
            this.$emit('handleSuccess');
            this.value = false;
          }
        }).catch(() => {
          i++
          if(i >= paramArr.length){
            this.load = false;
            this.$emit('handleSuccess');
            this.value = false;
          }
        })
      }
    }else{
      this.$message('请输入可拆分数量')
    }
  }
}
</script>

<style lang="scss" scoped>
.split-num{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 16px;
  .max-label{
    font-size: 14px;
    padding-right: 8px;
  }
}
</style>