<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="LeftBox1">
        <el-progress
          type="circle"
          :percentage="DetailData.paymentRatio"
          :width="150"
          style="margin: 10px 10px 20px 120px"
          :stroke-width="20"
          striped
          striped-flow
        />
        <div style="width: 380px; display: flex">
          <div class="HTMoney1">
            <div class="JENum">{{ DetailData.contractAmount }}<span style="font-size: 14px">(万元)</span></div>
            <div class="JEName">合同金额</div>
          </div>
          <div class="HTMoney1">
            <div class="JENum">
              {{ DetailData.paymentMoney ? DetailData.paymentMoney : '--' }}<span style="font-size: 14px">(万元)</span>
            </div>
            <div class="JEName">已支付金额</div>
          </div>
          <div class="HTMoney1">
            <div class="JENum">
              {{ DetailData.notPaymentMoney ? DetailData.notPaymentMoney : '--' }}<span style="font-size: 14px">(万元)</span>
            </div>
            <div class="JEName">未支付金额</div>
          </div>
        </div>
        <div style="width: 100%; margin: 20px 0">
          <el-divider content-position="left">项目里程碑</el-divider>
          <div v-if="stapesDate1.length > 0">
            <el-steps finish-status="success" direction="vertical" :active="activeStatus" :process-status="processstatus">
              <el-step style="height: 100px; width: auto" v-for="(i, index) in stapesDate1" :title="'当前步骤:' + i.milestoneName">
                <template #description>
                  <div class="direction">{{ i.finishDate?.substring(0, 10) }}</div>
                  <div class="direction">
                    {{ i.fileList[0]?.originalName }}
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <el-form label-width="auto" ref="ruleForm" :rules="Formrules" inline :model="FormList" :key="isKey" :disabled="typeList.type == 2">
        <el-row>
          <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' ? '93.5%' : '45%' }"
          >
            <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"
              multiple
              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-row>
      </el-form>
      <div style="width: 230px" v-if="stapesDate.length > 0">
        <el-divider content-position="left">流程日志</el-divider>
        <div>
          <el-steps direction="vertical" :active="stapesDate.length">
            <el-step style="height: 100px; width: 230px" v-for="i in stapesDate" :title="'当前步骤:' + i.activityName">
              <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 { ElMessageBox } from 'element-plus';
import { workflowProcess } from '@/api/project/qualityRectificationDetails';
import { getProjectStatistics } from '@/api/project/tenderReview';
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectMilestoneselectSuccessList,
} from '@/api/project/projectInformation';
import { projectTableForm } from '@/utils/form';
import { regionList } from '@/api/project/projectTable';
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 emits = defineEmits();
const typeList = inject('typeList1');
let areCode = ref(0);
const activeStatus = ref(0);
const processstatus = ref(0);
const stapesDate = ref([]);
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const stapesDate1 = ref([]);
const Formrules = reactive({
  dealUsers: [{ required: true, message: '指定处理人不能为空', trigger: 'blur' }],
  chargeUser: [{ required: true, message: '责任人不能为空', trigger: 'blur' }],
  totalInvest: [{ required: true, message: '项目总投资不能为空', trigger: 'blur' }],
  startTime: [{ required: true, message: '项目开始日期不能为空', trigger: 'blur' }],
  endTime: [{ required: true, message: '项目交付日期不能为空', trigger: 'blur' }],

  projectTypeId: [{ required: true, message: '项目类别不能为空', trigger: 'blur' }],
  projectNo: [{ required: true, message: '项目编号不能为空', trigger: 'blur' }],
  projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
  buildCategory: [{ required: true, message: '建设类别不能为空', trigger: 'change' }],

  drainagePartition: [{ required: true, message: '所属排水分区不能为空', trigger: 'change' }],
  primaryConcatPersonTelephone: [{ required: true, message: '主要联系人电话不能为空', trigger: 'blur' }],
});
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const provieceList = ref([]);
const provieceCity = ref([]);
const citList = ref([]);
const DetailData = ref({});
//区县
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.value.province });
  nextTick(() => {
    provieceCity.value = data;
  });
};
const regionM1 = async p => {
  let { data } = await regionList({ parentCode: typeList.value.city });
  nextTick(() => {
    citList.value = data;
  });
};
const submit = () => {
  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(',');
      }
      FormList.value.content = JSON.stringify([FormList.value.content[0], { type: 'new', projectInfo: { ...FormList.value } }]);
      console.log(JSON.stringify(FormList.value.content));
      console.log(FormList.value, 'typeListtypeList');
      if (typeList.type == 3) {
        FormList.value.operation = 'add';
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            proxy.$refs.ruleForm.resetFields();
          }
        });
      } else if (typeList.type == 5) {
        FormList.value.operation = 'update';
        projectInfoAdd(FormList.value).then(({ code }) => {
          if (code == 200) {
            emits('onModalClose');
            proxy.$refs.ruleForm.resetFields();
          }
        });
      }
    }
  });
};
function closeds() {
  proxy.$refs.ruleForm.resetFields();
}
defineExpose({ submit, closeds });
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();
  // unit_list.value = data
};
const userListM = async () => {
  let { data } = await userList();
  personList.value = data;
  FormList.value = typeList.value;
  regionM();
  regionM1();
};
//获取流程日志
const workflowProcessM = async () => {
  let params = {
    businessKey: typeList.value.id,
    workflowKey: 'ProjectInfo',
    workflowUserId: '',
  };
  let { data } = await workflowProcess(params);
  stapesDate.value = data;
};
//获取项目里程碑
const projectMilestoneselectSuccessListM = async P => {
  let { data } = await projectMilestoneselectSuccessList(P);
  stapesDate1.value = data;
  const st = data.findIndex(i => {
    return i.success == 0;
  });
  activeStatus.value = st;
};
//获取合同
const getProjectStatisticsM = async id => {
  let { data } = await getProjectStatistics(id);
  DetailData.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("typeListtypeListtypeListtypeList", typeList);
  projectTypeListM();
  projectCompanyM();
  // getUserProfileM();
  userListM();
  regionListM();
  if (typeList.value.status != 'start') {
    workflowProcessM();
  }
  getProjectStatisticsM(typeList.value.projectNo);
  projectMilestoneselectSuccessListM(typeList.value.projectNo);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .top {
    display: flex;
  }
}

.iconCLass {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0;
  }
}
.tabs {
  :deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0;
  }
}
.LeftBox1 {
  width: 380px;
  height: 100%;
  float: left;

  .HTNo {
    width: 340px;
    text-align: center;
    font-size: 16px;
  }

  .HTMoney1 {
    width: 170px;
    height: 60px;
    float: left;
    text-align: center;

    .JENum {
      width: 100%;
      height: 40px;
      font-size: 18px;
      font-weight: 400;
      color: #409eff;
    }

    .JEName {
      width: 100%;
      height: 40px;
      font-size: 16px;
      color: black;
    }
  }
}
</style>