<template>
  <van-dialog v-model:show="packingTrueFalseBy"
              title="装箱"
              close-on-click-overlay
              :keyboard-enabled="false"
                show-cancel-button
              :beforeClose="beforeClose">
    <div class="packing-list">
      <table class="task-table">
        <thead>
        <tr>
          <th>条码</th>
          <th>名称</th>
          <th style="width: 60px">数量</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in packingList" :key="index" v-if="packingList.length>0">
          <td>{{ item.barcode }}</td>
          <td><van-text-ellipsis :content="item.skuName" /></td>
          <td>{{ item.quantity }}</td>
        </tr>
        <tr v-else>
          <td colspan="3">
            <div>暂无数据</div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </van-dialog>
</template>
<script setup>
import { ref } from 'vue'
import { packingReview } from '@/api/check/index'
import { closeLoading, showLoading } from '@/utils/loading'
import { showNotify } from 'vant'
import { scanError, scanSuccess } from '@/utils/android'
const packingTrueFalseBy = ref(false)
const packingList = ref([])
const orderDetail=ref({})
const show = (list,detail) => {
  packingList.value=list.filter(item => item.isPacking && item.status=='60' )
  orderDetail.value=detail
  packingTrueFalseBy.value = true
}
const beforeClose = (action) =>
  new Promise(async (resolve) => {
    if (action === 'confirm') {
      setPacking()
      resolve(true)
    }
    resolve(true)
  })
const emit = defineEmits(['print','cancelOrder','resetPackingStatus','getOrderPacking'])
const setPacking = () => {
  const groupDetailList = packingList.value.map(items => {
    return {
      lotNum: items.lotNum,
      qty: items.quantity,
    };
  });
  const data = {
    warehouse: orderDetail.value.warehouseId,
    workStation:orderDetail.value.warehouseId,
    code: orderDetail.value.orderNo,
    packingReviewMode:true,
    groupDetailList,
  };
  showLoading()
  packingReview(data).then(res => {
    if(res.data=='0000'){
      // 订单取消
     emit('cancelOrder',orderDetail.value,'erp')
    }else if(res.data=='1111'){
      // 冻结
      emit('cancelOrder',orderDetail.value,'release')
    }else {
      showNotify({ type: 'success', duration: 3000, message: res.data + '装箱成功'})
      scanSuccess()
      emit('resetPackingStatus')
      const qty=groupDetailList.reduce((sum, item) => sum + Number(item.qty), 0)
      const packingItem={ orderNo:orderDetail.value.orderNo, traceId:res.data, qty }
      orderDetail.value.orderPacking.unshift(packingItem)
      emit('getOrderPacking',orderDetail.value.orderNo)
      // 是否需要打印面单
      if (res.data.includes('#') ) {
        showNotify({ type: 'success', duration: 3000, message: res.data + '已设置不获取新面单'})
      } else if(res.data==orderDetail.value.deliveryNo ){
        showNotify({ type: 'success', duration: 3000, message: res.data + '本单为初始单号，不打印面单'})
      } else {
        emit('print','PRINT_WAYBILL',res.data)
      }
    }
  }).catch(err=>{
    scanError()
  }).finally(f=>{
    closeLoading()
  })
}
defineExpose({ show })
</script>

<style scoped lang="sass">
.packing-list
  width: 100%
  overflow-y: auto
  max-height: 60vh
  padding: 10px 0
  .task-table, .task-table-bin, .task-table-box
    width: 100%
    table-layout: fixed
    border-collapse: collapse
    font-size: 15px

  .task-table th, .task-table-bin th, .task-table td, .task-table-bin td, .task-table-box th, .task-table-box td
    text-align: center
    border: 1px solid #ccc
    word-wrap: break-word
    word-break: break-all

  .task-table thead, .task-table-bin thead, .task-table-box thead
    background-color: #3f8dff
    position: sticky
    top: 0
    color: white
    font-size: 15px

  .task-table-bin thead
    background-color: #3f8dff

  .task-table-bin tbody
    background: #cde7ff

</style>
