<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="/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-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 { workflowProcess } from "@/api/project/qualityRectificationDetails";
import {
  getProjectStatistics,
} from "@/api/project/tenderReview";
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectMilestoneselectSuccessList
} from "@/api/projectInformation";
import { projectTableForm } from "@/utils/form";
import { regionList } from "@/api/projectTable";
import {
  onMounted,
  defineEmits,
  reactive,
  defineExpose,
  inject,
} from "vue";
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;
};
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
  }
}
.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;
  }
}
.LeftBox1 {
      width: 380px;
      height: 100%;
      float: left;

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

      .HTMoney1 {
        width: 170px;
        height: 60px;
        float: left;
        display:inline-block;
        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>