<template>
  <div>
    <vxe-modal v-model="value" id="productDialogModal" width="60%" v-loading="load" @hide="hide" height="70%" min-width="500" min-height="400" show-zoom resize transfer show-footer>
      <template #title>
        <span>订单商品</span>
      </template>
      <template #default>
        <module-view :propConfig="config" ref="view"/>
      </template>
      <template #footer>
        <div class="btn">
          <el-button type="primary" size="small" @click="value = false">确定</el-button>
          <el-button type="primary" size="small" v-if="type == 'sg'" @click="showExpressCodeModal">确认发货</el-button>
          <el-button type="primary" size="small" v-if="type == 'inStore'" @click="confirmInStore">确认入库</el-button>
          <el-button type="primary" size="small" v-if="type == 'outStore'" @click="showExpressCodeModal">确认出库</el-button>
        </div>
      </template>
    </vxe-modal>
    <vxe-modal v-model="expressCodeValue" id="expressCodeModal" v-loading="load" :title="title" @hide="expressHide" width="500" height="300" show-footer>
      <template #default>
        <div class="expressCode-row">
          <div class="label">单号</div>
          <el-input v-model="val" placeholder="请输入内容" size="small"></el-input>
        </div>
      </template>
      <template #footer>
        <div class="btn">
          <el-button type="primary" size="small" @click="expressCodeHandle">确定</el-button>
        </div>
      </template>
    </vxe-modal>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import {jstOrderListProduct,inStoreProduct,outStoreProduct,deliveryOrderConfirm, purchaseInOrderConfirm,purchaseOutConfirm} from '@/api/jstOrder'
@Component
export default class JstproductModal extends Vue {
  title:string='';
  value:boolean=false;
  load:boolean = false;
  type:string='';
  orderValue:any;
  val:any='';
  expressCodeValue:boolean=false;
  tableData:Array<any>=[]
  config:any={
    attr:{
      calculateH:true
    },
    table:{
      attr:{
        size:'mini',
        align:'center',
        triggerRowCheck:'row'
      },
      columns:[{
        title:'编号',
        field:'id',
        width:100
      },{
        title:'商品名称',
        field:'itemName',
      },{
        title:'数量',
        field:'planQty',
        width:80
      }]
    }
  }
  hide(){
    if(!this.expressCodeValue){
      if(this.$refs.view){
        (this.$refs.view as any).setTableValue([]);
      }
      this.type = ''
      this.tableData = []
      this.orderValue=null
    }
  }
  expressHide(){
    this.val='';
    this.value = true
  }
  setShow(v:boolean){
    this.value = v;
  }
  setType(v:string){
    this.type = v;
  }
  setValue(data:any){
    let params:any = {}
    this.orderValue = data;
    if(data.id){
      params.orderId = data.id
      if(this.type == 'sg'){
        this.load = true
        jstOrderListProduct(params).then((res:any) => {
          this.load = false
          if(res.data){
            this.tableData = res.data;
            (this.$refs.view as any).setTableValue(res.data);
          }
        }).catch(()=>{
          this.load = false
        })
      }
      if(this.type == 'inStore'){
        this.load = true
        inStoreProduct(params).then((res:any) => {
          this.load = false
          if(res.data){
            this.tableData = res.data;
            (this.$refs.view as any).setTableValue(res.data);
          }
        }).catch(()=>{
          this.load = false
        })
      }
      if(this.type == 'outStore'){
        this.load = true
        outStoreProduct(params).then((res:any) => {
          this.load = false
          if(res.data){
            this.tableData = res.data;
            (this.$refs.view as any).setTableValue(res.data);
          }
        }).catch(()=>{
          this.load = false
        })
      }
    }
  }
  showExpressCodeModal(){
    this.expressCodeValue = true;
    this.value = false;
    if(this.type == 'sg'){
      this.title = '确认发货'
    }
    if(this.type == 'outStore'){
      this.title = '确认出库'
    }
  }
  //确认发货
  confirmHandle(){
    let data:Array<any>=[];
    let packages:Array<any>=[];
    for(const item of this.tableData){
      data.push({
        barCode:item.itemCode,
        quantity:item.planQty
      })
      packages.push({
        expressCode:this.val,
      })
    }
    for(const _item of packages){
      _item.items = data
    }
    if(data.length === 0){
      this.$message('条件不符合！')
      return
    }
    this.load=true;
    
    deliveryOrderConfirm({
      saleOrderCode:this.orderValue.deliveryOrderCode,
      logisticsCode:this.orderValue.logisticsCode,
      logisticsName:this.orderValue.logisticsName,
      expressCode:this.val,
      packages:packages,
      items:data
    }).then(()=>{
      this.load=false;
      this.expressCodeValue = false;
      this.$message({
        message:'操作成功！',
        type:'success'
      })
    }).catch(()=>{
      this.load=false;
    })
  }
  //入库确认
  confirmInStore(){
    let data:Array<any>=[];
    for(const item of this.tableData){
      data.push({
        barCode:item.itemCode,
        planQuantity:item.planQty,
        quantity:item.planQty
      })
    }
    if(data.length === 0){
      this.$message('条件不符合！')
      return
    }
    this.load=true
    purchaseInOrderConfirm({
      syncId:this.orderValue.entryOrderCode,
      wareHouseCode:this.orderValue.warehouseCode,
      items:data
    }).then(()=>{
      this.load=false;
      this.$message({
        message:'操作成功！',
        type:'success'
      })
    }).catch(()=>{
      this.load=false;
    })
  }
  //出库确认
  confirmOutStore(){
    let data:Array<any>=[];
    let packBoxs:Array<any>=[]
    for(const item of this.tableData){
      data.push({
        barCode:item.itemCode,
        planQuantity:item.planQty,
        quantity:item.planQty
      })
      packBoxs.push({
        expressCode:this.val
      })
    }
    for(const _item of packBoxs){
      _item.items = data
    }
    if(data.length === 0){
      this.$message('条件不符合！')
      return
    }
    this.load=true
    purchaseOutConfirm({
      syncId:this.orderValue.deliveryOrderId,
      wareHouseCode:this.orderValue.warehouseCode,
      expressCode:this.val,
      items:data,
      packBoxs:packBoxs
    }).then(()=>{
      this.load=false;
      this.expressCodeValue = false;
      this.$message({
        message:'操作成功！',
        type:'success'
      })
    }).catch(()=>{
      this.load=false;
    })
  }
  expressCodeHandle(){
    if(!this.val){
      this.$message({
        message:'请输入单号',
        type:'error'
      })
      return
    }
    if(this.type == 'sg'){
      this.confirmHandle()
    }
    if(this.type == 'outStore'){
      this.confirmOutStore()
    }
  }
}
</script>

<style lang="scss" scoped>
.expressCode-row{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 32px;
  .label{
    width: 100px;
    text-align: right;
    padding-right: 8px;
  }
}
</style>