<template>
  <div class="water-analysis-page">
    <div class="top">
      <div class="LeftBox1">
        <div style="" class="Top_cont">
          <div class="HTMoney1">
            <div class="JENum">
              {{ postList.length || 0 }}<span style="font-size: 14px"></span>
            </div>
            <div class="JEName">{{ contentTittle }}</div>
          </div>

          <div class="HTMoney1">
            <div class="JENum">{{ zhenggai.length }}</div>
            <div class="JEName">未整改(条)</div>
          </div>

          <div class="HTMoney1">
            <div class="JENum">{{ postList.length - zhenggai.length }}</div>
            <div class="JEName">已整改(条)</div>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="巡检记录" name="first">
          <el-table
            v-loading="loading"
            :data="postList"
            @selection-change="handleSelectionChange"
          >
            <el-table-column label="序号" type="index" width="50" />
            <el-table-column
              :label="i.label"
              align="center"
              :prop="i.props"
              show-overflow-tooltip
              v-for="i in quaitryContCloumOne"
            >
              <template #default="{ row }" v-if="i.props == 'patrolNo'">
                <span class="projectName"> {{ row.patrolNo }}</span>
              </template>
              <template #default="{ row }" v-if="i.props == 'status'">
                {{ row.status == 0 ? "是" : "否" }}
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="质量整改记录" name="second">
          <el-table :data="postList" stripe max-height="900">
            <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 quaitryContCloumTwo"
            >
              <template #default="{ row }" v-if="i.props == 'reformNo'">
                <span class="projectName"> {{ row.reformNo }}</span>
              </template>
              <template #default="{ row }" v-if="i.props == 'abarbeitungType'">
                <dict-tag
                  :options="abarbeitung_type"
                  :value="row.abarbeitungType"
                />
              </template>
              <template
                #default="{ row }"
                v-if="i.props == 'fileSaveRequestList'"
              >
                <el-image
                  style="width: 40px"
                  v-for="i in row.fileSaveRequestList"
                  :src="i.url"
                  :zoom-rate="1"
                  :initial-index="4"
                  :preview-src-list="[i.url]"
                />
              </template>

              <template
                #default="{ row }"
                v-if="i.props == 'afterRectificationFileList'"
              >
                <el-image
                  style="width: 40px"
                  v-for="i in row.afterRectificationFileList"
                  :src="i.url"
                  :zoom-rate="1"
                  :initial-index="4"
                  :preview-src-list="[i.url]"
                />
              </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 { projectPatrolProblemPage } from "@/api/project/tenderReview";
import { projectQualityReformDetailselectReformList } from "@/api/projectInformation";
import {
  onMounted,
  toRefs,
  defineEmits,
  reactive,
  defineProps,
  defineExpose,
  inject,
  computed,
} from "vue";
import { quaitryContCloumOne, quaitryContCloumTwo } from "@/utils/cloums";
const { proxy } = getCurrentInstance();
const {
  abarbeitung_type,
  project_status,
  project_operation_pattern,
  build_status,
  drainage_partition,
  quality_rectification_status,
} = proxy.useDict(
  "abarbeitung_type",
  "project_status",
  "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 stapesDate = ref([]);
const project_TypeId = ref([]);
const contentTittle = ref("巡检记录(条)");
const personList = ref([]);
const activeName = ref("first");
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;
  }
};

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 getStateName = (r) => {
  let a = "";
  personList.value.map((i) => {
    if (i.userId == r) {
      a = i;
    }
  });
  return a.nickName;
};

let zhenggai = ref([]);
const projectPatrolPageM = async (p) => {
  zhenggai.value=[]
  let { data } = await projectPatrolProblemPage(p);
  postList.value = data;
  data.forEach((i) => {
    if (i.status == 1) {
      zhenggai.value.push(i);
    }
  });
};
function handleClick({ props: { name } }) {
  console.log("vvv", name);
  if (name == "second") {
    contentTittle.value = "质量整改记录(条)";
    projectQualityReformDetailselectReformList({
      projectNo: typeList.value.projectNo,
    }).then(({ data }) => {
      zhenggai.value=[]
      postList.value = data;
      data.forEach((i) => {
      if (i.status == 1) {
      zhenggai.value.push(i);
     }
  });
    });
  } else {
    contentTittle.value = "巡检记录(条)";
    projectPatrolPageM({ projectNo: typeList.value.projectNo });
  }
}
onMounted(() => {
  userListM();
  projectPatrolPageM({
    projectNo: typeList.value.projectNo,
    pageSize: 99999,
    pageNum: 1,
  });
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
.tabs {
  ::v-deep .el-input__wrapper {
    box-shadow: 0 0 0 0;
  }
}
.LeftBox1 {
  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>