<template>
  <div class="body">
    <el-form ref="ruleFormRef" :model="formData" label-width="250">
      <el-row>
        <el-col :span="8">
          <el-form-item label="产品名称：">
            <span class="text">{{ formData.materialName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="产品型号：">
            <span class="text">{{ formData.materialModel }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生产批号：">
            <span class="text">{{ formData.code }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="管号：">
            <span class="text">{{ formData.seqs }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发生地点：">
            <span class="text">{{ formData.address }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="审理级别：">
            <span class="text">{{ formData.remark1.lv }}级</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="发生时间：">
            <span class="text">{{ formData.remark1.time }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="问题描述：">
            <span class="text">{{ formData.remark1.content }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发起人：">
            <span class="text">{{ formData.remark1.user1 }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider v-if="step == 1 && showStatus == true" />
      <div
        v-if="step == 1 && showStatus == true"
        style="font-size: 20px; margin: 0 auto"
      >
        暂无内容
      </div>
      <div
        class="stage"
        v-if="step > 0 && (step == 1 ? showStatus == false : true)"
      >
        <el-form-item
          label="不合格现象（质量问题）描述："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            :disabled="step != 1"
            type="textarea"
            v-model="formData.remark2.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="下部流向人员：">
              <el-select
                v-model="formData.remark3.user3"
                :disabled="step != 1"
                filterable
                placeholder="请选择人员"
                value-key="id"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                v-model="formData.remark2.time"
                :disabled="step != 1"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果：">
              <el-select
                v-model="formData.remark2.state"
                :disabled="step != 1"
                filterable
                placeholder="请选择结果"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        class="stage"
        v-if="step > 1 && (step == 2 ? showStatus == false : true)"
      >
        <el-form-item
          label="原因分析："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            :disabled="step != 2"
            type="textarea"
            v-model="formData.remark3.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="上传附件：">
              <FilesUpload
                v-model:src-list="srcList"
                :disabled="step != 2"
                v-model:pdf-list="pdfUrlList"
                v-model:file-name-list="fileNameList"
                :generate-pdf="true"
                :limit="10"
                @finished="testFiles"
                ref="load1"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下部流向人员：">
              <el-select
                v-model="formData.remark4.user4"
                :disabled="step != 2"
                filterable
                placeholder="请选择人员"
                value-key="id"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                :disabled="step != 2"
                v-model="formData.remark3.time"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果：">
              <el-select
                :disabled="step != 2"
                v-model="formData.remark3.state"
                filterable
                placeholder="请选择结果"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        class="stage"
        v-if="step > 2 && (step == 3 ? showStatus == false : true)"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="是否有纠正措施："
              prop="remark1[content]"
              :rules="[
                {
                  required: true,
                },
              ]"
            >
              <el-radio-group
                :disabled="step != 3"
                v-model="formData.remark4.res"
              >
                <el-radio value="0">否</el-radio>
                <el-radio value="1">是</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="formData.remark4.res == '1'">
            <el-form-item label="纠正措施通知单编号：">
              <el-input
                :disabled="step != 3"
                v-model="formData.remark4.resNum"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          label="原因："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            type="textarea"
            :disabled="step != 3"
            v-model="formData.remark4.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="上传附件：">
              <FilesUpload
                v-model:src-list="srcList1"
                v-model:pdf-list="pdfUrlList1"
                :disabled="step != 3"
                v-model:file-name-list="fileNameList1"
                :generate-pdf="true"
                :limit="10"
                @finished="testFiles1"
                ref="load2"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下部流向人员：">
              <el-select
                v-model="formData.remark5.user5"
                :disabled="step != 3"
                filterable
                placeholder="请选择人员"
                value-key="id"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                v-model="formData.remark4.time"
                :disabled="step != 3"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果：">
              <el-select
                v-model="formData.remark4.state"
                :disabled="step != 3"
                filterable
                placeholder="请选择结果"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        class="stage"
        v-if="step > 3 && (step == 4 ? showStatus == false : true)"
      >
        <el-form-item
          label="采取的措施："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            :disabled="step != 4"
            type="textarea"
            v-model="formData.remark5.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="上传附件：">
              <FilesUpload
                v-model:src-list="srcList2"
                :disabled="step != 4"
                v-model:pdf-list="pdfUrlList2"
                v-model:file-name-list="fileNameList2"
                :generate-pdf="true"
                :limit="10"
                @finished="testFiles2"
                ref="load3"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="下部流向人员：">
              <el-select
                v-model="formData.remark6.user6"
                filterable
                placeholder="请选择人员"
                value-key="id"
                :disabled="step != 4"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                :disabled="step != 4"
                v-model="formData.remark5.time"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果：">
              <el-select
                :disabled="step != 4"
                v-model="formData.remark5.state"
                filterable
                placeholder="请选择结果"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        class="stage"
        v-if="step > 4 && (step == 5 ? showStatus == false : true)"
      >
        <el-form-item
          label="不合格品评审（审理）处置意见："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            :disabled="step != 5"
            type="textarea"
            v-model="formData.remark6.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="下部流向人员：">
              <el-select
                v-model="formData.remark7.user7"
                filterable
                placeholder="请选择人员"
                value-key="id"
              >
                <el-option
                  v-for="item in userList"
                  :key="item.id"
                  :label="item.userName"
                  :value="item.userName"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                :disabled="step != 5"
                v-model="formData.remark6.time"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审核结果：">
              <el-select
                v-model="formData.remark6.state"
                filterable
                placeholder="请选择结果"
                :disabled="step != 5"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div
        class="stage"
        v-if="step > 5 && (step == 6 ? showStatus == false : true)"
      >
        <el-form-item
          label="组长（或分管领导）审批意见："
          prop="remark1[content]"
          :rules="[
            {
              required: true,
            },
          ]"
        >
          <el-input
            :disabled="step != 6"
            type="textarea"
            v-model="formData.remark7.content"
          />
        </el-form-item>
        <el-row>
          <el-col :span="6" />
          <el-col :span="6" />
          <el-col :span="6">
            <el-form-item label="日期" prop="reason">
              <el-date-picker
                v-model="formData.remark7.time"
                :disabled="step != 6"
                type="date"
                placeholder="Pick a day"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核结果：">
              <el-select
                v-model="formData.remark7.state"
                :disabled="step != 6"
                filterable
                placeholder="请选择结果"
              >
                <el-option
                  v-for="item in stateOption"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <div class="btns">
      <el-button type="primary" @click="submit" v-if="step && !showStatus"
        >提交</el-button
      >
      <el-button type="info" @click="toClose">返回</el-button>
    </div>
  </div>
</template>
<script setup>
import { getUserList } from "@/api/system/user";
import { useUserStoreHook } from "@/store/modules/user";
import { handle } from "@/api/reject";
const userStore = useUserStoreHook();
const emit = defineEmits(["getList"]);
const userName = ref("");
const formData = inject("formData");
const pdfUrlList = ref([]);
const srcList = ref([]);
const fileNameList = ref([]);
const pdfUrlList1 = ref([]);
const srcList1 = ref([]);
const load1 = ref(null);
const load2 = ref(null);
const load3 = ref(null);
const fileNameList1 = ref([]);
const pdfUrlList2 = ref([]);
const srcList2 = ref([]);
const fileNameList2 = ref([]);
const testFiles = () => {
  formData.value.remark3.pdfUrlList = pdfUrlList.value;
  formData.value.remark3.srcList = srcList.value;
  formData.value.remark3.fileNameList = fileNameList.value;
};
const array1 = ref([]);
const setFile = () => {
  if (
    formData.value.remark3.pdfUrlList ||
    formData.value.remark3.srcList ||
    formData.value.remark3.fileNameList
  ) {
    pdfUrlList.value = formData.value.remark3.pdfUrlList;
    srcList.value = formData.value.remark3.srcList;
    fileNameList.value = formData.value.remark3.fileNameList;
    array1.value = [];
    fileNameList.value.forEach((item) => {
      array1.value.push({
        name: item,
      });
    });
    load1.value?.setFileList(array1.value);
  }
  if (
    formData.value.remark4.pdfUrlList ||
    formData.value.remark4.srcList ||
    formData.value.remark4.fileNameList
  ) {
    pdfUrlList1.value = formData.value.remark4.pdfUrlList;
    srcList1.value = formData.value.remark4.srcList;
    fileNameList1.value = formData.value.remark4.fileNameList;
    array1.value = [];
    fileNameList1.value.forEach((item) => {
      array1.value.push({
        name: item,
      });
    });
    load2.value?.setFileList(array1.value);
  }
  if (
    formData.value.remark5.pdfUrlList ||
    formData.value.remark5.srcList ||
    formData.value.remark5.fileNameList
  ) {
    pdfUrlList2.value = formData.value.remark5.pdfUrlList;
    srcList2.value = formData.value.remark5.srcList;
    fileNameList2.value = formData.value.remark5.fileNameList;
    array1.value = [];
    fileNameList2.value.forEach((item) => {
      array1.value.push({
        name: item,
      });
    });
    load3.value?.setFileList(array1.value);
  }
};
const testFiles1 = () => {
  formData.value.remark4.pdfUrlList = pdfUrlList1.value;
  formData.value.remark4.srcList = srcList1.value;
  formData.value.remark4.fileNameList = fileNameList1.value;
};
const testFiles2 = () => {
  formData.value.remark5.pdfUrlList = pdfUrlList2.value;
  formData.value.remark5.srcList = srcList2.value;
  formData.value.remark5.fileNameList = fileNameList2.value;
};
const toClose = () => {
  formData.value = {};
  examineStatus.value = false;
  emit("getList");
};
const step = ref(null);
const showStatus = ref(false);
const setShowStage = () => {
  step.value = null;
  showStatus.value = false;
  if (formData.value.remark2.state == "-1") {
    step.value = 1;
    if (formData.value.remark2.user2 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
  if (formData.value.remark3.state == "-1") {
    step.value = 2;
    if (formData.value.remark3.user3 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
  if (formData.value.remark4.state == "-1") {
    step.value = 3;
    if (formData.value.remark4.user4 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
  if (formData.value.remark5.state == "-1") {
    step.value = 4;
    if (formData.value.remark5.user5 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
  if (formData.value.remark6.state == "-1") {
    step.value = 5;
    if (formData.value.remark6.user6 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
  if (formData.value.remark7.state == "-1") {
    step.value = 6;
    if (formData.value.remark7.user7 != userName.value) {
      showStatus.value = true;
    }
    return;
  }
};
const setFormData = () => {
  for (const key in formData.value.remark2) {
    if (formData.value.remark2[key] === "") {
      delete formData.value.remark2[key];
    }
  }
  for (const key in formData.value.remark3) {
    if (formData.value.remark3[key] === "") {
      delete formData.value.remark3[key];
    }
  }
  for (const key in formData.value.remark4) {
    if (formData.value.remark4[key] === "") {
      delete formData.value.remark4[key];
    }
  }
  for (const key in formData.value.remark5) {
    if (formData.value.remark5[key] === "") {
      delete formData.value.remark5[key];
    }
  }
  for (const key in formData.value.remark6) {
    if (formData.value.remark6[key] === "") {
      delete formData.value.remark6[key];
    }
  }
  for (const key in formData.value.remark7) {
    if (formData.value.remark7[key] === "") {
      delete formData.value.remark7[key];
    }
  }
};

const submit = async () => {
  setFormData();
  const { code } = await handle({
    ...formData.value,
    step: step.value,
    state: null,
  });
  if (code == "200") {
    ElMessage.success("提交成功");
    toClose();
  }
};
const stateOption = [
  {
    label: "通过",
    value: "0",
  },
  {
    label: "未通过",
    value: "1",
  },
  {
    label: "待审核",
    value: "-1",
  },
];
const examineStatus = inject("examineStatus");

const userList = ref([]);
onMounted(() => {
  getUserList({}).then((data) => {
    userList.value = data.data;
  });
  userName.value = userStore.user.username;
  setShowStage();
});
nextTick(() => {
  setFile();
});
</script>
<style lang="scss" scoped>
.body {
  padding-bottom: 40px;
  position: relative;
}
.stage {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
}
.btns {
  position: fixed;
  width: 100%;
  bottom: 40px;
  display: flex;
  justify-content: center;
}
</style>
