<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form
        label-width="auto"
        :rules="projectTableRules"
        ref="ruleForm"
        inline
        :model="FormList"
        :key="isKey"
      >
        <el-form-item
          :label="i.label"
          style="width: 30%"
          :prop="i.prop"
          v-for="i in projectTableForm"
          :disabled="typeList.type == 1 || typeList.type == 2"
          :style="{
            width:
              i.prop == 'buildContent' || i.prop == 'supplement'
                ? '97%'
                : '31%',
          }"
        >
          <el-select
            v-if="i.prop == 'province'"
            @change="provieceListChange"
            clearable
            v-model="FormList.province"
            class="m-2"
            :placeholder="i.placeholder"
            size="mini"
            filterable
            style="width: 100%"
            :disabled="typeList.type == 1 || typeList.type == 2"
          >
            <el-option
              v-for="item in provieceList"
              :key="item.areaCode"
              :label="item.name"
              :value="item.areaCode"
            />
          </el-select>
          <el-select
            v-else-if="i.prop == 'city'"
            @change="citListChange"
            clearable
            v-model="FormList.city"
            class="m-2"
            :placeholder="i.placeholder"
            :disabled="typeList.type == 1 || typeList.type == 2"
            filterable
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in provieceCity"
              :key="item.areaCode"
              :label="item.name"
              :value="item.areaCode"
            />
          </el-select>
          <el-select
            clearable
            v-else-if="i.prop == 'county'"
            v-model="FormList.county"
            class="m-2"
            :placeholder="i.placeholder"
            filterable
            :disabled="typeList.type == 1 || typeList.type == 2"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in citList"
              :key="item.areaCode"
              :label="item.name"
              :value="item.areaCode"
            />
          </el-select>
          <el-select
            v-else-if="i.prop == 'projectTypeId'"
            clearable
            v-model="FormList.projectTypeId"
            class="m-2"
            :placeholder="i.placeholder"
            :disabled="typeList.type == 1 || typeList.type == 2"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in project_TypeId"
              :key="item.value"
              :label="item.projectTypeName"
              :value="item.id"
            />
          </el-select>
          <el-select
            clearable
            v-else-if="i.prop == 'buildCategory'"
            v-model="FormList.buildCategory"
            class="m-2"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.placeholder"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in build_category"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            style="width: 100%"
            v-else-if="i.prop == 'startTime'"
            clearable
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="FormList.startTime"
            :disabled="typeList.type == 1 || typeList.type == 2"
            type="date"
            range-separator="到"
            :placeholder="i.placeholder"
          />
          <el-date-picker
            v-else-if="i.prop == 'endTime'"
            style="width: 100%"
            clearable
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled="typeList.type == 1 || typeList.type == 2"
            v-model="FormList.endTime"
            type="date"
            range-separator="到"
            :placeholder="i.placeholder"
            @change="endTimeChange"
          />

          <el-select
            clearable
            v-model="FormList.drainagePartition"
            v-else-if="i.prop == 'drainagePartition'"
            class="m-2"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.placeholder"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in drainage_partition"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-date-picker
            style="width: 100%"
            clearable
            v-else-if="i.prop == 'endTime'"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled="typeList.type == 1 || typeList.type == 2"
            v-model="FormList.endTime"
            type="date"
            range-separator="到"
            :placeholder="i.placeholder"
            @change="endTimeChange"
          />
          <el-select
            clearable
            v-model="FormList.projectStatus"
            class="m-2"
            v-else-if="i.prop == 'projectStatus'"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.placeholder"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in project_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            clearable
            v-model="FormList.buildStatus"
            v-else-if="i.prop == 'buildStatus'"
            :disabled="typeList.type == 1 || typeList.type == 2"
            class="m-2"
            :placeholder="i.placeholder"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in build_status"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            min="0"
            max="100"
            :step="0.01"
            v-model="FormList.projectProgress"
            v-else-if="i.prop == 'projectProgress'"
            type="number"
            :precision="3"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.placeholder"
          >
            <template #append>%</template></el-input
          >
          <el-select
            clearable
            v-model="FormList.projectOperationPattern"
            v-else-if="i.prop == 'projectOperationPattern'"
            class="m-2"
            :placeholder="i.placeholder"
            size="mini"
            style="width: 100%"
            :disabled="typeList.type == 1 || typeList.type == 2"
          >
            <el-option
              v-for="item in project_operation_pattern"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            min="0"
            v-else-if="
              i.prop == 'valuation' ||
              i.prop == 'govermentInvest' ||
              i.prop == 'socialInvest' ||
              i.prop == 'centralSpecialFunds' ||
              i.prop == 'totalInvest' ||
              i.prop == 'spongeInvest' ||
              i.prop == 'totalQuantites'
            "
            v-model="FormList[i.prop]"
            type="number"
            :placeholder="i.placeholder"
            :disabled="typeList.type == 1 || typeList.type == 2"
          >
            <template #append>
              {{
                i.prop == "totalInvest"
                  ? "含主体工程万元"
                  : i.prop == "spongeInvest"
                  ? "不含主体工程万元"
                  : "万元"
              }}
            </template>
          </el-input>
          <el-select
            clearable
            v-model="FormList.designUnit"
            class="m-2"
            :placeholder="i.placeholder"
            v-else-if="i.prop == 'designUnit'"
            :disabled="typeList.type == 1 || typeList.type == 2"
            size="mini"
            style="width: 100%"
          >
            <el-option
              v-for="item in unit_list"
              :key="item.value"
              :label="item.unitName"
              :value="item.id"
            />
          </el-select>
          <el-select
            clearable
            v-else-if="i.prop == 'constructUnit'"
            v-model="FormList.constructUnit"
            class="m-2"
            :placeholder="i.placeholder"
            size="mini"
            :disabled="typeList.type == 1 || typeList.type == 2"
            style="width: 100%"
          >
            <el-option
              v-for="item in unit_list"
              :key="item.value"
              :label="item.unitName"
              :value="item.id"
            />
          </el-select>
          <el-select
            clearable
            v-model="FormList.operationUnit"
            v-else-if="i.prop == 'operationUnit'"
            class="m-2"
            :placeholder="i.placeholder"
            size="mini"
            :disabled="typeList.type == 1 || typeList.type == 2"
            style="width: 100%"
          >
            <el-option
              v-for="item in unit_list"
              :key="item.value"
              :label="item.unitName"
              :value="item.id"
            />
          </el-select>
          <el-select
            clearable
            v-model="FormList.dealUsers"
            v-else-if="i.prop == 'dealUsers'"
            class="m-2"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.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-select
            clearable
            :disabled="typeList.type == 1 || typeList.type == 2"
            v-model="FormList.pushUsers"
            v-else-if="i.prop == 'pushUsers'"
            class="m-2"
            :placeholder="i.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-upload
            :disabled="typeList.type == 1 || typeList.type == 2"
            v-model:file-list="fileList1"
            v-else-if="i.prop == 'fileList1'"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            limit="1"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
          >
            <el-button type="primary">选择文件</el-button>
            <span style="margin-left: 5px"> 支持扩展名pdf.jpg...</span>
          </el-upload>
          <el-input
            v-else
            v-model="FormList[i.prop]"
            :disabled="typeList.type == 1 || typeList.type == 2"
            :placeholder="i.placeholder"
            :type="
              i.prop == 'buildContent' ||
              i.prop == 'supplement' ||
              i.prop == 'approveComment'
                ? 'textarea'
                : ''
            "
          />
        </el-form-item>
        <el-form-item
          label="处理意见："
          style="width: 94%"
          prop="approveComment"
          v-if="typeList.type == 2"
        >
          <el-input
            style="width: 100%"
            v-model="FormList.approveComment"
            type="textarea"
            :disabled="typeList.type == 1"
            placeholder="请输入处理意见"
          />
        </el-form-item>
      </el-form>
      <div
        v-if="typeList.type != 4 && stapesDate.length > 0"
        prop="stapesDate"
      >
        <el-divider content-position="left">流程日志</el-divider>
        <div style="width: 100%; margin: 10px 0;">
          <el-steps direction="vertical" :active="stapesDate.length">
            <el-step
              v-for="i in stapesDate"
              :title="'当前步骤:' + i.activityName"
              style="height: 100px;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>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  onMounted,
  defineEmits,
  defineProps,
  defineExpose,
} from "vue";
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  userList,
  projectInfoSubmit,
  projectInfoapprovet,
  regionList,
} from "@/api/projectTable";
import { workflowProcess } from "@/api/project/qualityRectificationDetails";
import { FileSystemList } from "@/api/project/tenderReview";
import { projectTableRules } from "@/utils/rules";
import { formatDate } from "@/utils";
import { projectTableForm } from "@/utils/form";
import { ElMessage, ElMessageBox } from "element-plus";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const {
  build_category,
  project_status,
  project_operation_pattern,
  build_status,
  drainage_partition,
} = proxy.useDict(
  "build_category",
  "project_status",
  "project_operation_pattern",
  "build_status",
  "drainage_partition"
);
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
const { typeList } = defineProps(["typeList"]);
const emits = defineEmits();
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const provieceList = ref([]);
const provieceCity = ref([]);
const citList = ref([]);
const fileList1 = ref([]);
const stapesDate = ref([]);
let areCode = ref(0);
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
  projectProgress: 0,
  startTime: formatDate(new Date()),
});
defineExpose({ closed, submit, resetFiled });
function handlePreview(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 = "proProjectInfo";
          FormList.value.fileSaveRequestList.push(element.response.data);
        } else {
          FormList.value.fileSaveRequestList.push(element);
        }
      });
      let { dealUsers, pushUsers } = FormList.value;
      // if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
      //   FormList.value.dealUsers = dealUsers?.join(",");
      // } else {
      //   FormList.value.dealUsers = "";
      // }
      // if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
      //   FormList.value.pushUsers = pushUsers.join(",");
      // } else {
      //   FormList.value.pushUsers = "";
      // }
      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 == 6) {
        projectQualityReformRecordapprove(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      } else if (FormList.value.type == 3 || v == 6) {
        console.log(FormList.value.dealUsers, "FormList.value.dealUsers");
        if (!FormList.value.dealUsers) {
          ElMessage({
            message: "请您选择指定处理人",
            type: "warning",
          });
        } else {
          projectInfoSubmit(FormList.value).then(({ code }) => {
            if (code == 200) {
              emits("onModalClose");
            }
          });
        }
      } else {
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits("onModalClose");
          }
        });
      }
    }
  });
}
function closed() {
  FormList.value = {};
  emits("onModalClose");
}
function resetFiled() {
  proxy.$refs.ruleForm.resetFields();
}
//审核
const projectInfoapprovetM = async (p) => {
  let { data } = await projectInfoapprovet(p);
   emits("onModalClose");
};
const projectTypeListM = async () => {
  let p={status:'0'}
  let { data } = await projectTypeList(p);
  project_TypeId.value = data;
};
const projectCompanyM = async () => {
  let { data } = await projectCompany();
  unit_list.value = data;
};
//获取人员信息
const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
};
const mountedM = () => {
  FormList.value = typeList;
  // if (typeList?.dealUsers) {
  //   FormList.value.dealUsers = typeList.dealUsers.split(",");
  // }
  // if (typeList?.pushUsers) {
  //   FormList.value.pushUsers = typeList.pushUsers.split(",");
  // }
  FileSystemList({
    refId: typeList.id,
    refType: "proProjectInfo",
  }).then(({ data }) => {
    fileList1.value = data;
  });
  regionM();
  regionM1();
};
//区县
const regionListM = async (p) => {
  let { data } = await regionList(p);
  switch (areCode.value) {
    case 0:
      provieceList.value = data;
      break;
    case 1:
      provieceCity.value = data;
      break;
    case 2:
      citList.value = data;
      break;
  }
};
function provieceListChange(parentCode) {
  areCode.value = 1;
  regionListM({ parentCode });
}
function citListChange(parentCode) {
  areCode.value = 2;
  regionListM({ parentCode });
}
const regionM = async () => {
  let { data } = await regionList({ parentCode: typeList.province });
  nextTick(() => {
    provieceCity.value = data;
  });
};
const regionM1 = async () => {
  let { data } = await regionList({ parentCode: typeList.city });
  nextTick(() => {
    citList.value = data;
  });
};
//项目交付日期变更
function endTimeChange(v) {
  console.log("v", new Date(v).getTime());
}
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: typeList.id,
    workflowKey: "ProjectInfo",
    workflowUserId: "",
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};
onMounted(() => {
  mountedM();
  projectTypeListM();
  projectCompanyM();
  userListM();
  regionListM();
  if (typeList.status != "start" && typeList.type != "4") {
    workflowProcessM();
  }
});
</script>
<style lang="scss" scoped></style>