<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-form label-width="auto" ref="ruleForm" :rules="projectTableRules" inline :model="FormList" :key="isKey">
        <el-form-item
          :label="i.label"
          :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"
            v-model="FormList.projectProgress"
            v-else-if="i.prop == 'projectProgress'"
            type="number"
            :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="/system/upload"
            :headers="uploadHeader"
            limit="1"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :before-upload="handleBeforeUpload"
          >
            <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>
          <el-steps direction="vertical" :active="stapesDate.length">
            <el-step v-for="i in stapesDate" :title="'当前步骤:' + i.activityName" style="height: 90px; 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 {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectInfoAddInformation,
} from '@/api/project/projectInformation';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { regionList, projectInfoSubmit } from '@/api/project/projectTable';
import { workflowProcess } from '@/api/project/qualityRectificationDetails';
import { projectTableRules } from '@/utils/rules';
import { projectTableForm } from '@/utils/form';
const { proxy } = getCurrentInstance();
const { typeList, onModalClose } = defineProps(['typeList', 'onModalClose']);
const { build_category, project_status, project_operation_pattern, drainage_partition, build_status } = proxy.useDict(
  'build_category',
  'project_status',
  'project_operation_pattern',
  'drainage_partition',
  'build_status'
);
const emits = defineEmits();
const router = useRouter();
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
let dataForm = reactive({
  tableData: '',
  tableLoading: false,
  selectList: [],
  startTime: '',
  endTime: '',
  projectCategory: '',
  total: '',
});

let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const stapesDate = ref([]);
const provieceList = ref([]);
const provieceCity = ref([]);
const citList = ref([]);
let areCode = ref(0);
//区县
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 p => {
  let { data } = await regionList({ parentCode: typeList.province });
  nextTick(() => {
    provieceCity.value = data;
  });
};
const regionM1 = async p => {
  let { data } = await regionList({ parentCode: typeList.city });
  nextTick(() => {
    citList.value = data;
  });
};
const submit = v => {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      let { dealUsers, pushUsers } = FormList.value;
      if (dealUsers?.length > 0 && Array.isArray(dealUsers)) {
        FormList.value.dealUsers = dealUsers?.join(',');
      }
      if (pushUsers?.length > 0 && Array.isArray(pushUsers)) {
        FormList.value.pushUsers = pushUsers.join(',');
      }
      if (typeList.type == 5) {
        FormList.value.operation = 'update';
        FormList.value.oldContent = JSON.stringify(FormList.value);
        // FormList.value.content = [
        //   FormList.value.content[0],
        //   FormList.value
        // ];
        console.log(FormList.value, 7177);
        // console.log(FormList.value, "typeListtypeList");
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            proxy.$refs.ruleForm.resetFields();
          }
        });
      } 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');
              router.push({ path: 'projectTable' });
            }
          });
        }
      } else {
        projectInfoAddInformation(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            router.push({ path: 'projectTable' });
          }
        });
      }
    }
  });
};
function closeds() {
  FormList.value = {};
  proxy.$refs.ruleForm.resetFields();
}
defineExpose({ submit, closeds });
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;
  FormList.value = typeList;
  // if (typeList?.dealUsers) {
  //   FormList.value.dealUsers = typeList.dealUsers.split(",");
  // }
  // if (typeList?.pushUsers) {
  //   FormList.value.pushUsers = typeList.pushUsers.split(",");
  // }
  // FormList.value.content = [{ type: "old", projectInfo: { ...typeList } }];
  FormList.value.newContent = JSON.stringify(typeList);
  regionM();
  regionM1();
};
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: typeList.id,
    workflowKey: 'ProjectInfo',
    workflowUserId: '',
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};

function handlePreview(file) {
  console.log(file);
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
function handleBeforeUpload(file) {
  if (file.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    return false;
  }
  return true;
}
function beforeRemove(file) {
  return true;
}
onMounted(() => {
  console.log('typeListtypeList', typeList);
  projectTypeListM();
  projectCompanyM();
  // getUserProfileM();
  userListM();
  regionListM();
  if (typeList.status != 'start' && typeList.type != '4') {
    workflowProcessM();
  }
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
</style>