<template>
  <el-dialog title="添加审核申请" v-model="visible" width="600px" height="400px"   @close="close" append-to-body draggable>
    <el-form ref="dialogForm" class="master-container" :model="queryParams" style="align-items: center;" >
      <div style="display: flex;">
        <el-form-item label="箱号：" prop="carrierCode" label-width="60px" style="margin-top: 20px;">
          <el-input
            v-model.trim="queryParams.carrierCode"
            type="text"
            @keydown.enter.prevent
            style="width: 180px"
            placeholder="请输入箱号选择批次"
            :clearable="true"
            @keyup.enter="handleSearch"
          />
        </el-form-item>
        <el-form-item label-width="20px" style="margin-top: 20px;">
          <el-button type="info" icon="Search" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table v-if="lotList.length > 0"
      ref="dialogTable"
      :data="lotList"
      :row-key="getRowKey"
      size="small"
      v-loading="loading"
      border
      height="370px"
      header-row-class-name="list-header-row"
      row-class-name="list-row"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" align="center" :reserve-selection="true" />
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="批次号" align="center" prop="lotCode" />
    </el-table>
    <template #footer v-if="lotList.length > 0">
      <div class="dialog-footer">
        <el-button type="primary" icon="Check" :disabled="selections.length === 0" @click="handleMultipleSelected">确定</el-button>
        <el-button icon="Close" @click="close">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref } from '@vue/reactivity'
import { getDayworkItemByCarrierName } from '@/api/business/dayworkItemExamine'
const { proxy } = getCurrentInstance()
/** 工序变量 */
const total = ref(0)
const props = defineProps({
  multipleSelected: {
    type: Function,
    default: null
  }
})

const { multipleSelected } = toRefs(props)
const lotList = ref([])
const visible = ref(false)
const loading = ref(false)
const data = reactive({
  queryParams: {
  carrierCode:null
  }
})
const selections = ref([])
const { queryParams } = toRefs(data)

/** 获取行 id */
function getRowKey(row) {
  return row.id
}

/**
 * 对话框打开 事件
 */
function open() {
  visible.value = true
}

/**
 * 对话框关闭 事件
 */
function close() {
  queryParams.value.carrierCode = null
  lotList.value = []
  visible.value = false
}

/**
 * 加载数据
 */
function getList() {
  loading.value = true
  console.log(queryParams.value)
  getDayworkItemByCarrierName(queryParams.value).then((res) => {
    if(res.code == 200) {
      if(res.data.length == 0){
        proxy.$modal.msgError("该箱号未绑定任何批次或该批次已被审核");
        lotList.value = []
      }else{
           lotList.value = res.data
      }
    }
    loading.value = false
  })
  
}

/**
 * 列表checkbox列选择 事件
 */
function handleSelectionChange(selection) {
  selections.value = selection
}


/**  搜索 事件 */
function handleSearch() {
  getList()
}
/** 多选事件 */
function handleMultipleSelected() {
  //判断是否有一箱多批，另一个箱没选到的情况
  let notSelctiionList = lotList.value.filter(item => !selections.value.includes(item))
  console.log(notSelctiionList)
  let selectionCarrierIds = selections.value.map(item => item.carrierId)
  let notSelectionCarrierIds = notSelctiionList.map(item => item.carrierId)
  //判断是否有一箱多批，另一个批次没选的情况
  let commonCarrierIds = selectionCarrierIds.filter(id => notSelectionCarrierIds.includes(id));
  if(commonCarrierIds.length > 0) {
    console.log(commonCarrierIds)
    let commonCarrierIdsList = notSelctiionList.filter(item =>{
    return commonCarrierIds.includes(item.carrierId)
    })
    console.log(commonCarrierIdsList)
    let lotCodes = commonCarrierIdsList.map(item => item.lotCode);
// 使用 join 将数组元素通过逗号连接成一个字符串
    let lotCodesString = lotCodes.join(',');
   console.log(lotCodesString)
    proxy.$modal.msgError("存在一箱多批：" + lotCodesString + "未选择");
  }else{
    //新增
      if (multipleSelected.value) {
        multipleSelected.value(selections.value)
  }
  close()
  }

}

defineExpose({
  open
})
</script>
<style scoped></style>
