<template>
  <el-dialog title="添加明细" v-model="visible" width="800px" height="400px" @close="close" append-to-body draggable
    class="certificateSearchDialog">
    <el-form ref="dialogForm" class="master-container" :model="queryParams" :inline="true" style="align-items: center">
      <div style="display: flex">
        <el-form-item label="合格证编码：" prop="certificationNo">
          <el-input v-model.trim="queryParams.certificationNo" type="text" @keydown.enter.prevent style="width: 120px"
            placeholder="请输入合格证编码" :clearable="true" @keyup.enter="handleAdd" ref="certificationRef" @blur="refocus" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table ref="dialogTable" :data="dataList" size="small" v-loading="loading" border height="370px"
      :row-class-name="checkRowClass">
      <el-table-column type="index" label="行号" width="50" align="center" />
      <el-table-column label="合格证编码" align="center" prop="certificateCode" />
      <el-table-column label="产品描述" align="center" prop="productDescription" />
      <el-table-column label="工段" align="center" prop="deptName" />
      <el-table-column label="包装线" align="center" prop="packageResourceGroupName" />
      <el-table-column label="包装形式" align="center" prop="packageTypeCode" />
      <el-table-column label="操作" width="64" align="center">
        <template #default="scope">
          <el-button type="danger" icon="Delete" circle @click="handleDel(scope.$index)" />
        </template>
      </el-table-column>
    </el-table>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button type="primary" @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getInboundOrderDetailByCertificateNo } from '@/api/business/inboundOrder'
import { nextTick } from 'vue';
const { proxy } = getCurrentInstance();
const dataList = ref([]);
const visible = ref(false);
const loading = ref(false);
const emit = defineEmits(['submit'])
const selections = ref([]);
const first = ref(null)
const queryParams = ref({
  certificationNo: ''
});
let inboundOrderId = null
const certificationRef = ref(null)
function handleAdd() {
  if (queryParams.value.certificationNo != '') {
    dataList.value.push({ certificateCode: queryParams.value.certificationNo, checked: true })
    queryParams.value.certificationNo = ''
    certificationRef.value.focus()
  }
}

/**
 * 对话框打开 事件
 */
function open(infirst, inboundOrderId) {
  visible.value = true;
  console.log(infirst)
  if (infirst != null) {
    first.value = { ...infirst, isFirst: true }
  }
  nextTick(_ => {
    certificationRef.value.focus()
  })
}

/**
 * 对话框关闭 事件
 */
function close() {
  proxy.$refs.dialogForm.resetFields();
  dataList.value = []
  inboundOrderId = null
  first.value = null
  visible.value = false;
}

function refocus() {
  certificationRef.value.focus()
}

function handleSubmit() {
  if (dataList.value.length == 0) {
    proxy.$message.warning('请添加明细！')
    return
  } let value = first.value != null ? [first.value] : []
  value.push(...dataList.value.map(v => ({ ...v, inboundOrderId: inboundOrderId })))
  getInboundOrderDetailByCertificateNo(value).then(res => {
    console.log(res)
    dataList.value = res.data
    if (res.checked) {
      emit('submit', dataList.value)
      close()
    } else {
      proxy.$modal.msgError('合格证产品、包装线、工段或包装形式不一致')
    }
  })
}

function checkRowClass({ row, rowIndex }) {
  console.log(row)
  if (!row.checked) {
    return 'unchecked-row';
  }
  return '';
}

function handleDel(index) {
  dataList.value.splice(index, 1);
}

defineExpose({
  open,
});

</script>
<style>
/* .certificateSearchDialog .el-table .unchecked-row {
  background-color: #ffbebe !important;
} */

.certificateSearchDialog .el-table .unchecked-row .el-table__cell {
  background-color: #ffcdcd !important;
  /* 危险色-红色 */
}
</style>