<template>
  <div class="water-analysis-page" :calss="{ iconCLass: typeList.type == 2 }">
    <div class="top">
      <el-form
        ref="ruleForm"
        inline
        :model="FormList"
        :rules="Formrules"
        :key="isKey"
        label-width="auto"
      >
        <el-row>
          <el-form-item label="项目名称" prop="projectNo" style="width: 45%">
            <el-select
              style="width: 100%"
              v-model="FormList.projectNo"
              placeholder="请选择项目名称"
              @change="ProjectChange"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
            >
              <el-option
                v-for="dict in ProjectListData"
                :key="dict.projectNo"
                :label="dict.projectName"
                :value="dict.projectNo"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="项目编号" prop="projectNo" style="width: 45%">
            <el-input
              disabled
              v-model="FormList.projectNo"
              placeholder="请输入项目编号"
              readonly
              class="readonlyClass"
            />
          </el-form-item>
          <el-form-item label="责任人:" style="width: 45%" prop="chargeUser">
            <el-input
              disabled
              v-model="FormList.chargeUser"
              placeholder="请输入责任人"
            />
          </el-form-item>
          <el-form-item
            label="编制时间:"
            prop="compilationTime"
            style="width: 45%"
          >
            <el-date-picker
              style="width: 100%"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              clearable
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              v-model="FormList.compilationTime"
              type="date"

              range-separator="到"
              placeholder="请选择编制时间"
            />
          </el-form-item>
          <el-form-item
            label="方案名称:"
            prop="scenarioName"
            style="width: 45%"
          >
            <el-input
              v-model="FormList.scenarioName"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              placeholder="请输入方案名称"
            />
          </el-form-item>
          <el-form-item label="面积:" prop="area" style="width: 45%">
            <el-input
              type="number"
              v-model="FormList.area"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              placeholder="请输入面积"
            >
              <template #append>平方米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="补充说明:" style="width: 93%" prop="description">
            <el-input
              v-model="FormList.description"
              type="textarea"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              placeholder="请输入补充说明"
            />
          </el-form-item>
          <el-form-item label="附件:" style="width: 93%">
            <el-upload
              v-model:file-list="fileList1"
              class="upload-demo"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              action="/prod-api/system/upload"
              :headers="uploadHeader"
              multiple
              :on-preview="handlePreview"
              style="width: 100%"
              :before-remove="beforeRemove"
            >
              <el-button type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持CSV格式,可一次性上传多个文件
                </div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="指定处理人:"
            prop="dealUsers"
            style="width: 45%"
          >
            <el-select
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              clearable
              v-model="FormList.dealUsers"
              class="m-2"
              placeholder="请选择指定处理人"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in personList"
                :key="item.userId"
                :label="item.nickName"
                :value="String(item.userId)"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="流程抄送:" prop="pushUsers" style="width: 45%">
            <el-select
              clearable
              v-model="FormList.pushUsers"
              :disabled="typeList.type == 4 || typeList.status == 'examine'"
              class="m-2"
              placeholder="请选择流程抄送人"
              size="mini"
              style="width: 100%"
            >
              <el-option
                v-for="item in personList"
                :key="item.userId"
                :label="item.nickName"
                :value="item.userId + ''"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="处理意见："
            style="width: 94%"
            prop="approveComment"
            v-if="typeList.type == 6"
          >
            <el-input
              style="width: 100%"
              v-model="FormList.approveComment"
              type="textarea"
              placeholder="请输入处理意见"
            />
          </el-form-item>
          <el-form-item
            v-if="typeList.type == 4 && stapesDate.length > 0"
            prop="pushUsers"
            style="width: 100%; margin: 10px 0"
          >
            <el-divider content-position="left">流程日志</el-divider>
              <el-steps direction="vertical" :active="stapesDate.length" >
                <el-step v-for="i in stapesDate" :title="i.activityName" style="height: 80px;width: 300px;">
                  <template #description>
                    <div class="direction">时间:{{ i.endTime}}</div>
                    <div class="direction">
                      分配人:{{ i.assigneeName  }}
                    </div>
                    <div class="direction">
                      任务备注:{{ i.comment  }}
                    </div>
                  </template>
                </el-step>
              </el-steps>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import {
  onMounted,
  toRefs,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
  nextTick,
} from "vue";
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectInfoSubmit,
  projectInfoapprovet,
  projectPatrolProblemPage,
  projectQualityReformRecordAdd,
  projectQualityReformRecordEdit,
  projectQualityReformRecordSubmit,
  projectQualityReformRecordapprove,
} from "@/api/engineeringApproval";
import { workflowProcess } from "@/api/project/qualityRectificationDetails";
import { projectInfoList } from "@/api/project/tenderReview";
import emgBox from "@/utils/ElMessageBox";
import { ElMessage, ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth";
const { typeList } = defineProps(["typeList"]);
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const { proxy } = getCurrentInstance();
const {
  abarbeitung_type,
  project_status,
  project_operation_pattern,
  build_status,
  drainage_partition,
} = proxy.useDict(
  "abarbeitung_type",
  "project_status",
  "project_operation_pattern",
  "build_status",
  "drainage_partition"
);
const emits = defineEmits();
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const projectList = ref([]);
const ProjectListData = ref([]);
const stapesDate = ref([]);
const fileList1 = ref([]);
defineExpose({ closed, submit,resetFiled });
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const Formrules = reactive({
  checkUnitName: [
    { required: true, message: "检查单位不能为空", trigger: "blur" },
  ],
  hiddenTroubleType: [
    { required: true, message: "隐患类型不能为空", trigger: "change" },
  ],
  hiddenTroubleLevel: [
    { required: true, message: "隐患级别不能为空", trigger: "change" },
  ],
  abarbeitungDeadline: [
    { required: true, message: "整改完成期限不能为空", trigger: "blur" },
  ],
  // dealUsers: [
  //   { required: true, message: "指定处理人不能为空", trigger: "blur" },
  // ],
  chargeUser: [{ required: true, message: "责任人不能为空", trigger: ["blur",'change'] }],
  projectNo: [
    { required: true, message: "项目编号/名称不能为空", trigger: "change" },
  ],
  buildCategory: [
    { required: true, message: "建设类别不能为空", trigger: "change" },
  ],
  drainagePartition: [
    { required: true, message: "所属排水分区不能为空", trigger: "change" },
  ],
  primaryConcatPersonTelephone: [
    { required: true, message: "主要联系人电话不能为空", trigger: "blur" },
  ],
  approveComment: [
    { required: true, message: "请您输入处理意见", trigger: "blur" },
  ],
});
const activeName = ref("one");
function handlePreview(file) {
  console.log(file);
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function beforeRemove(file) {
  return true
}
//提交
function submit(v) {
  proxy.$refs.ruleForm.validate((valid) => {
    if (valid) {
      FormList.value.fileSaveRequestList = [];
      fileList1.value.forEach((element) => {
        if (element.hasOwnProperty("response")) {
          element.response.data.refType = "proDangerousProjectApprove";
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      FormList.value.projectQualityReformDetailSaveRequestList =
        projectList.value;
      let { dealUsers, pushUsers } = FormList.value;
      if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
        FormList.value.pushUsers = pushUsers.join(",");
      }
      if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
        FormList.value.dealUsers = dealUsers?.join(",");
      }
      FormList.value.approveFlag = v == 1 ? true : false;
      if (v == 1 ||v==2) {
        ElMessageBox.confirm(`您确定${v==1? '通过':'驳回'}吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
             })
    .then(() => {
      projectInfoapprovetM(FormList.value)
    })
    .catch(() => { });
      }
      // 编辑
      else if (FormList.value.type == 5) {
        projectQualityReformRecordEdit(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      } else if (FormList.value.type == 6) {
        projectQualityReformRecordapprove(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      } else if (FormList.value.type == 3 || v == 6) {
        if (!FormList.value.dealUsers) {
          ElMessage({
            message: "请您选择指定处理人",
            type: "warning",
          });
        } else {
          projectQualityReformRecordSubmit(FormList.value).then(({ code }) => {
            if (code == 200) {
              emits("onModalClose");
            }
          });
        }
      } else {
        projectQualityReformRecordAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      }
    }
  });
}
function resetFiled(){
     FormList.value.dealUsers=''
     FormList.value.pushUsers=''
     fileList1.value=[]
    proxy.$refs.ruleForm.resetFields()
}

function closed() {
  proxy.$refs.ruleForm.resetFields();
  fileList1.value = [];
  emits("onModalClose");
}
const projectInfoapprovetM = async (p) => {
  let { data } = await projectInfoapprovet(p);
  emits("onModalClose");
};
const projectTypeListM = async () => {
  let { data } = await projectTypeList();
  project_TypeId.value = data;
};
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};
const getUserProfileM = async () => {
  let { data } = await getUserProfile();
};
const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
  FormList.value = typeList;
  fileList1.value = typeList.fileList1;
  projectList.value = typeList.projectQualityReformDetailSaveRequestList || [];
};
/**获取所有的项目数据 */
function loadProjerctListData() {
  projectInfoList().then((response) => {
    ProjectListData.value = response.data;
  });
}

//根据项目获取项目清单
function ProjectChange(projectId) {
  const curInfo = ProjectListData.value.find(item => item.projectNo === projectId)
  FormList.value.chargeUser = curInfo.chargeUser
  // projectPatrolProblemPage(projectId).then(({ data: { chargeUser } }) => {
  //   FormList.value.chargeUser = chargeUser;
  // });
}
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: typeList.id,
    workflowKey: "proDangerousProjectApprove",
    workflowUserId: "",
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};
onMounted(() => {
  console.log("typeList", typeList);
  projectTypeListM();
  projectCompanyM();
  getUserProfileM();
  userListM();
  loadProjerctListData();
  // ProjectChange(typeList.projectNo);
  if (typeList.status != "start" && typeList.type != "add") {
    workflowProcessM();
  } else {
    proxy.$refs.ruleForm.resetFields();
    FormList.value.dealUsers = [];
  }
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  .top {
    // margin-bottom: 15px;
  }
}

.pagination {
  float: right;
  margin-top: 10px;
}

.iconCLass {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}

.tabs {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}

.direction {
  min-width: 190px;
}
</style>