<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">
          <el-upload
            v-if="postList?.generalSituationFileList?.length == 0"
            :auto-upload="false"
            list-type="picture-card"
            v-model:file-list="postList.generalSituationFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-change="handleExceed"
            :on-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
          </el-upload>
          <el-image
            v-else
            style="width: 100px;margin: 0 10px;"
            v-for="i in postList.generalSituationFileList"
            :src="i.url"
            :zoom-rate="1"
            :initial-index="4"
            :preview-src-list="[i.url]"
          />
        </el-tab-pane>
        <el-tab-pane label="建设前" name="second">
          <el-upload
            v-if="postList?.preConstructionFileList?.length == 0"
            :auto-upload="false"
            list-type="picture-card"
            v-model:file-list="postList.preConstructionFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-change="handleExceed1"
            :on-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
          <el-image
            v-else
            style="width: 100px;margin: 0 10px;"
            v-for="i in postList.preConstructionFileList"
            :src="i.url"
            :zoom-rate="1"
            :initial-index="4"
            :preview-src-list="[i.url]"
          />
        </el-tab-pane>
        <el-tab-pane label="建设中" name="three">
          <el-upload
            v-if="postList?.underConstructionFileList?.length == 0"
            :auto-upload="false"
            list-type="picture-card"
            v-model:file-list="postList.underConstructionFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-change="handleExceed2"
            :on-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
          <el-image
            v-else
            style="width: 100px;margin: 0 10px;"
            v-for="i in postList.underConstructionFileList"
            :src="i.url"
            :zoom-rate="1"
            :initial-index="4"
            :preview-src-list="[i.url]"
          />
        </el-tab-pane>
        <el-tab-pane label="建设后" name="four">
          <el-upload
            v-if="postList?.postConstructionFileList?.length == 0"
            :auto-upload="false"
            v-model:file-list="postList.postConstructionFileList"
            class="upload-demo"
            :headers="uploadHeader"
            multiple
            list-type="picture-card"
            :on-change="handleExceed3"
            :on-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
          <el-image
            v-else
            style="width: 100px;margin: 0 10px;"
            v-for="i in postList.postConstructionFileList"
            :src="i.url"
            :zoom-rate="1"
            :initial-index="4"
            :preview-src-list="[i.url]"
          />
        </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/imgwh";
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,
  quality_rectification_status,
} = proxy.useDict(
  "build_category",
  "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 unit_list = ref([]);
const personList = ref([]);
const activeName = ref("first");
let FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
//头部点击
function tabsNumClick(v) {
  tabsNum.value = v;
}
const getInfoM = async (p) => {
  getInfo(p).then(({ data }) => {
    const arra = data.filter((i) => {
      return i.id == typeList.value.id;
    });
    postList.value = arra[0];
  });
};

onMounted(() => {
  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>