<template>
  <div class="water-analysis-page">
    <div class="top">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="危大功能审批" name="first"  v-loading="isLoading">
          <el-table
            v-loading="loading"
            :data="postList"
            @selection-change="handleSelectionChange"
          >
          <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in safcityContCloumOne"
      >
        <template #default="{ row }" v-if="i.props == 'id'">
          <span  class="projectName" > {{ row.id }}</span>
        </template>
        <template #default="{ row }" v-if="i.props == 'compilationTime'">
          {{row.compilationTime?.substring(0, 10)  }}
        </template>
        <template #default="{ row }" v-if="i.props == 'area'">
          {{row.area||0  }}(平方米)
        </template>
        <template #default="{ row }" v-if="i.props == 'fileSaveRequestList'">
           <span @click="handlePreview(k)" class="projectName" v-for="k in row.fileSaveRequestList">{{ k.originalName }}</span>
        </template>
      </el-table-column>
      </el-table>
        </el-tab-pane>
        <el-tab-pane label="患者整改及复查" name="second"  v-loading="isLoading">
          <el-table
      :data="postList"
      stripe
      max-height="500"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in safcityContCloumTwo"
      >
      <template #default="{ row }" v-if="i.propsy == 'reformRecordCode'">
         <span class="projectName" > {{ row.reformRecordCode }}</span>
        </template>
        <template #default="{ row }" v-if="i.props == 'checkTime'">
          {{row.checkTime?.substring(0, 10)  }}
        </template>
        <template #default="{ row }" v-if="i.props == 'hiddenTroubleLevel'">
          <dict-tag
            :options="hidden_trouble_level"
            :value="row.hiddenTroubleLevel"
          />
        </template>
        <template #default="{ row }" v-if="i.props == 'notificationType'">
          <dict-tag  :options="notification_type" :value="row.notificationType" />
        </template>
        <template #default="{ row }" v-if="i.props == 'abarbeitungDeadline'">
          {{row.abarbeitungDeadline?.substring(0, 10)  }}
        </template>
        <template #default="{ row }" v-if="i.props == 'actualFinishDate'">
          {{row.actualFinishDate?.substring(0, 10)  }}
        </template>
        <template #default="{ row }" v-if="i.props == 'abarbeitungType'">
          {{row.actualFinishDate?.substring(0, 10)  }}
        </template>
      </el-table-column>
    </el-table>
        </el-tab-pane>
        <el-tab-pane label="环境辨识" name="three"  v-loading="isLoading">
          <el-table
      :data="postList"
      stripe
      max-height="500"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in safcityContCloumThree"
      >
      <template #default="{ row }" v-if="i.props == 'identificationDate'">
        {{row.identificationDate?.substring(0, 10)  }}
        </template>
        </el-table-column>
    </el-table>
        </el-tab-pane>
        <el-tab-pane label="环境监测" name="four"  v-loading="isLoading">
          <el-table
      :data="postList"
      stripe
      max-height="500"
    >
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column
        :label="i.label"
        align="center"
        :prop="i.props"
        show-overflow-tooltip
        v-for="i in safcityContCloumFour"
      >
      <template #default="{ row }" v-if="i.props == 'measurTime'">
        {{row.measurTime?.substring(0, 10)  }}
        </template>
        </el-table-column>
    </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script setup>
import { projectInfoAdd, userList } from "@/api/projectInformation";
import { projectPlanMonthlyInfolast } from "@/api/xmbglishi";
import { regionList } from "@/api/projectTable";
import { projectPatrolPage } from "@/api/project/tenderReview";
import { getInfo } from "@/api/engineeringApproval";
import { getInfo as getInfoTwo  } from "@/api/environmentalIdentificationAndEvaluation";
import { getInfo as getInfoThree  } from "@/api/environmentalMonitoring";
import { getInfo as getInfoFour } from "@/api/hazardRectificationAndReview";
import { ElMessage, ElMessageBox } from "element-plus";
import {safcityContCloumOne,safcityContCloumTwo,safcityContCloumThree,safcityContCloumFour} from "@/utils/cloums"
import {
  onMounted,
  defineEmits,
  defineExpose,
  inject,
  computed,
} from "vue";
const { proxy } = getCurrentInstance();
const {
  notification_type,
  hidden_trouble_level,
  project_operation_pattern,
  build_status,
  drainage_partition,
  quality_rectification_status
} = proxy.useDict(
  "notification_type",
  "hidden_trouble_level",
  "project_operation_pattern",
  "build_status",
  "drainage_partition",
  'quality_rectification_status'
);
const emits = defineEmits();
const typeList = inject("typeList1");
let areCode = ref(0);
const postList = ref([]);
const isLoading=ref(false)
const stapesDate = ref([]);
const project_TypeId = ref([]);
const unit_list = ref([]);
const personList = ref([]);
const activeName = ref("first");

let FormList = ref({
  pageSize: 10,
  pageNum:1 
});
let queryList=ref({
  pageNum: 1,
  pageSize: 999999,
});
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;
  }
};
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(postList.value.actualFinishEndTime)
  return Date.now() - new Date("2024-12-03");
});
let zhenggai=ref([])
const projectPatrolPageM = async (p) => {
  let { data } = await projectPatrolPage(p);
  postList.value = data;
  data.forEach(i=>{ 
    if(i.status==1 ||i.status=='end'){ 
      zhenggai.push(i)
    }
  })
};
const getInfoM=async(p)=> { 
  getInfo(p).then(({data})=>{ 
       postList.value = data;
       isLoading.value=false

    })
}
const getInfoTwoM=async(p)=> { 
  getInfoTwo(p).then(({data})=>{ 
       postList.value = data;
       isLoading.value=false
    })
}
const getInfoThreeM=async(p)=> { 
  isLoading.value=false
  getInfoThree(p).then(({data})=>{ 
       postList.value = data;
    })

}
const getInfoFourM=async(p)=> { 
  getInfoFour(p).then(({data})=>{ 
       postList.value = data;
      isLoading.value=false
    })
}
function handleClick({props:{name}}){ 
  console.log("vvv", name)
  isLoading.value=true
  switch (name) {
    case 'first':
    getInfoM({ projectNo: typeList.value.projectNo,...queryList.value });
      break;
      case 'second':
      getInfoTwoM({ projectNo: typeList.value.projectNo ,...queryList.value});
      break;
      case 'three':
      getInfoThreeM({ projectNo: typeList.value.projectNo ,...queryList.value});
      break;
      case 'four':
      getInfoFourM({ projectNo: typeList.value.projectNo ,...queryList.value});
      break;
   
  }
}
function handlePreview(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}
onMounted(() => {
  userListM();
  // projectPlanMonthlyInfolastM({ projectNo: typeList.value.projectNo });

  getInfoM({ projectNo: typeList.value.projectNo,pageSize:999999,pageNum:1 });
});
</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>