<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="/system/upload"
            :headers="uploadHeader"
            multiple
            :before-upload="handleBeforeUpload"
          >
            <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="/system/upload"
            :headers="uploadHeader"
            multiple
            :before-upload="handleBeforeUpload"
          >
            <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="/system/upload"
            :headers="uploadHeader"
            multiple
            :before-upload="handleBeforeUpload"
          >
            <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"
            :before-upload="handleBeforeUpload"
          >
            <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 { getInfo } from '@/api/project/imgwh';

const emits = defineEmits();
const typeList = inject('typeList1');
const postList = ref([]);
const activeName = ref('first');

const getInfoM = async p => {
  getInfo(p).then(({ data }) => {
    const arra = data.filter(i => {
      return i.id == typeList.value.id;
    });
    postList.value = arra[0];
  });
};

function handleBeforeUpload(file) {
  if (file.name.length > 50) {
    proxy.$modal.msgError(`文件名称过长(50个字符以内)，请先修改再上传!`);
    return false;
  }
  return true;
}

onMounted(() => {
  getInfoM({ projectNo: typeList.value.projectNo, pageSize: 999999, pageNum: 1 });
});
</script>
<style lang="scss" scoped>
.water-analysis-page {
  padding: 20px;
}
.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-items: center;
  margin-bottom: 35px;
}
</style>