<template>
  <div class="water-analysis-page1">
    <el-table
      :key="isFlag"
      :data="tableData"
      v-loading="tableLoading"
      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 imgwhCloum"
      >
        <template #default="{ row }" v-if="i.props == 'projectName'">
          <span @click="onCheck(row, 1, '详情')" class="projectName">
            {{ row.projectName }}</span
          >
        </template>
        <template #default="{ row }" v-if="i.props == 'projectStatus'">
          <dict-tag :options="project_status" :value="row.projectStatus" />
        </template>
        <template
          #default="{ row }"
          v-if="i.props == 'preConstructionFileList'"
        >
          <el-image
            preview-teleported
            v-for="i in row.preConstructionFileList"
            style="width: 30px; height: 30px"
            :src="[i.url]"
            :zoom-rate="1"
            :initial-index="14"
            :preview-src-list="[i.url]"
          />
        </template>
        <template
          #default="{ row }"
          v-if="i.props == 'underConstructionFileList'"
        >
          <el-image
            preview-teleported
            v-for="i in row.underConstructionFileList"
            style="width: 30px; height: 30px"
            :src="[i.url]"
            :zoom-rate="1"
            :initial-index="14"
            :preview-src-list="[i.url]"
          />
        </template>
        <template
          #default="{ row }"
          v-if="i.props == 'postConstructionFileList'"
        >
          <el-image
            preview-teleported
            v-for="i in row.postConstructionFileList"
            style="width: 30px; height: 30px"
            :src="[i.url]"
            :zoom-rate="1"
            :initial-index="14"
            :preview-src-list="[i.url]"
          />
        </template>
        <template
          #default="{ row }"
          v-if="i.props == 'generalSituationFileList'"
        >
          <el-image
            preview-teleported
            v-for="i in row.generalSituationFileList"
            style="width: 30px; height: 30px"
            :src="[i.url]"
            :zoom-rate="1"
            :initial-index="14"
            :preview-src-list="[i.url]"
          />
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template #default="{ row }">
          <el-button link type="primary" @click="onCheck(row)"
            >上传图片</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="FormList.totals"
      v-model:page="FormList.pageNum"
      v-model:limit="FormList.pageSize"
      @pagination="getInfoList(FormList)"
    />
    <el-dialog
      v-model="visible"
      title="项目图片维护上传"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form label-width="auto" ref="ruleForm" :model="tableDataList">
        <el-form-item
          label="项目概况:"
          :rules="[{ required: true, message: '项目概况', trigger: 'change' }]"
          prop="generalSituationFileList"
        >
          <el-upload
            list-type="picture"
            v-model:file-list="tableDataList.generalSituationFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handleExceed"
            :before-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <!-- <template #tip>
                        </template> -->
          </el-upload>
        </el-form-item>
        <el-form-item
          label="建设前:"
          :rules="[{ required: true, message: '建设前', trigger: 'change' }]"
          prop="preConstructionFileList"
        >
          <el-upload
            list-type="picture"
            v-model:file-list="tableDataList.preConstructionFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handleExceed"
            :before-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
        </el-form-item>

        <el-form-item
          label="建设中:"
          :rules="[{ required: true, message: '建设中', trigger: 'change' }]"
          prop="underConstructionFileList"
        >
          <el-upload
            list-type="picture"
            v-model:file-list="tableDataList.underConstructionFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handleExceed"
            :before-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
        </el-form-item>
        <el-form-item
          label="建设后:"
          :rules="[{ required: true, message: '建设后', trigger: 'change' }]"
          prop="postConstructionFileList"
        >
          <el-upload
            list-type="picture"
            v-model:file-list="tableDataList.postConstructionFileList"
            class="upload-demo"
            action="/prod-api/system/upload"
            :headers="uploadHeader"
            multiple
            :on-preview="handleExceed"
            :before-remove="beforeRemove"
          >
            <template #trigger>
              <el-icon class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </template>
            <template #tip> </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="open2" type="primary">保 存</el-button>
          <el-button @click="closed">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      :title="title + '图片'"
      v-model="imgDlgo"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-image style="width: 99%; height: 98%" :src="imgDlgoSrc"> </el-image>
    </el-dialog>
  </div>
