<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="LeftBox1">
        <el-progress
          type="circle"
          :percentage="DetailData.projectProgress * 1"
          :width="150"
          style="margin: 10px 10px 20px 20px"
          :stroke-width="20"
          striped
          striped-flow
        />
        <!-- <p class="HTNo">{{ DetailData.projectTypeName }}</p> -->
        <div style="width: 380px; display: flex">
          <div class="HTMoney1">
            <div class="JENum">
              {{ DetailData.projectProgress
              }}<span style="font-size: 14px">(%)</span>
            </div>
            <div class="JEName">项目进度</div>
          </div>
        </div>
      </div>
      <el-table
        :data="postList.projectPlanInventoryList"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-prop="{ children: 'children' }"
      >
        <el-table-column
          :label="i.label"
          align="center"
          :prop="i.props"
          show-overflow-tooltip
          v-for="i in plantContCloum"
        >
          <template #default="{ row }" v-if="i.props == 'schedule'">
            {{ row.schedule || 0 }}%
          </template>
          <template #default="{ row }" v-if="i.props == 'dutyUserId'">
            {{ getStateName(row.dutyUserId) }}
          </template>
          <template #default="{ row }" v-if="i.props == 'outputData'">
            <span class="projectName">{{ row.outputData }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup>
import {
  projectInfoSelectByProjectNo,
  projectContractPage,
  projectPlanInfoselectByProjectNo,
} from "@/api/project/tenderReview";
import {
  projectInfoAdd,
  projectTypeList,
  projectCompany,
  getUserProfile,
  userList,
  projectInfoSubmit,
  projectInfoedit,
} from "@/api/projectInformation";
import { projectPlanMonthlyInfolast } from "@/api/xmbglishi";
import { regionList } from "@/api/projectTable";
import { plantContCloum } from "@/utils/cloums";
import {
  onMounted,
  defineEmits,
  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");
const postList = ref([]);
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const provieceCity = ref([]);
const citList = ref([]);
const DetailData = ref({});
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) {
      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;
};
//获取项目计划进度
const getProjectStatisticsM = async (id) => {
  let { data } = await projectInfoSelectByProjectNo(id);
  DetailData.value = data;
};
const projectPlanInfoIDM = async (p) => {
  let { data } = await projectPlanInfoselectByProjectNo(p);
  postList.value = data;
};
const getStateName = (r) => {
  let a = "";
  personList.value.map((i) => {
    if (i.userId == r) {
      a = i;
    }
  });
  return a.nickName;
};
onMounted(() => {
  // projectTypeListM();
  // projectCompanyM();
  userListM();
  getProjectStatisticsM(typeList.value.projectNo);
  projectPlanInfoIDM(typeList.value.projectNo);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .top {
    display: flex;
    // flex-direction:column;
  }
}
.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: 280px;
  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>