<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="序号" />
            <el-table-column :label="i.label" :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" max-height="500">
            <el-table-column type="index" width="55" label="序号" />
            <el-table-column :label="i.label" :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" max-height="500">
            <el-table-column type="index" width="55" label="序号" />
            <el-table-column :label="i.label" :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" max-height="500">
            <el-table-column type="index" width="55" label="序号" />
            <el-table-column :label="i.label" :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/project/projectInformation';
import { getInfo } from '@/api/project/engineeringApproval';
import { getInfo as getInfoTwo } from '@/api/project/environmentalIdentificationAndEvaluation';
import { getInfo as getInfoThree } from '@/api/project/environmentalMonitoring';
import { getInfo as getInfoFour } from '@/api/project/hazardRectificationAndReview';
import { ElMessage, ElMessageBox } from 'element-plus';
import { safcityContCloumOne, safcityContCloumTwo, safcityContCloumThree, safcityContCloumFour } from '@/utils/cloums';
const { proxy } = getCurrentInstance();
const { notification_type, hidden_trouble_level } = proxy.useDict('notification_type', 'hidden_trouble_level');
const emits = defineEmits();
const typeList = inject('typeList1');
const postList = ref([]);
const isLoading = ref(false);
const personList = ref([]);
const activeName = ref('first');

let FormList = ref({
  pageSize: 10,
  pageNum: 1,
});
let queryList = ref({
  pageNum: 1,
  pageSize: 999999,
});

const submit = () => {
  proxy.$refs.ruleForm.validate(valid => {
    if (valid) {
      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 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 {
  :deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}
.tabs {
  :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>