</template>
<script setup>
import { defineExpose } from "vue";
import { getInfo, saveProjectImageInfo } from "@/api/imgwh";
import { getToken } from "@/utils/auth";
import { ElMessage, ElMessageBox } from "element-plus";
import { imgwhCloum } from "@/utils/cloums";
const uploadHeader = ref({
  Authorization: "Bearer " + getToken(),
});
import { formatMonths } from "@/utils/projectTable";
const { proxy } = getCurrentInstance();
const { project_status } = proxy.useDict("project_status");
const ruleForm = ref(null);
import { reactive } from "vue";
const visible = ref(false);
const isFlag = ref(1);
const imgDlgo = ref(false);
const imgDlgoSrc = ref();
const title = ref("");
const FormList = ref({
  pageNum: 1,
  pageSize: 10,
});
const imgList = ref([]);
const tableDataList = ref({ refType: "projectInfoNew" });
//动态组件
const dataForm = reactive({
  date: formatMonths(new Date()),
  tableData: "",
  tableDateTwo: "",
  tableLoading: true,
});
const { tableData, tableLoading } = toRefs(dataForm);
//获取列表数据
const getInfoList = async (prams) => {
  let { data, total } = await getInfo(prams);
  tableData.value = data;
  FormList.value.totals = total;
  setTimeout(() => {
    tableLoading.value = false;
  }, 1000);
};
//搜索
const search = (p) => {
  tableLoading.value = true;
  getInfoList(p);
  isFlag.value++;
};
defineExpose({ search });
function closed() {
  visible.value = false;
  getInfoList();
}
// 查看上报数据
const onCheck = (row) => {
  imgList.value = row;
  tableDataList.value = row;
  visible.value = true;
  // sysFileSaveRequestList.value = [];
};
function open2() {
  let sysFileSaveRequestList = [];
  tableDataList.value.generalSituationFileList.forEach((element) => {
    if (element.hasOwnProperty("response")) {
      element.response.data.refType = "projectInfoNew";
      element.response.data.refField = "profile";
      sysFileSaveRequestList.push(element.response.data);
    } else {
      element.refType = "projectInfoNew"
      element.refField = "profile"
      sysFileSaveRequestList.push(element);
    }
  });
  tableDataList.value.preConstructionFileList.forEach((element) => {
    if (element.hasOwnProperty("response")) {
      element.response.data.refType = "projectInfoNew";
      element.response.data.refField = "building";
      sysFileSaveRequestList.push(element.response.data);
    } else {
      element.refType = "projectInfoNew"
      element.refField = "building"
      sysFileSaveRequestList.push(element);
    }
  });
  tableDataList.value.underConstructionFileList.forEach((element) => {
    if (element.hasOwnProperty("response")) {
      element.response.data.refType = "projectInfoNew";
      element.response.data.refField = "constraction";
      sysFileSaveRequestList.push(element.response.data);
    } else {
      element.refType = "projectInfoNew"
      element.refField = "constraction"
      sysFileSaveRequestList.push(element);
    }
  });
  tableDataList.value.postConstructionFileList.forEach((element) => {
    if (element.hasOwnProperty("response")) {
      element.response.data.refType = "projectInfoNew";
      element.response.data.refField = "postConstraction";
      sysFileSaveRequestList.push(element.response.data);
    } else {
      element.refType = "projectInfoNew"
      element.refField = "postConstraction"
      sysFileSaveRequestList.push(element);
    }
  });
  setTimeout(() => {
    let params = {
      id: tableDataList.value.id,
      sysFileSaveRequestList,
    };
    console.log('params', params)
    saveProjectImageInfo(params).then(({ code }) => {
      if (code == 200) {
        visible.value = false;
        getInfoList();
      }
    });
  }, 100);
}
function beforeRemove(file) {
  return true;
}
//图片上传
function handleExceed(file) {
  return ElMessageBox.confirm(`下载此文件: ${file.name}？`).then(
    () => window.open(file.url),
    () => false
  );
}

function imgClick(v, t) {
  title.value = t;
  imgDlgo.value = true;
  imgDlgoSrc.value = v;
}
onMounted(() => {
  getInfoList();
});
</script>
<style lang="scss" scoped>
.water-analysis-page1 {
  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(22, 132, 252);
    border-left: 1px solid rgb(22, 132, 252);
  }
  :deep(.el-dialog__body) {
    background-color: #eef1fb;
    height: 750px;
    overflow: auto;
  }
  :deep(.el-upload-list) {
    width: 100%;
    display: flex;
  }
  :deep(.el-upload-list__item) {
    width: 102px;
    margin: 0 10px;
  }
  :deep(.el-upload-list__item-file-name) {
    color: #fff;
  }
  :deep(.el-upload-list__item .el-icon--close-tip) {
    color: #fff;
  }
}
</style>