<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="LeftBox1">
        <el-progress
          type="circle"
          :percentage="(postList.totalProgress * 1).toFixed(2)"
          :width="120"
          style="margin: 10px 10px 20px 70px"
          :stroke-width="20"
          striped
          striped-flow
        />
        <el-progress
          type="circle"
          :percentage="
            stapesDate.totalInvest == 0
              ? '0.00'
              : (
                  ((postList.completeTotalInvest * 1) /
                    (stapesDate.totalInvest * 1)) *
                  100
                ).toFixed(2)
          "
          :width="120"
          style="margin: 10px 10px 20px 130px"
          :stroke-width="20"
          striped
          striped-flow
        >
        </el-progress>
        <el-progress
          type="circle"
          :percentage="
            stapesDate.spongeInvest == 0
              ? '0.00'
              : (
                  ((postList.completeSpongeInvest * 1) /
                    (stapesDate.spongeInvest * 1)) *
                  100
                ).toFixed(2)
          "
          :width="120"
          style="margin: 10px 10px 20px 120px"
          :stroke-width="20"
          striped
          striped-flow
        />
        <div style="" class="Top_cont">
          <div class="HTMoney1">
            <div class="JENum">
              {{ postList.totalProgress || 0
              }}<span style="font-size: 14px">(%)</span>
            </div>
            <div class="JEName">项目进度</div>
          </div>
          <div class="HTMoney1">
            <div class="JENum">{{ postList.completeTotalInvest || 0 }}</div>
            <div class="JEName">完成项目总投资(万元)</div>
          </div>

          <div class="HTMoney1">
            <div class="JENum">{{ postList.completeSpongeInvest || 0 }}</div>
            <div class="JEName">完成海绵相关投资(万元)</div>
          </div>

          <div class="HTMoney1">
            <div class="JENum">{{ typeList.startTime?.substring(0, 10) }}</div>
            <div class="JEName">项目开始日期</div>
          </div>
          <div class="HTMoney1">
            <div class="JENum">{{ build_statusM(typeList.buildStatus) }}</div>
            <div class="JEName">项目建设状态</div>
          </div>
          <div class="HTMoney1" :class="{ HTMoney2: Time > 0 }">
            <div class="JENum">
              {{ typeList.endTime?.substring(0, 10) || "2024-12-15" }}
            </div>
            <div class="JEName">项目交付日期</div>
          </div>
        </div>
      </div>
      <el-table
        :data="postList.details"
        style="width: 100%"
        row-key="id"
        default-expand-all
        :tree-prop="{ children: 'children' }"
      >
        <el-table-column
          prop="nodeName"
          align="center"
          label="一级节点"
          width="180"
          show-overflow-tooltip
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <el-tag
              :key="row.status"
              class="mx-1"
              :type="row.status == 0 ? 'success' : 'danger'"
            >
              {{ row.status == 0 ? "正常" : "超期" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="schedule"
          label="进度"
          align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }"> {{ row.schedule || 0 }}% </template>
        </el-table-column>
        <el-table-column
          prop="planStartTime"
          label="计划日期起"
          align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            {{ row.planStartTime?.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="planEndTime"
          label="计划日期止"
          align="center"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            {{ row.planEndTime?.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="estimatedWorkHours"
          align="center"
          label="预算工时H"
          show-overflow-tooltip
        />
        <el-table-column prop="planStartTime" align="center" label="实际日期起">
          <template #default="{ row }">
            {{ row.planStartTime?.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="planEndTime"
          align="center"
          label="实际日期止"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            {{ row.planEndTime?.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="manHour"
          align="center"
          label="实际工时H"
          show-overflow-tooltip
        />
        <el-table-column
          prop="dutyUserId"
          align="center"
          label="负责人"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <span>{{ getStateName(row.dutyUserId) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fileSaveRequestList"
          align="center"
          label="输出资料"
          show-overflow-tooltip
        >
        <template #default="{ row }">
          <span @click="handlePreview(i, 2, '详情')" class="projectName" v-for="i in row?.fileSaveRequestList">
            {{ i.originalName }}</span
          >
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" />
      </el-table>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, userList } from "@/api/projectInformation";
import { projectPlanMonthlyInfolast } from "@/api/xmbglishi";
import { ElMessage, ElMessageBox } from "element-plus";
import { regionList } from "@/api/projectTable";
import { projectInfoGetProjectStatistics } from "@/api/project/tenderReview";
import {
  onMounted,
  toRefs,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
  inject,
  computed,
} 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 postList = ref([]);

const stapesDate = ref({});
const personList = ref([]);

let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const provieceList = ref([]);
const provieceCity = ref([]);
const citList = ref([]);
//头部点击
function tabsNumClick(v) {
  tabsNum.value = v;
}
//区县
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 handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
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 userListM = async () => {
  let { data } = await userList();
  personList.value = data;
  FormList.value = typeList.value;
};
const getStateName = (r) => {
  let a = "";
  personList.value.map((i) => {
    if (i.userId == r) {
      a = i;
    }
  });
  return a.nickName;
};
const projectPlanMonthlyInfolastM = async (p) => {
  let { data } = await projectPlanMonthlyInfolast(p);
  postList.value = data;
};
function build_statusM(v) {
  const arr = build_status.value.filter((i) => {
    return v == i.value;
  });
  return arr[0]?.label;
}
const Time = computed(() => {
  return Date.now() - new Date(typeList.value.endTime?.substring(0, 10));
});
const projectInfoGetProjectStatisticsM = async (p) => {
  let { data } = await projectInfoGetProjectStatistics(p);
  stapesDate.value = data;
};
onMounted(() => {
  userListM();
  projectPlanMonthlyInfolastM({ projectNo: typeList.value.projectNo });
  projectInfoGetProjectStatisticsM(typeList.value.projectNo);
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
  .top {
    // 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%;

  .HTMoney1 {
    flex: 1;
    text-align: center;
    .JENum {
      height: 40px;
      font-size: 18px;
      font-weight: 400;
      color: #409eff;
    }

    .JEName {
      width: 100%;
      height: 40px;
      font-size: 16px;
      color: black;
    }
  }
  .HTMoney2 {
    background: red;
    .JEName {
      color: #fff;
    }
    .JENum {
      color: #fff;
    }
  }
}
.Top_cont {
  display: flex;
  width: 80vw;
  justify-content: center;
  align-itemas: center;
  margin-bottom: 35px;
}
</style>