<template>
  <el-dialog
    title="批废信息表单"
    v-model="visible"
    width="1000px"
    append-to-body
    draggable
  >
    <div class="form-container">
      <div style="padding: 16px 16px 0 16px;">
      <el-row :gutter="20">
        <span style="font-weight: bold;font-size: 18px;">批次号：{{ detailInfo.lotCode }}</span>
      </el-row>
      <el-row :gutter="20" style="margin-top:15px;">
       <span style="font-weight: bold;">基础信息</span>
      </el-row>
      <el-row :gutter="20" style="margin-top: 15px;padding-bottom: 10px; border-bottom: 1px solid #999;">
        <el-col :span="11">
          <span class="leftInfo">客户简称</span>
          <span class="rightInfo">{{ detailInfo.companyAlias }}</span>
        </el-col>
        <el-col :span="6">
          <span class="middleInfo">生产计划单号</span>
          <span class="rightInfo">{{ detailInfo.productionPlanNo }}</span>
        </el-col>
        <el-col :span="7">
          <span class="middleInfo">批次号</span>
          <span class="rightInfo">{{ detailInfo.lotCode }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 15px; padding-bottom: 10px;border-bottom: 1px solid #999;">
        <el-col :span="11" >
          <span class="leftInfo">产品描述</span>
          <span class="rightInfo" >{{ detailInfo.productDescription }}</span>
        
        </el-col>
        <el-col :span="6">
          <span class="middleInfo">图纸版本</span>
          <span class="rightInfo">{{ detailInfo.technologyVersion }}</span>
        </el-col>
        <el-col :span="7">
          <span class="middleInfo">批次投产量</span>
          <span class="rightInfo">{{ detailInfo.productionQuantity }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 15px; padding-bottom: 10px;border-bottom: 1px solid #999;">
        <el-col :span="11">
          <span class="leftInfo">下达日期</span>
          <span class="rightInfo">{{ detailInfo.createTime }}</span>
        </el-col>
        <el-col :span="6">
          <span class="middleInfo">当前工段</span>
          <span class="rightInfo">{{ detailInfo.deptName }}</span>
        </el-col>
        <el-col :span="7">
          <span class="middleInfo">当前工序投产量</span>
          <span class="rightInfo">{{ detailInfo.temporaryProcessQualifiedNum == 0?detailInfo.productionQuantity:detailInfo.temporaryProcessQualifiedNum }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:20px;margin-bottom: 20px;">
       <span style="font-weight: bold;">批废信息</span>
      </el-row>
      </div>
      <el-form
        ref="lotWasteRef"
        v-loading="loading"
        class="master-container"
        :model="form"
        :rules="rules"
        label-width="80px"
      >
      <el-row :gutter="20">
        <el-col :span="8">
        <el-form-item label="责任工段" label-width="80px" prop="deptId">
          <el-select-v2
              v-model="form.deptId"
              :options="deptList"
              placeholder="请选择工段"
              :disabled="editStatus"
              @change="getProcess"
              style="width: 140px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="9">
        <el-form-item label="责任工序" label-width="100px" prop="technologicalProcessId">
          <el-select-v2
              v-model="form.technologicalProcessId"
              :options="processList"
              placeholder="请选择工序"
              :disabled="editStatus||form.deptId==null"
              style="width: 140px"
          >
          <template #default="{ index,item }">
            <span style="float: left;">{{ index +1 }}</span>
      <span style="margin-left: 8px;">{{ item.label }}</span>
    </template>
  </el-select-v2>
        </el-form-item>
      </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-form-item label="批废原因" label-width="90px" prop="reason">
          <el-input type="textarea" 
            placeholder="请输入批废原因"
            :disabled="editStatus"
            v-model.trim="form.reason"
            style="width: 495px;"
          />
        </el-form-item>
      </el-row>
      <el-row :gutter="20">
         <el-col :span="8">
          <el-form-item label="填写人" label-width="80px" prop="fillName">
          <el-input 
            :disabled="true"
            placeholder="请输入填写人"
            v-model.trim="form.fillName"
            style="width: 140px;"
          />
        </el-form-item>
         </el-col>
         <el-col :span="9">
          <el-form-item label="填写时间" label-width="100px" prop="fillDate">
            <el-date-picker
                v-model="form.fillDate"
                :disabled="true"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择填写时间"
                style="width: 150px"
              />
        </el-form-item>
         </el-col>
      </el-row>
      </el-form>
    </div>
    <template #footer>
      <el-button  type="primary" icon="Check" @click="handleSave"
        >保存</el-button
      >
      <el-button icon="Close" @click="handleCancel">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { getDeptInfo } from "@/api/business/daywork.js"
import {
  getDayworkProcessList
} from "@/api/business/daywork.js";
import {addLotWaste,updateLotWaste,delLotWaste} from "@/api/business/lotWaste.js";
import useUserStore from '@/store/modules/user'
const { proxy } = getCurrentInstance();
const emit = defineEmits(["handleSaveSuccess"]);
/** 字典数组区 */
const { is_allow_more } = proxy.useDict("is_allow_more");
/** 废批*/
const deptList = ref([]);
const detailInfo = ref({})
const processList = ref([]);
const loading = ref(false);
const editStatus = ref(true)
const visible = ref(false);
const data = reactive({
  form: {},
  rules: {
    deptId: [
      { required: true, message: "责任工段不能为空", trigger: "blur" }],
      technologicalProcessId: [
      { required: true, message: "责任工序不能为空", trigger: "blur" }],
  },
});
const { form, rules } = toRefs(data);

/***********************  方法区  ****************************/
/** 打开抽屉 */
const open = (row) => {
  reset();
  detailInfo.value = proxy.deepClone(row)
  editStatus.value = row.flag
  console.log(row)
  //查工段
  getDeptInfo({dayworkId:row.id}).then(res => {
      deptList.value = res.data
    })

  if(row.isWaste == 0) {
  form.value.fillDate = proxy.moment().format("YYYY-MM-DD")
  form.value.fillName = useUserStore().user.nickName
  }else {
    form.value = detailInfo.value.lotWaste
  }
   form.value.lotId = row.lotId
  visible.value = true;
}
//获得工序
function getProcess() {
  form.value.technologicalProcessId = null
  getDayworkProcessList({id:detailInfo.value.id,deptId:form.value.deptId}).then(response => {
      processList.value = response.data
    })
}
/** 取消按钮 */
function handleCancel() {
  visible.value = false;
  reset();
}

/** 表单重置 */
function reset() {
  form.value = {
    id: null,
    technologicalProcessId: null,
    reason: "",
    deptId: null,
    fillDate: null,
    fillName:null,
    lotId:""
  };
  proxy.resetForm("lotWasteRef");
}

/** 提交按钮 */
function handleSave() {
  proxy.$refs["lotWasteRef"].validate((valid) => {
    if (valid) {
      proxy.$modal
      .confirm("是否确认要批废，此操作不可逆！")
      .then(function () {
        //添加
        addLotWaste(form.value).then(res => {
          if(res.code == 200) {
            proxy.$message({
              type: "success",
              message: "批废成功"
            });
            emit("handleSaveSuccess", detailInfo.value.lotCode)
            handleCancel();
          }
        })
      })
     
    }
  })
}
// //取消废弃
// function handleDeleteLotWaste() {
//   proxy.$modal
//     .confirm("是否确认取消废批？")
//     .then(function () {
//       return delLotWaste(form.value.id);
//     })
//     .then(() => {
//       emit("handleSaveSuccess");
//       proxy.$modal.msgSuccess("删除成功！");
//       handleCancel();
//     });
// }

/** 暴露给父组件的方法 */
defineExpose({
  open
});
</script>
<style scoped>
.leftInfo {
  color: #999;
  font-size: 16px;
  width: 120px;
/* display: inline-block; */
}
.middleInfo {
  color: #999;
  font-size: 16px;
  width: 120px;
display: inline-block;
}
.rightInfo {
    font-size: 16px;
    padding-left: 20px;
}
</style>
