<template>
  <div class="cooperatorDatails">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="#5181F6"
    >
      <el-menu-item index="1">{{
        $t("message.laborMange.essential")
      }}</el-menu-item>
      <el-menu-item index="4">承包项目信息</el-menu-item>
      <el-menu-item index="2">{{
        $t("message.cooperationUnit.qualification")
      }}</el-menu-item>
      <el-menu-item index="3">{{
        $t("message.cooperationUnit.badRecord")
      }}</el-menu-item>
    </el-menu>
    <div v-if="activeIndex == '1'" class="content_wrap">
      <vue-scroll style="height: 650px">
        <el-table
          :data="enterpriseInfo"
          :show-header="false"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column prop="fieldName" min-width="15%"> </el-table-column>
          <el-table-column prop="value" min-width="35%">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.value instanceof Array && scope.row.value.length > 0
                "
                class="showImg_wrap"
              >
                <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                <img
                  v-for="item in scope.row.value"
                  :src="item.url"
                  class="showImg"
                  @click="showImgBtn(item.url)"
                />
              </div>
              <div
                v-else-if="
                  scope.row.value &&
                  typeof scope.row.value == 'string' &&
                  scope.row.value.indexOf('http://') >= 0
                "
                class="showImg_wrap"
              >
                <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                <img
                  :src="scope.row.value"
                  class="showImg"
                  @click="showImgBtn(scope.row.value)"
                />
              </div>

              <div v-else>
                {{ scope.row.value }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fieldName2" min-width="15%"> </el-table-column>
          <el-table-column prop="value2" min-width="35%">
            <template slot-scope="scope">
              <div
                v-if="
                  scope.row.value2 instanceof Array &&
                  scope.row.value2.length > 0
                "
                class="showImg_wrap"
              >
                <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                <img
                  v-for="item in scope.row.value2"
                  :src="item.url"
                  class="showImg"
                  @click="showImgBtn(item.url)"
                />
              </div>
              <div
                v-else-if="
                  scope.row.value2 &&
                  typeof scope.row.value2 == 'string' &&
                  scope.row.value2.indexOf('http://') >= 0
                "
                class="showImg_wrap"
              >
                <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                <img
                  :src="scope.row.value2"
                  class="showImg"
                  @click="showImgBtn(scope.row.value2)"
                />
              </div>

              <div v-else>
                {{ scope.row.value2 }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <div v-if="activeIndex == '4'" class="content_wrap">
      <el-button
        class="addQualificationBtn"
        type="primary"
        size="medium"
        @click="openInfoDialog"
        v-permission="{
          key: 'hzdw_add_qualifications_estimated',
          menuPath: '/project/summary/cooperationUnit',
        }"
        >项目信息填报</el-button
      >
      <vue-scroll style="height: 590px">
        <div
          :style="index > 0 ? 'margin-top: 20px' : ''"
          v-for="(item, index) in enterpriseInfo2"
          :key="index"
        >
          <el-table
            :data="item"
            :show-header="false"
            border
            stripe
            style="width: 100%"
          >
            <el-table-column prop="fieldName" min-width="15%">
            </el-table-column>
            <el-table-column prop="value" min-width="35%">
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.value instanceof Array &&
                    scope.row.value.length > 0
                  "
                  class="showImg_wrap"
                >
                  <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                  <img
                    v-for="item in scope.row.value"
                    :src="item.url"
                    class="showImg"
                    @click="showImgBtn(item.url)"
                  />
                </div>
                <div
                  v-else-if="
                    scope.row.value &&
                    typeof scope.row.value == 'string' &&
                    scope.row.value.indexOf('http://') >= 0
                  "
                  class="showImg_wrap"
                >
                  <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                  <img
                    :src="scope.row.value"
                    class="showImg"
                    @click="showImgBtn(scope.row.value)"
                  />
                </div>

                <div v-else>
                  {{ scope.row.value }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="fieldName2" min-width="15%">
            </el-table-column>
            <el-table-column prop="value2" min-width="35%">
              <template slot-scope="scope">
                <div
                  v-if="
                    scope.row.value2 instanceof Array &&
                    scope.row.value2.length > 0
                  "
                  class="showImg_wrap"
                >
                  <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                  <img
                    v-for="item in scope.row.value2"
                    :src="item.url"
                    class="showImg"
                    @click="showImgBtn(item.url)"
                  />
                </div>
                <div
                  v-else-if="
                    scope.row.value2 &&
                    typeof scope.row.value2 == 'string' &&
                    scope.row.value2.indexOf('http://') >= 0
                  "
                  class="showImg_wrap"
                >
                  <!-- <img
                  v-for="(item, index) in getUrl(scope.row.value2, 1)"
                  :key="index"
                  :src="item"
                  class="showImg"
                  @click="showImgBtn(item)"
                /> -->
                  <img
                    :src="scope.row.value2"
                    class="showImg"
                    @click="showImgBtn(scope.row.value2)"
                  />
                </div>

                <div v-else>
                  {{ scope.row.value2 }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </vue-scroll>
    </div>
    <div v-show="activeIndex == '2'" class="content_wrap">
      <el-button
        class="addQualificationBtn"
        type="primary"
        size="medium"
        @click="addBtn(1)"
        v-permission="{
          key: 'hzdw_add_qualifications',
          menuPath: '/project/summary/cooperationUnit',
        }"
        >新增</el-button
      >
      <vue-scroll style="height: 600px">
        <el-table
          :data="qualificationList"
          stripe
          style="width: 100%"
          border
          :header-cell-style="{ background: '#F7F8FA' }"
        >
          <el-table-column
            type="index"
            :label="$t('message.cooperationUnit.index')"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="qualificationTypeName" label="资质类型">
          </el-table-column>
          <el-table-column
            prop="fileName"
            :label="$t('message.cooperationUnit.aptitudeFileName')"
          >
          </el-table-column>
          <el-table-column
            prop="fileNumber"
            :label="$t('message.cooperationUnit.aptitudeFileNumber')"
          >
          </el-table-column>
          <el-table-column
            prop="fileUrl"
            :label="$t('message.cooperationUnit.aptitudeFile')"
          >
            <template slot-scope="scope">
              <!-- <img
                v-for="(url,index) in getUrl(scope.row.fileUrl, 2)"
                :key="index"
                :src="url[index]"
                class="showImg"
                @click="
                      bigImageDialog = true;
                      bigImageUrl = url[index];
                    "
              /> -->

              <!-- <div
              v-for="item in scope.row.fileUrl && JSON.parse(scope.row.fileUrl)"
              :key="index"
            >
              
            </div> -->

              <!-- :download=" scope.row.fileNameNew ?
                  scope.row.fileNameNew.substring(
                    0,
                    scope.row.fileNameNew.indexOf('.')
                  ) : scope.row.fileNameNew ?
                  scope.row.originFileName: scope.row.fileUrl.substring(
                    0,
                    scope.row.fileUrl.indexOf('.')
                  )
                " -->
              <!-- v-if="!scope.row.flag" -->
              <a
                :href="scope.row.fileUrl"
                target="self"
                class="qualificationHref"
                >{{
                  scope.row.fileNameNew
                    ? scope.row.fileNameNew
                    : scope.row.originFileName
                    ? scope.row.originFileName
                    : scope.row.fileUrl.substring(
                        scope.row.fileUrl.lastIndexOf("\/") + 1,
                        scope.row.fileUrl.length
                      )
                }}</a
              >
              <!-- <img
                v-else
                :src="scope.row.fileUrl"
                class="showImg"
                @click="showImgBtn(scope.row.fileUrl)"
              /> -->
              <!-- <img
              v-else
                :src="scope.row.fileUrl"
                class="showImg"
                @click="
                      bigImageDialog = true;
                      bigImageUrl = scope.row.fileUrl;
                    "
              /> -->

              <!-- <a
              :href="url[index]"
              download
              v-for="(url,index) in getUrl(scope.row.fileUrl, 2)"
              :key="index"
              target="self"
              class="qualificationHref"
            > -->
              <!-- <img 
                v-if="scope.row.fileUrl && matchResult"
                :key="index"
                :src="url[index]"
                class="showImg"
              /> -->
              <!-- {{ matchResult ? "" : url[index]}}
            </a> -->
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            :label="$t('message.cooperationUnit.remark')"
          >
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <div class="qualificationDialog">
      <el-dialog
        title="新增"
        :visible.sync="qualificationDialog"
        :modal-append-to-body="false"
        width="30%"
      >
        <el-form
          :model="qualificationForm"
          :rules="qualificationFormRules"
          ref="qualificationForm"
          label-width="120px"
          size="medium"
          class="dialogFormBox"
        >
          <el-form-item label="资质文件名称" prop="fileName">
            <el-input
              v-model="qualificationForm.fileName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="资质文件编号" prop="fileNumber">
            <el-input
              v-model="qualificationForm.fileNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="资质类型" prop="qualificationType">
            <el-select
              v-model="qualificationForm.qualificationType"
              placeholder="请选择资质类型"
              filterable
              clearable
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in qualificationTypeList"
                :label="item.name"
                :value="Number(item.data)"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上传资质文件" prop="fileUrl">
            <!-- accept="image/jpg,image/jpeg,image/png" -->
            <el-upload
              class="upload-demo"
              :action="$store.state.UPLOADURL"
              :on-preview="showImgBtn"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="handleBeforeUpload"
              name="files"
              multiple
              ref="upload"
              :limit="1"
              :file-list="fileList"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="qualificationForm.remarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="qualificationDialog = false">取 消</el-button>
          <el-button type="primary" @click="addQualification">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-show="activeIndex == '3'" class="content_wrap">
      <el-button
        v-permission="{
          key: 'hzdw_add_bad',
          menuPath: '/project/summary/cooperationUnit',
        }"
        class="addBadRecordBtn"
        type="primary"
        size="medium"
        @click="addBtn(2)"
        >新增</el-button
      >
      <vue-scroll style="height: 600px">
        <el-table
          :data="badRecordList"
          stripe
          style="width: 100%"
          border
          :header-cell-style="{ background: '#F7F8FA' }"
          ref="badRecordList"
        >
          <el-table-column
            type="index"
            :label="$t('message.cooperationUnit.index')"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="ariseTime"
            :label="$t('message.cooperationUnit.occurrenceTime')"
          >
          </el-table-column>
          <el-table-column
            prop="ariseMatter"
            :label="$t('message.cooperationUnit.mattersHappened')"
          >
          </el-table-column>
          <el-table-column
            prop="ariseReason"
            :label="$t('message.cooperationUnit.occurrenceReason')"
          >
            <template slot-scope="scope">
              {{ scope.row.ariseReason }}
            </template>
          </el-table-column>
          <el-table-column
            prop="remarks"
            :label="$t('message.cooperationUnit.remark')"
          >
          </el-table-column>
        </el-table>
      </vue-scroll>
    </div>
    <div class="badRecordDialog">
      <el-dialog
        title="新增"
        :visible.sync="badRecordDialog"
        :modal-append-to-body="false"
        width="30%"
      >
        <el-form
          :model="badRecordForm"
          :rules="badRecordFormRules"
          ref="badRecordForm"
          label-width="100px"
          size="medium"
          class="dialogFormBox"
        >
          <el-form-item label="发生事项" prop="ariseMatter">
            <el-input
              v-model="badRecordForm.ariseMatter"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="发生原因" prop="ariseReason">
            <el-input
              v-model="badRecordForm.ariseReason"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="发生时间" prop="ariseTime">
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="badRecordForm.ariseTime"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item label="备注" prop="remarks">
            <el-input
              v-model="badRecordForm.remarks"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="badRecordDialog = false">取 消</el-button>
          <el-button type="primary" @click="addBadRecord">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 查看大图 -->
    <div
      v-if="bigImageDialog"
      class="bigImageDialog"
      @click="bigImageDialog = false"
    >
      <div class="bigImageContent">
        <img width="auto" height="auto" :src="bigImageUrl" alt />
      </div>
    </div>
    <!-- 基本信息弹框 -->
    <el-dialog
      class="projectDialog"
      title="项目信息填报"
      :visible.sync="addInfoDialog"
      width="1100px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <vue-scroll style="height: 640px">
          <el-form
            v-for="(item, index) in addInfoForm"
            :key="item.id"
            :model="item"
            :ref="`form${index}`"
            :rules="addInfoFormRules"
            label-width="150px"
            class="dialogFormBox big"
            :inline="true"
          >
            <i
              @click="onClose(item)"
              v-if="index > 0"
              color="#FF0404"
              class="el-icon-close icon_close"
            ></i>
            <el-form-item label="承包项目名称" prop="cbsName">
              <el-input
                v-model="item.cbsName"
                placeholder="请输入承包项目名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目施工区域" prop="projectBuildArea">
              <el-input
                v-model="item.projectBuildArea"
                placeholder="请输入项目施工区域"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目经理" prop="projectManage">
              <el-input
                v-model="item.projectManage"
                placeholder="请输入项目经理"
              ></el-input>
            </el-form-item>
            <el-form-item label="项目类型" prop="cbsProjectType">
              <el-select
                v-model="item.cbsProjectType"
                placeholder="请选择项目类型"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in dictionaryItemList"
                  :label="item.name"
                  :value="Number(item.data)"
                  :key="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目编号" prop="projectNumber">
              <el-input
                v-model="item.projectNumber"
                placeholder="请输入项目编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="施工阶段" prop="constructionStage">
              <el-select
                v-model="item.constructionStage"
                placeholder="请选择施工阶段"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in constructionStageList"
                  :label="item.name"
                  :value="Number(item.data)"
                  :key="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维度位置" prop="latitude">
              <el-input
                v-model="item.latitude"
                placeholder=""
                :disabled="true"
              ></el-input>
            </el-form-item>
            <el-form-item label="经度位置" prop="longitude">
              <el-input
                placeholder=""
                v-model="item.longitude"
                :disabled="true"
              >
                <template #append>
                  <el-link type="primary" @click="toGetLocalFn(item)"
                    >坐标拾取</el-link
                  >
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="工程类别" prop="projectType">
              <el-select
                v-model="item.projectType"
                placeholder="请选择工程类别"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in projectTypeList"
                  :label="item.name"
                  :value="Number(item.data)"
                  :key="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="结构类型" prop="structureType">
              <el-select
                v-model="item.structureType"
                placeholder="请选择结构类型"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in structureTypeList"
                  :label="item.name"
                  :value="Number(item.data)"
                  :key="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目面积(m²)" prop="enterpriseEmail">
              <el-input
                type="number"
                v-model="item.projectAcreage"
                placeholder="请输入项目面积(m²)"
              ></el-input>
            </el-form-item>
            <el-form-item label="工程状态" prop="bulidStatus">
              <el-select
                v-model="item.bulidStatus"
                placeholder="请选择项目类型"
                filterable
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in $t('message.companyDiagram.BUILDSTATUS')"
                  :label="item.name"
                  :value="item.id"
                  :key="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="开工日期" prop="enterpriseEmail">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="item.startWorkDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="竣工日期" prop="completionDate">
              <el-date-picker
                value-format="yyyy-MM-dd"
                v-model="item.completionDate"
                type="date"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="联系电话" prop="projectTel">
              <el-input
                type="number"
                oninput="if(value.length>11)value=value.slice(0,11)"
                v-model="item.projectTel"
                placeholder="请输入联系电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="现场施工图" prop="constructionMapUrl">
              <el-upload
                class="upload-demo"
                :limit="1"
                accept=".png, .jpg, .jpeg"
                :action="$store.state.UPLOADURL"
                :on-remove="
                  (file, flexList) => handleRemove1(file, flexList, 4, item)
                "
                :on-exceed="onExceed"
                :on-success="(file) => handleSuccess1(file, 4, item)"
                name="files"
                :file-list="item.constructionMapUrlList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <!-- <div slot="tip" class="el-upload__tip">只能上传一张</div> -->
              </el-upload>
            </el-form-item>
            <el-form-item label="现场布置图" prop="layoutImage">
              <el-upload
                class="upload-demo"
                :limit="1"
                accept=".png, .jpg, .jpeg"
                :action="$store.state.UPLOADURL"
                :on-remove="
                  (file, flexList) => handleRemove1(file, flexList, 3, item)
                "
                :on-exceed="onExceed"
                :on-success="(file) => handleSuccess1(file, 3, item)"
                name="files"
                :file-list="item.layoutImageList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
          <div style="display: flex; justify-content: center; margin-top: 20px">
            <el-button icon="el-icon-plus" @click="onAddInfoForm"
              >新增项目</el-button
            >
          </div>
        </vue-scroll>
        <div class="dialog-footer">
          <el-button
            class="cancleBtn"
            icon="el-icon-circle-close"
            @click="addInfoDialog = false"
            size="medium"
            >取消</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-check"
            @click="saveInfoFn()"
            size="medium"
            >提交</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!--高德地图-->
    <gd-map
      v-if="showMap"
      :addProjectForm="addProjectForm"
      @closeMap="closeMap"
      @save="getLngLat"
    ></gd-map>
  </div>
</template>
<script>
import {
  getEnterpriseInfoByIdApi,
  getQueryByIdListApi,
  getBadRecordApi,
  addEnterpriseQualification,
  addEnterpriseBadRecord,
} from "@/assets/js/api/cooperationUnit";
import { getDictionaryItemApi } from "@/assets/js/api/companyDiagram";
import {
  getEnterpriseSupplierInfoListApi,
  supplierInfoSaveListApi,
} from "@/assets/js/api/supplier.js";
import gdMap from "../../../components/map/gd-map";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
export default {
  components: {
    gdMap,
  },
  props: ["detailId", "projectEnterpriseId", "enterpriseSn"],
  data() {
    return {
      activeIndex: "1",
      projectSn: "",
      enterpriseInfo: this.$t("message.projectInfo.enterpriseInfo"),
      enterpriseInfo2: [],
      fileUrl: "",
      qualificationList: [],
      badRecordList: [],
      bigImageDialog: false,
      bigImageUrl: "",
      qualificationDialog: false, // 新增企业资质弹窗
      qualificationForm: {
        fileName: "", //资质文件名
        fileNumber: "", // 资质文件编号
        fileUrl: "", // 文件路径
        remarks: "", // 备注
        qualificationType: "",
      },
      qualificationTypeList: [],
      fileList: [],
      qualificationFormRules: {
        fileName: [
          { required: true, message: "请输入资质文件名称", trigger: "blur" },
        ],
        fileNumber: [
          { required: true, message: "请输入资质文件编号", trigger: "blur" },
        ],
        fileUrl: [{ required: true, message: "请选择文件", trigger: "blur" }],
        qualificationType: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      matchResult: "",
      badRecordDialog: false, //新增不良记录弹窗
      badRecordForm: {
        ariseMatter: "", //发生事项
        ariseReason: "", // 发生原因
        ariseTime: "", // 发生时间
        remarks: "", // 备注
      },
      addProjectForm: {
        longitude: "",
        latitude: "",
        areaName: "",
        id: "",
      },
      badRecordFormRules: {
        ariseMatter: [
          { required: true, message: "请输入发生事项", trigger: "blur" },
        ],
        ariseReason: [
          { required: true, message: "请输入发生原因", trigger: "blur" },
        ],
        ariseTime: [
          { required: true, message: "请选择发生时间", trigger: "blur" },
        ],
      },
      addInfoFormRules: {
        cbsProjectType: [
          {
            required: true,
            message: "请选择项目类型",
            trigger: "change",
          },
        ],
        enterpriseEmail: [
          {
            type: "email",
            trigger: "blur",
            message: "请输入正确的邮箱",
            pattern:
              /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z]{2,4})+$/,
          },
        ],
        projectManage: [
          {
            required: true,
            message: "请输入项目经理",
            trigger: "blur",
          },
        ],
        projectNumber: [
          {
            required: true,
            message: "请输入项目编号",
            trigger: "blur",
          },
        ],
        xzSupplierTypeId: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        socialCode: [
          {
            required: true,
            message: "请输入正确的格式",
            trigger: "blur",
            pattern: /^[0-9ABCDEFGHJKLMNPQRTUWXY]{18}$/,
          },
        ],
      },
      infoEnterpriseId: "",
      dictionaryItemList: [],
      structureTypeList: [],
      dictionaryItemId: "",
      constructionStageList: [],
      projectTypeList: [],
      addInfoDialog: false,
      showMap: false,
      addInfoForm: [],
      supplierList: [],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.fileUrl = this.$store.state.FILEURL;
    this.getEnterpriseInfoById();

    // 获取类型
    this.getQualificationType();
    this.getDictionaryItem();
    this.getDictionaryByStructure();
    this.getDicProjectTypeList();
    this.getDictionaryList();
  },
  methods: {
    //编辑保存项目
    saveInfoFn() {
      Promise.all(
        this.addInfoForm.map((item, index) =>
          this.$refs[`form${index}`][0].validate()
        )
      )
        .then((res) => {
          this.addInfoForm.forEach((item) => {
            if (
              item.constructionMapUrlList &&
              item.constructionMapUrlList.length > 0
            ) {
              item.constructionMapUrl =
                this.$store.state.FILEURL + item.constructionMapUrlList[0].url;
            }
            if (item.layoutImageList && item.layoutImageList.length > 0) {
              item.layoutImage =
                this.$store.state.FILEURL + item.layoutImageList[0].url;
            }
          });
          supplierInfoSaveListApi({
            enterpriseId: this.$props.detailId,
            projectSn: this.$store.state.projectSn,
            projectEnterpriseSupplierInfoList: this.addInfoForm,
          })
            .then((res) => {
              // console.log('新增成功了吗',res)
              this.getEnterpriseSupplierInfoList();
              this.$message.success("编辑成功"); //编辑成功！
            })
            .finally(() => {
              this.addInfoDialog = false;
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    openInfoDialog() {
      if (this.supplierList.length > 0) {
        this.addInfoForm = [...this.supplierList];
      } else {
        this.onAddInfoForm();
      }

      this.addInfoDialog = true;
      this.$nextTick(() => {
        console.log(this.$refs);
        this.addInfoForm.map((item, index) =>
          this.$refs[`form${index}`][0].resetFields()
        );
        // riskSpreadRefList.value.forEach((el) => el && el.resetFields());
        // formRef.value && formRef.value.resetFields();
      });
    },
    //获取经纬度
    toGetLocalFn(row) {
      console.log(11111);
      this.addProjectForm.id = row.id;
      this.addProjectForm.latitude = row.latitude;
      this.addProjectForm.longitude = row.longitude;
      this.showMap = true;
      // window.open("https://lbs.amap.com/console/show/picker");
    },
    closeMap(val) {
      this.showMap = val;
      this.addInfoForm;
    },
    getLngLat(v) {
      console.log(v, this.addInfoForm);
      const find = this.addInfoForm.find((item) => item.id == v.id);
      if (find) {
        this.showMap = false;
        find.longitude = v.lng;
        find.latitude = v.lat;
      }
      // this.showMap = false;
    },
    //切换组件
    handleSelect(value) {
      this.activeIndex = value;
      if (value == 1) {
        this.getEnterpriseInfoById();
      } else if (value == 2) {
        this.getQueryById();
      } else if (value == 3) {
        setTimeout(() => {
          this.getBadRecord();
        }, 200);
      } else if (value == 4) {
        this.getEnterpriseSupplierInfoList();
      }
    },
    getEnterpriseSupplierInfoList() {
      let requestData = {
        enterpriseId: this.$props.detailId,
        projectSn: this.$store.state.projectSn,
        type: 2,
      };
      getEnterpriseSupplierInfoListApi(requestData).then((res) => {
        console.log(res, "承包项目信息");
        if (res.result) {
          this.enterpriseInfo2 = res.result.map((item) => {
            return [
              {
                fieldName: "承包项目名称",
                fieldName2: "项目施工区域",
                value: item.cbsName ? item.cbsName : "",
                value2: item.projectBuildArea ? item.projectBuildArea : "",
              },
              {
                fieldName: "项目经理",
                fieldName2: "项目类型",
                value: item.projectManage ? item.projectManage : "",
                value2: item.cbsProjectTypeName ? item.cbsProjectTypeName : "",
              },
              {
                fieldName: "施工阶段",
                fieldName2: "纬度位置",
                value: item.constructionStageName
                  ? item.constructionStageName
                  : "",
                value2: item.latitude ? item.latitude : "",
              },
              {
                fieldName: "经度位置",
                fieldName2: "工程类别",
                value: item.longitude ? item.longitude : "",
                value2: item.projectTypeName ? item.projectTypeName : "",
              },
              {
                fieldName: "项目编号",
                fieldName2: "结构类型",
                value: item.projectNumber ? item.projectNumber : "",
                value2: item.structureTypeName ? item.structureTypeName : "",
              },
              {
                fieldName: "项目面积(m²)",
                fieldName2: "工程状态",
                value: item.projectAcreage ? item.projectAcreage : "",
                value2:
                  typeof item.bulidStatus === "number"
                    ? this.$t("message.companyDiagram.BUILDSTATUS")[
                        item.bulidStatus
                      ].name
                    : "",
              },
              {
                fieldName: "开工日期",
                fieldName2: "竣工日期",
                value: item.startWorkDate ? item.startWorkDate : "",
                value2: item.completionDate ? item.completionDate : "",
              },
              {
                fieldName: "现场布置图",
                fieldName2: "现场施工图",
                value:
                  item.layoutImage && item.layoutImage.includes("http://")
                    ? item.layoutImage
                    : item.layoutImage &&
                      JSON.parse(item.layoutImage) instanceof Array &&
                      JSON.parse(item.layoutImage).length > 0
                    ? JSON.parse(item.layoutImage).map((item) => {
                        return {
                          name: item.name,
                          url: this.$store.state.FILEURL + item.url,
                        };
                      })
                    : "",
                value2:
                  item.constructionMapUrl &&
                  item.constructionMapUrl.includes("http://")
                    ? item.constructionMapUrl
                    : item.constructionMapUrl &&
                      JSON.parse(item.constructionMapUrl) instanceof Array &&
                      JSON.parse(item.constructionMapUrl).length > 0
                    ? JSON.parse(item.constructionMapUrl).map((item) => {
                        return {
                          name: item.name,
                          url: this.$store.state.FILEURL + item.url,
                        };
                      })
                    : "",
              },
              {
                fieldName: "联系电话",
                value: item.projectTel ? item.projectTel : "",
              },
            ];
          });
          this.supplierList = res.result.map((item) => {
            let constructionMapList = [];
            let layoutImageList = [];
            if (item.constructionMapUrl) {
              if (item.constructionMapUrl.includes("http://")) {
                const resName = item.constructionMapUrl.substring(
                  item.constructionMapUrl.lastIndexOf("\/") + 1,
                  item.constructionMapUrl.length
                );
                constructionMapList = [
                  {
                    name: resName,
                    url: resName,
                  },
                ];
              } else if (
                JSON.parse(item.constructionMapUrl) instanceof Array &&
                JSON.parse(item.constructionMapUrl).length > 0
              ) {
                constructionMapList = JSON.parse(item.constructionMapUrl).map(
                  (item) => {
                    return {
                      name: item.name,
                      url: item.url,
                    };
                  }
                );
              }
            }
            if (item.layoutImage) {
              if (item.layoutImage.includes("http://")) {
                const resName = item.layoutImage.substring(
                  item.layoutImage.lastIndexOf("\/") + 1,
                  item.layoutImage.length
                );
                layoutImageList = [
                  {
                    name: resName,
                    url: resName,
                  },
                ];
              } else if (
                JSON.parse(item.layoutImage) instanceof Array &&
                JSON.parse(item.layoutImage).length > 0
              ) {
                layoutImageList = JSON.parse(item.layoutImage).map((item) => {
                  return {
                    name: item.name,
                    url: item.url,
                  };
                });
              }
            }

            return {
              ...item,
              constructionMapUrlList: constructionMapList,
              layoutImageList: layoutImageList,
            };
          });
          console.log(this.supplierList);
          // basicInfo.supplierDetail = res.result
          // enterpriseInfo2
          // [
          //   {
          //     fieldName: "承包项目名称",
          //     fieldName2: "项目施工区域",
          //     value: res.result.projectEnterprise.cbsName
          //       ? res.result.projectEnterprise.cbsName
          //       : "",
          //     value2: res.result.projectEnterprise.projectBuildArea
          //       ? res.result.projectEnterprise.projectBuildArea
          //       : "",
          //   },
          //   {
          //     fieldName: "项目经理",
          //     fieldName2: "项目类型",
          //     value: res.result.projectEnterprise.projectManage
          //       ? res.result.projectEnterprise.projectManage
          //       : "",
          //     value2: res.result.projectEnterprise.cbsProjectTypeName
          //       ? res.result.projectEnterprise.cbsProjectTypeName
          //       : "",
          //   },
          //   {
          //     fieldName: "施工阶段",
          //     fieldName2: "纬度位置",
          //     value: res.result.projectEnterprise.constructionStageName
          //       ? res.result.projectEnterprise.constructionStageName
          //       : "",
          //     value2: res.result.projectEnterprise.latitude
          //       ? res.result.projectEnterprise.latitude
          //       : "",
          //   },
          //   {
          //     fieldName: "经度位置",
          //     fieldName2: "工程类别",
          //     value: res.result.projectEnterprise.longitude
          //       ? res.result.projectEnterprise.longitude
          //       : "",
          //     value2: res.result.projectEnterprise.projectTypeName
          //       ? res.result.projectEnterprise.projectTypeName
          //       : "",
          //   },
          //   {
          //     fieldName: "项目编号",
          //     fieldName2: "结构类型",
          //     value: res.result.projectEnterprise.projectNumber
          //       ? res.result.projectEnterprise.projectNumber
          //       : "",
          //     value2: res.result.projectEnterprise.structureTypeName
          //       ? res.result.projectEnterprise.structureTypeName
          //       : "",
          //   },
          //   {
          //     fieldName: "项目面积(m²)",
          //     fieldName2: "工程状态",
          //     value: res.result.projectEnterprise.projectAcreage
          //       ? res.result.projectEnterprise.projectAcreage
          //       : "",
          //     value2: this.$t("message.companyDiagram.BUILDSTATUS")[
          //       res.result.projectEnterprise.bulidStatus
          //     ].name,
          //   },
          //   {
          //     fieldName: "开工日期",
          //     fieldName2: "竣工日期",
          //     value: res.result.projectEnterprise.startWorkDate
          //       ? res.result.projectEnterprise.startWorkDate
          //       : "",
          //     value2: res.result.projectEnterprise.completionDate
          //       ? res.result.projectEnterprise.completionDate
          //       : "",
          //   },
          //   {
          //     fieldName: "现场布置图",
          //     fieldName2: "现场施工图",
          //     value:
          //       res.result.projectEnterprise.layoutImage &&
          //       JSON.parse(res.result.projectEnterprise.layoutImage) instanceof
          //         Array &&
          //       JSON.parse(res.result.projectEnterprise.layoutImage).length > 0
          //         ? JSON.parse(res.result.projectEnterprise.layoutImage).map(
          //             (item) => {
          //               return {
          //                 name: item.name,
          //                 url: this.$store.state.FILEURL + item.url,
          //               };
          //             }
          //           )
          //         : "",
          //     value2:
          //       res.result.projectEnterprise.constructionMapUrl &&
          //       JSON.parse(
          //         res.result.projectEnterprise.constructionMapUrl
          //       ) instanceof Array &&
          //       JSON.parse(res.result.projectEnterprise.constructionMapUrl)
          //         .length > 0
          //         ? JSON.parse(
          //             res.result.projectEnterprise.constructionMapUrl
          //           ).map((item) => {
          //             return {
          //               name: item.name,
          //               url: this.$store.state.FILEURL + item.url,
          //             };
          //           })
          //         : "",
          //   },
          //   {
          //     fieldName: "联系电话",
          //     value: res.result.projectEnterprise.projectTel
          //       ? res.result.projectEnterprise.projectTel
          //       : "",
          //   },
          // ]
        }
      });
    },
    // 获取承包商信息
    getDataDateils() {
      getProjectDetail({
        projectSn: this.$props.enterpriseSn,
      }).then((res) => {
        if (res.code == 200) {
          if (!res.result) return;
          console.log("~~~~~~~~~~~~~~~~~~~~", res);
        }
      });
    },
    //获取企业信息
    getEnterpriseInfoById() {
      let data = {
        enterpriseId: this.$props.detailId,
        projectSn: this.$store.state.projectSn,
      };
      getEnterpriseInfoByIdApi(data).then((res) => {
        if (res.code == 200) {
          console.log(res.result);
          this.enterpriseInfo = [
            {
              fieldName: this.$t("message.laborMange.theNameOfFirm"),
              fieldName2: this.$t("message.laborMange.photosOfQualification"),
              value: res.result.enterpriseName,
              value2:
                res.result.enterpriseQualificationUrl &&
                res.result.enterpriseQualificationUrl.split(",").length > 1
                  ? res.result.enterpriseQualificationUrl
                      .split(",")
                      .map((item) => {
                        return {
                          name: item.split("*")[0],
                          url: this.$store.state.FILEURL + item.split("*")[1],
                        };
                      })
                  : res.result.enterpriseQualificationUrl.indexOf("http://") >=
                    0
                  ? res.result.enterpriseQualificationUrl
                  : res.result.enterpriseQualificationUrl,
            },
            {
              fieldName: this.$t("message.laborMange.formOfBusiness"),
              fieldName2: this.$t("message.laborMange.legalRepresentative"),
              value:
                res.result.enterpriseTypeId == 1
                  ? this.$t("message.cooperationUnit.subpackage1")
                  : res.result.enterpriseTypeId == 2
                  ? this.$t("message.cooperationUnit.subpackage2")
                  : res.result.enterpriseTypeId == 3
                  ? this.$t("message.cooperationUnit.subpackage3")
                  : res.result.enterpriseTypeId == 4
                  ? this.$t("message.cooperationUnit.subpackage4")
                  : res.result.enterpriseTypeId == 5
                  ? this.$t("message.cooperationUnit.subpackage5")
                  : res.result.enterpriseTypeId == 6
                  ? this.$t("message.cooperationUnit.subpackage6")
                  : res.result.enterpriseTypeId == 7
                  ? this.$t("message.cooperationUnit.subpackage7")
                  : res.result.enterpriseTypeId == 8
                  ? this.$t("message.cooperationUnit.subpackage8")
                  : res.result.enterpriseTypeId == 9
                  ? this.$t("message.cooperationUnit.subpackage9")
                  : res.result.enterpriseTypeId == 10
                  ? this.$t("message.cooperationUnit.subpackage10")
                  : res.result.enterpriseTypeId == 11
                  ? this.$t("message.cooperationUnit.subpackage11")
                  : res.result.enterpriseTypeId == 12
                  ? this.$t("message.cooperationUnit.subpackage12")
                  : res.result.companyTypeName,
              value2: res.result.enterpriseLegalPerson,
            },
            {
              fieldName: this.$t("message.laborMange.openingBank"),
              fieldName2: this.$t("message.laborMange.unifiedSocialCreditCode"),
              value: res.result.bankname,
              value2: res.result.socialCode,
            },
            {
              fieldName: this.$t("message.laborMange.numberOfRegistrant"),
              fieldName2: this.$t("message.laborMange.registeredCapital"),
              value: res.result.registerPersonPhoneTel,
              value2: res.result.registeredCapital,
            },
            {
              fieldName: this.$t("message.laborMange.legalPersonPhone"),
              fieldName2: this.$t("message.laborMange.bankAccount"),
              value: res.result.legalPersonTel,
              value2: res.result.bankcardnumber,
            },
            {
              fieldName: this.$t("message.laborMange.businessLicense"),
              fieldName2: this.$t("message.laborMange.businessNumber"),
              value: res.result.businessLicenseEndDate,
              value2: res.result.businessNumber,
            },
            {
              fieldName: this.$t("message.laborMange.enterpriseMailbox"),
              fieldName2: this.$t("message.laborMange.addressOfPlant"),
              value: res.result.enterpriseEmail,
              value2: res.result.enterpriseAddress,
            },
            {
              fieldName: this.$t("message.laborMange.laborCertificateNo"),
              fieldName2: this.$t("message.laborMange.safetyProductionLicense"),
              value: res.result.qualificationNumber,
              value2:
                res.result.enterpriseSafeAllow &&
                res.result.enterpriseSafeAllow,
            },
            {
              fieldName: this.$t("message.laborMange.natureOfUnit"),
              fieldName2: "logo",
              value:
                res.result.enterpriseProperty == 1
                  ? this.$t("message.laborMange.stateOwnedBusiness")
                  : res.result.enterpriseProperty == 2
                  ? this.$t("message.laborMange.overseasInvestedEnterprises")
                  : res.result.enterpriseProperty == 3
                  ? this.$t("message.laborMange.collectiveEnterprises")
                  : this.$t("message.laborMange.privateEnterprise"),
              value2:
                res.result.logo && res.result.logo.split(",").length > 1
                  ? res.result.logo.split(",").map((item) => {
                      return {
                        name: item.split("*")[0],
                        url: this.$store.state.FILEURL + item.split("*")[1],
                      };
                    })
                  : res.result.logo.indexOf("http://") >= 0 || !res.result.logo
                  ? res.result.logo
                  : this.$store.state.FILEURL + res.result.logo,
              // res.result.logo ? this.$store.state.FILEURL +res.result.logo : "",
            },
            {
              fieldName: this.$t("message.projectInfo.projectLeader"),
              fieldName2: this.$t("message.projectInfo.projectLeaderPhone"),
              value: res.result.projectDirectorName,
              value2: res.result.projectDirectorPhone,
            },
          ];

          this.infoEnterpriseId = res.result.id;
          // this.getDataDateils();
          console.log(this.enterpriseInfo, 666777888);
        }
      });
    },
    //获取企业资质
    getQueryById() {
      let data = {
        // enterpriseId: this.$props.projectEnterpriseId,
        enterpriseId: this.infoEnterpriseId,
      };
      getQueryByIdListApi(data).then((res) => {
        if (res.code == 200) {
          // console.log(22222222, res.result)
          this.qualificationList = res.result.map((item) => {
            // console.log(!item.fileUrl.includes(this.$store.state.FILEURL))
            if (!item.fileUrl.includes(this.$store.state.FILEURL)) {
              console.log(1111111111, item.fileUrl.includes("name"));
              const imageType = [".jpg", ".png", ".jpeg"];
              if (item.fileUrl.includes("name")) {
                const name = JSON.parse(item.fileUrl)[0].name;
                const type = name.substring(name.indexOf("."), name.length);
                console.log(type);
                item.flag = imageType.includes(type);
                console.log(item.flag);
                item.fileNameNew = name;
                item.fileUrl =
                  this.$store.state.FILEURL + JSON.parse(item.fileUrl)[0].url;
                //   // this.$set(item, "fileNameNew", JSON.parse(item.fileUrl)[0].name)
              } else {
                item.fileUrl = this.$store.state.FILEURL + item.fileUrl;
              }
            }
            return {
              ...item,
            };
          });
          // console.log(111111111, this.qualificationList)
        }
      });
    },
    // 新增按钮
    addBtn(type) {
      // type 1新增企业资质按钮 2新增不良记录按钮
      if (type === 1) {
        this.qualificationDialog = true;
        this.fileList = [];
        this.$nextTick(() => {
          this.$refs.qualificationForm.resetFields();
        });
      } else if (type === 2) {
        this.badRecordDialog = true;
        this.$nextTick(() => {
          this.$refs.badRecordForm.resetFields();
        });
      }
    },
    // 新增企业资质
    addQualification() {
      this.$refs.qualificationForm.validate((valid) => {
        console.log("新增的参数", this.qualificationForm);
        if (valid) {
          let data = this.qualificationForm;
          // (data.enterpriseId = this.$props.projectEnterpriseId),
          data.enterpriseId = this.infoEnterpriseId;
          addEnterpriseQualification(data).then((res) => {
            // console.log('新增成功了吗',res)
            this.getQueryById();
            this.$refs.upload.clearFiles();
            this.fileList = [];
            this.$refs.qualificationForm.resetFields();
          });
          this.qualificationDialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //获取不良记录
    getBadRecord() {
      let data = {
        enterpriseId: this.$props.projectEnterpriseId,
        // enterpriseId: this.$props.detailId,
      };
      getBadRecordApi(data).then((res) => {
        if (res.code == 200) {
          console.log(res);
          this.badRecordList = res.result;
          this.$forceUpdate();
          this.$refs.badRecordList.doLayout();
        }
      });
    },
    // 新增不良记录
    addBadRecord() {
      this.$refs.badRecordForm.validate((valid) => {
        console.log(this.badRecordForm);
        if (valid) {
          let data = this.badRecordForm;
          // (data.enterpriseId = this.$props.detailId),
          (data.enterpriseId = this.$props.projectEnterpriseId),
            addEnterpriseBadRecord(data).then((res) => {
              this.getBadRecord();
              this.$refs.badRecordForm.resetFields();
            });
          this.badRecordDialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 资质文件上传成功
    handleSuccess(file) {
      console.log("上传成功放回的值", file);
      let data = {
        name: file.data[0].fileInfo.originalFilename
          ? file.data[0].fileInfo.originalFilename
          : file.data[0].filename,
        url: file.data[0].imageUrl,
      };
      // let data = { name: file.data[0].fileInfo.attr.originalFilename, url: file.data[0].imageUrl };
      this.fileList.push(data);
      this.qualificationForm.fileUrl =
        this.fileList.length > 0 ? JSON.stringify(this.fileList) : "";
      console.log(this.qualificationForm);
      this.$refs.qualificationForm.clearValidate();
    },
    // 资质文件删除成功
    handleRemove(file) {
      console.log(this.qualificationForm);
      let url = file.url ? file.url : file.response.data[0].imageUrl;
      for (let i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].url == url) {
          this.fileList.splice(i, 1);
        }
      }
      console.log(this.fileList);
    },
    // 判断上传的是否为图片
    handleBeforeUpload(file) {
      //   var img = file.name.substring(file.name.lastIndexOf('.') + 1)
      //   const suffix = img === 'jpg'
      //   const suffix2 = img === 'png'
      //   const suffix3 = img === 'jpeg'
      //   const isLt1M = file.size / 1024 / 1024 < 1;
      //  if (!suffix && !suffix2 && !suffix3) {
      //      this.$message.error("只能上传图片！");
      //      return false
      //  }
      //  // 可以限制图片的大小
      //  if (!isLt1M) {
      //      this.$message.error('上传图片大小不能超过 1MB!');
      //  }
      //  return suffix || suffix2 || suffix3
    },

    //截取图片地址
    getUrl(url, type) {
      if (url == null || url == undefined || url == "") return;
      if (type === 1) {
        let arr = url.split(",");
        let showArr = [];
        for (let i = 0; i < arr.length; i++) {
          let showUrl = arr[i].split("*")[1];
          showArr.push(this.fileUrl + showUrl);
        }
        return showArr;
      } else if (type == 2) {
        let arr = JSON.parse(url);
        // this.matchResult = arr.match("(.+?).(png|jpg|gif)");
        // console.log('this.matchResult',this.matchResult)
        // arr = arr.split(",");
        let showArr = [];
        showArr = arr.map((item) => {
          let showUrl = item.url;
          let showArray = [];
          showArray.push(this.fileUrl + showUrl);
          return showArray;
        });
        return showArr;

        // for (let i = 0; i < arr.length; i++) {
        //   let showUrl = arr[i].url;
        //   // showArr.push(this.fileUrl + showUrl);
        //   let a  = showUrl.split(".")[1]
        //   if( a === 'png'|| a === 'jpg' ||  a ==='gif'){
        //     showArr.push(this.fileUrl + showUrl);
        //   }else{
        //     this.matchResult = showUrl
        //   }
        // }
        // console.log('showArr',showArr)
      }
    },
    onAddInfoForm() {
      this.addInfoForm.push({
        id: Date.now(),
        cbsName: "", // 承包项目名称
        projectBuildArea: "", // 项目施工区域
        completionDate: "", // 竣工日期
        cbsProjectType: "", // 项目类型
        projectManage: "", // 项目经理
        latitude: "", // 维度位置
        longitude: "", // 经度位置
        projectType: "", // 工程类别
        projectNumber: "", // 项目编号
        structureType: "", // 结构类型
        projectAcreage: "", // 项目面积(m²)
        bulidStatus: "", // 工程状态
        startWorkDate: "", // 开工日期
        constructionStage: "", // 施工阶段
        layoutImage: "", // 现场布置图
        constructionMapUrl: "", // 现场施工图
        projectTel: "", // 联系电话
        layoutImageList: [], // 现场布置图
        constructionMapUrlList: [], // 现场施工图
        showMap: false,
      });
    },
    //删除文件
    handleRemove1(file, fileList, type, row) {
      if (type == 3) {
        row.layoutImageList = fileList;
      } else if (type == 4) {
        row.constructionMapUrlList = fileList;
      }
    },
    onExceed() {
      this.$message.warning("超出最大上传限制!");
    },
    //文件上传成功
    handleSuccess1(file, type, row) {
      this.$message.success("上传成功");
      let data = {
        name: file.data[0].fileInfo.originalFilename
          ? file.data[0].fileInfo.originalFilename
          : file.data[0].filename,
        url: file.data[0].imageUrl,
      };
      console.log(file);
      if (type == 3) {
        row.layoutImageList = row.layoutImageList ? row.layoutImageList : [];
        row.layoutImageList.push(data);
        console.log(row.layoutImageList);
      } else if (type == 4) {
        console.log(row.constructionMapUrlList);
        row.constructionMapUrlList = row.constructionMapUrlList
          ? row.constructionMapUrlList
          : [];
        row.constructionMapUrlList.push(data);
      }
    },
    getQualificationType() {
      getDictionaryItemApi({
        dictionaryEncoding: "enterprise_qualification_qualification_type",
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          console.log("11111111111", res);
          this.qualificationTypeList = res.result;
        }
      });
    },
    getDictionaryItem() {
      getDictionaryItemApi({
        dictionaryEncoding: "project_enterprise_cbs_project_type",
        projectSn: this.$store.state.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          console.log("11111111111", res);
          this.dictionaryItemList = res.result;
        }
      });
    },
    // 获取字典工程类别列表
    // 获取字典工程类别列表
    getDicProjectTypeList() {
      getDictionaryItemApi({
        dictionaryEncoding: "project_type",
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.result.length > 0) {
          this.projectTypeList = res.result;
        }
      });
    },
    //获取字典施工阶段
    getDictionaryList() {
      getDictionaryItemApi({
        dictionaryEncoding: "project_construction_stage",
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.result.length > 0) {
          this.constructionStageList = res.result;
        }
      });
    },
    //获取字典 结构类型
    getDictionaryByStructure() {
      getDictionaryItemApi({
        dictionaryEncoding: "project_structure_type",
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.result.length > 0) {
          this.structureTypeList = res.result;
        }
      });
    },
    //查看大图
    showImgBtn(value) {
      this.bigImageDialog = true;
      this.bigImageUrl = value;
    },
  },
};
</script>
<style lang="less" scoped>
.projectDialog {
  /deep/ .upload-demo {
    display: flex;
    width: 286px;
  }
  /deep/ .el-upload-list {
    margin: 0;
  }
}

.projectDialog /deep/ .el-dialog {
  margin-top: 5vh !important;
  margin-bottom: 0 !important;
}
.dialogFormBox.big:not(:first-child) {
  margin-top: 20px;
  position: relative;

  .icon_close {
    color: #ff0404;
    cursor: pointer;
    position: absolute;
    right: -30px;
    top: -32px;
    font-size: 20px;
  }
}

.dialogFormBox.big {
  width: 900px;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #cccccc;

  > .el-form-item:not(:nth-child(2n-1)) {
    margin-right: 0;
  }
}
.pageDataContainer {
  overflow: initial;
}

.el-menu--horizontal > .el-menu-item {
  height: 40px;
  line-height: 40px;
}

.content_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 30px 20px;
}

.showImg_wrap {
  display: flex;
  align-items: center;
}

.showImg {
  width: 50px;
  height: 45px;
  margin: 0 10px 0 0;
  cursor: pointer;
}

.bigImageDialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  z-index: 1000000;
  overflow-y: auto;
  // padding-bottom: 50px;
  height: 100%;

  .bigImageContent {
    height: 100%;
    margin: 0 auto;
    text-align: center;
  }

  img {
    // margin-top: 10%;
    position: relative;
    top: 10%;
    max-height: 80%;
    max-width: 80%;
  }
}

.qualificationHref {
  text-decoration: none;
  color: blue;
  display: block;
}

.addQualificationBtn,
.addBadRecordBtn {
  margin-top: -20px;
  margin-bottom: 10px;
}
</style>
