<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-04-20 10:57:44
 * @Description:
-->
<template>
  <el-drawer :visible.sync="visible" size="90%" class="drawerClass" :before-close="handleClose">
    <template slot="title">
      <h3 class="titleStyle">{{ !dataForm.id ? "登记" : "修改" }}</h3>
    </template>
    <el-collapse value="1" @change="handleChange">
      <el-collapse-item name="1">
        <template slot="title">
          <h3 style="margin-left:20px">检验信息</h3>
        </template>
        <el-row :gutter="6">
          <el-form
            :model="dataForm"
            :rules="dataRule"
            ref="dataForm"
            :disabled="!dataForm.id ? false : true"
            @keyup.enter.native="dataFormSubmit()"
            label-width="100px"
          >
            <el-col :span="6">
              <el-form-item label="检验站点" prop="inspectionSite">
                <el-input v-model="dataForm.inspectionSite" placeholder="检验站点"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="开单时间" prop="createTime">
                <el-date-picker
                  v-model="dataForm.createTime"
                  type="datetime"
                  readonly
                  format="yyyy-MM-dd hh:mm:ss"
                  value-format="yyyy-MM-dd hh:mm:ss"
                  placeholder="选择日期时间"
                  :style="{ width: '100%' }"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单号" prop="orderNumber">
                <el-input v-model="dataForm.orderNumber" placeholder="订单号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="批次号" prop="batchNumber">
                <el-input v-model="dataForm.batchNumber" placeholder="批次号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品" prop="productId">
                <el-select
                  v-model="dataForm.productId"
                  @change="getWorkingprocedureByProductId"
                  placeholder="请选择产品"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in optionArr.arr0"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检验阶段" prop="inspectionStage">
                <el-select
                  v-model="dataForm.inspectionStage"
                  :style="{ width: '100%' }"
                  @change="$forceUpdate()"
                  clearable
                  placeholder="请选择检验阶段"
                >
                  <el-option
                    v-for="item in inspectionStageArr"
                    :key="item.name"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="工序" prop="workingProcedureId">
                <el-select
                  v-model="dataForm.workingProcedureId"
                  @change="$forceUpdate()"
                  placeholder="请选择工序"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in optionArr.arr4"
                    :key="item.workingProcedureId"
                    :label="item.workingProcedureName"
                    :value="item.workingProcedureId"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="机台号" prop="machineId">
                <el-select
                  v-model="dataForm.machineId"
                  placeholder="请选择机台号"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in optionArr.arr1"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分组样本数" prop="numberOfGroupedSamples">
                <el-input
                  v-model="dataForm.numberOfGroupedSamples"
                  placeholder="分组样本数"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="样本大小" prop="numberOfSamples">
                <el-input
                  v-model="dataForm.numberOfSamples"
                  placeholder="样本大小"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="缺陷数量" prop="numberOfDefects">
                <el-input
                  v-model="dataForm.numberOfDefects"
                  placeholder="缺陷数量"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="不良数量" prop="defectiveQuantity">
                <el-input
                  v-model="dataForm.defectiveQuantity"
                  placeholder="不良数量"
                  disabled
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="班次" prop="shiftId">
                <el-select
                  v-model="dataForm.shiftId"
                  placeholder="请选择班次"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in optionArr.arr2"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="生产人" prop="producer">
                <el-select
                  :style="{ width: '100%' }"
                  v-model="dataForm.producer"
                  placeholder="请选择生产人"
                >
                  <el-option
                    v-for="item in optionArr.arr3"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="检验人" prop="inspector">
                <el-select
                  :style="{ width: '100%' }"
                  v-model="dataForm.inspector"
                  placeholder="请选择检验人"
                >
                  <el-option
                    v-for="item in optionArr.arr3"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <el-row v-if="!dataForm.id">
          <span style="margin-left:20px">
            <el-button size="medium" type="primary" @click="dataFormSubmit()">开单</el-button>
            <el-button size="medium" @click="visible = false">关闭</el-button>
          </span>
        </el-row>
      </el-collapse-item>
      <el-collapse-item name="2" v-if="dataForm.id">
        <template slot="title">
          <h3 style="margin-left:20px">特性信息</h3>
        </template>
        <features-table
          v-if="featuresTableVisible"
          :features-list="featuresList"
          :workingProcedureName="workingProcedureName"
          ref="featuresTable"
        ></features-table>
      </el-collapse-item>
    </el-collapse>
    <div v-if="dataForm.id">
      <el-divider content-position="left"><h3 style="font-size:15px">详情</h3></el-divider>
      <detail-table
        v-loading="detailLoading"
        :inspectionSheetId="dataForm.id"
        :batchNum="dataForm.batchNumber"
        :numberOfGroupedSamples="dataForm.numberOfGroupedSamples"
        :features-list="featuresList"
        :workingProcedureName="workingProcedureName"
        ref="detailTable"
        @refreshDataForm="init"
      ></detail-table>
    </div>
  </el-drawer>
