<template>
  <el-drawer
    title="投料计算"
    :with-header="false"
    v-model="visible"
    direction="rtl"
    size="25%"
  >
    <div class="form-container column-container">
      <div style="display: flex; justify-content: center; font-size: 28px">
        投料计算
      </div>
      <el-form
        ref="formRef"
        class="master-container"
        :model="form"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              label="领料量(KG)"
              prop="materialpickUpQuantity"
              label-width="100px"
            >
            <el-input
              v-model="form.materialpickUpQuantity"
              placeholder="0"
              type="text"
              style="width: 200px; margin-left: 30px"
              @input="handleInputMaterialpickUpQuantity"
            />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              label="单批量(KG)"
              v-model="form.peqty"
              prop="peqty"
              label-width="100px"
              
              style="margin-top: 30px"
            >
              <span style="margin-left: 40px">{{ form.peqty }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <el-form-item
              label="批数"
              v-model="form.lotNumber"
              prop="lotNumber"
              label-width="100px"
              style="margin-top: 30px"
            >
              <span style="margin-left: 50px">{{ form.lotNumber }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom-buttons">
        <el-button size="large" style="width: 160px;height: 50px;" type="info"  @click="cancel">取 消</el-button>
      <el-button size="large" style="width: 160px;height: 50px;" type="primary"  @click="handleInputLotNumber"
        >填入</el-button
      >
    </div>
    </div>
  </el-drawer>
</template>
<script setup>
import {getProductionLotAmount} from "@/api/business/p2.js"
const { proxy } = getCurrentInstance();
/** 父组件传参 */
const props = defineProps({
  singleSelected: {
    type: Function,
    default: null,
  },
});

const { singleSelected } = toRefs(props);
/** 字典数组区 */
/** 表单抽屉 页变量 */
const form = ref({});
const visible = ref(false);
const detailInfo = ref({})

/***********************  方法区  ****************************/
/** 打开抽屉 */
function open(data) {
  reset();
  detailInfo.value = proxy.deepClone(data);
  //form.value.peqty = 22.8
  visible.value =true
  getProductionLotAmount({lotno:detailInfo.value.productionPlanNo,lotseq:detailInfo.value.lineNumber}).then(res =>{
    if(res.code == 200) {
      form.value.peqty = res.data[0].peqty
       visible.value = true;
    }
  }
)
 
}

/** 取消按钮 */
function cancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    lotNumber: 0,
    materialpickUpQuantity:''
  };
  proxy.resetForm("formRef");
}
//填写领料量
function handleInputMaterialpickUpQuantity(data) {
  // if (data < 0) {
  //       form.value.materialpickUpQuantity = 0;
  //     }else{
  //  form.value.lotNumber = Math.ceil(data / form.value.peqty);
  //     }
  const regex =/^(?!0+(?:\.0+)?$)[1-9]\d*(\.\d*)?$/;
      // 检查输入值是否符合正则表达式规则
      if (!regex.test(data)) {
        // 如果不符合规则，清空输入或设置为0
        form.value.materialpickUpQuantity = '';
      } else {
        // 如果符合规则，更新模型
        form.value.materialpickUpQuantity = data;
        form.value.lotNumber = Math.ceil(data / form.value.peqty);
      }
      
    };

// 投产批数带回
function handleInputLotNumber(){
  singleSelected.value(form.value.lotNumber)
  visible.value = false
};

/** 暴露给父组件的方法 */
defineExpose({
  open,
});
</script>
<style scoped>
.bottom-buttons {
  position: absolute;
  bottom: 0; /* 定位到页面底部 */
  left: 50%; /* 向左移动50% */
  transform: translateX(-50%); /* 向左移动自身宽度的50%，实现居中 */
  text-align: center; /* 使按钮水平居中 */
  width: 100%; /* 宽度设为100% */
}
</style>