</template>

<script>
import basicAdd from "@/mixins/basic-add";
import featuresTable from "./features-table";
import detailTable from "./detail-table";
export default {
  mixins: [basicAdd],
  props: {
    optionArr: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data() {
    return {
      urlOptions: {
        infoURL: "/processInspection/inspectionSheet",
      },
      inspectionStageArr: [],
      dataForm: {
        id: "",
        inspectionSite: "",
        createTime: new Date(),
        orderNumber: "",
        batchNumber: "",
        productId: "",
        inspectionStage: "",
        workingProcedureId: "",
        machineId: "",
        shiftId: "",
        numberOfGroupedSamples: 0,
        numberOfSamples: "",
        numberOfDefects: "",
        defectiveQuantity: "",
        producer: "",
        inspector: "",
      },
      featuresTableVisible: false,
      featuresList: [],
      workingProcedureName: "",
      detailLoading: false,
      setData: true,
      dataRule: {
        productId: [{ required: true, message: "产品不能为空", trigger: "change" }],
        inspectionStage: [{ required: true, message: "检验阶段不能为空", trigger: "change" }],
        //workingProcedureId: [{ required: true, message: "工序不能为空", trigger: "change" }],
      },
    };
  },
  components: {
    featuresTable,
    detailTable,
  },
  methods: {
    getWorkingprocedureByProductId(val) {
      this.dataForm.inspectionStage = "";
      this.dataForm.workingProcedureId = "";
      this.getWorkingprocedureArr(val);
    },
    getWorkingprocedureArr(val) {
      if (val) {
        const obj = this.optionArr.arr0.find((item) => {
          return item.id === val;
        });
        const obj1 = { 1: "进货检验", 2: "过程检验", 3: "成品检验", 4: "出货检验" };
        const inspectionStage = obj.inspectionStage.split(",");
        this.inspectionStageArr = [];
        inspectionStage.forEach((item) => {
          this.inspectionStageArr.push({
            value: item,
            name: obj1[item],
          });
        });

        this.$http
          .get(`/basic/productWorkingprocedureRelation/getWorkingprocedureByProductId/${val}`)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$set(this.optionArr, "arr4", res.data);
            if (this.dataForm.id) {
              this.workingProcedureName = this.optionArr.arr4.find((item) => {
                return item.workingProcedureId === this.dataForm.workingProcedureId;
              })?.workingProcedureName;
              this.$nextTick(() => {
                this.$refs.detailTable.init();
              });
              this.detailLoading = false;
            }
          })
          .catch(() => {});
      } else {
        this.inspectionStageArr = [];
        this.$set(this.optionArr, "arr4", []);
      }
    },
    setDataForm() {
      this.detailLoading = true;
      this.$http
        .post(
          `/processInspection/inspectionSheet/getInspectionSheetFeaturesList?productId=${
            this.dataForm.productId
          }${
            this.dataForm.inspectionStage ? "&inspectionStage=" + this.dataForm.inspectionStage : ""
          }${
            this.dataForm.workingProcedureId
              ? "&workingProcedureId=" + this.dataForm.workingProcedureId
              : ""
          }`
        )
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.featuresList = [];
            return this.$message.error(res.msg);
          }
          this.featuresList = res.data;
          if (this.featuresTableVisible) {
            this.$nextTick(() => {
              this.$refs.featuresTable.init();
            });
          }
        })
        .catch(() => {});
      this.dataForm.inspectionStage = String(this.dataForm.inspectionStage);
      this.getWorkingprocedureArr(this.dataForm.productId);
    },
    handleChange(val) {
      if (val.includes("2")) {
        this.featuresTableVisible = true;
        this.$nextTick(() => {
          this.$refs.featuresTable.init();
        });
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.$http[!this.dataForm.id ? "post" : "put"](
          "/processInspection/inspectionSheet",
          this.dataForm
        )
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                this.init(res.data);
              },
            });
          })
          .catch(() => {});
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.inspectionStageArr = [];
          this.$set(this.optionArr, "arr4", []);
          done();
          this.$emit("successSubmit");
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.drawerClass >>> .el-drawer__header {
  margin-bottom: 0;
  padding: 0;
}
.titleStyle{
  margin-left: 10px;
}
.titleStyle::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
</style>
