<template>
<!-- 表格形式的项目信息页面 -->
  <div class="baseInfo whiteBlock">
    <vue-scroll style="width: 100%">
      <div class="btn_wrap">
        <el-button
          v-if="projectAuditStatus != 2"
          type="primary"
          size="medium"
          @click="uploadThirdParty"
          >
          <!-- 上传第三方平台 -->
          {{$t('message.projectInfo.updateToThirdParty')}}
          </el-button
        >
        <el-button
          v-if="company == 'zhengwu'"
          type="primary"
          size="medium"
          @click="sendSafetyHatProject"
          >
          
          上传安全帽项目
          </el-button
        >
        <el-button
          type="primary"
          size="medium"
          @click="addProjectDialog = true"
          >{{ $t("message.companyDiagram.Table.edit") }}</el-button
        >
        <!-- <el-button type="primary" size="medium">{{$t('message.companyDiagram.projectSchedule')}}</el-button> -->
      </div>
      <div>
        <div class="custom_tab">
          <div class="title">{{ $t("message.companyDiagram.sheet") }}</div>
          <div class="flex4">
            <div class="type_content" style="z-index:2">
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.entryName1")
                }}</span>
                <span class="width_65">{{ projectDetail.projectName }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.Table.projectAddress")
                }}</span>
                <span class="width_65 bg_color" style="white-space: nowrap;">{{
                  projectDetail.projectAddress
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.provincesCode"
                  )
                }}</span>
                <span class="width_65"
                  >{{ projectDetail.provinceName
                  }}{{ projectDetail.areaName }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.projectManage"
                  )
                }}</span>
                <span class="width_65 bg_color">{{
                  projectDetail.projectManage
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.longitude")
                }}</span>
                <span class="width_65">{{ projectDetail.longitude }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.projectNumber"
                  )
                }}</span>
                <span class="width_65 bg_color">{{
                  projectDetail.projectNumber
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.projectAcreage"
                  )
                }}</span>
                <span class="width_65">{{ projectDetail.projectAcreage }}(m²)</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.startWorkDate"
                  )
                }}</span>
                <span class="width_65 bg_color">{{
                  projectDetail.startWorkDate
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.saleAcreage")
                }}</span>
                <span class="width_65">{{ projectDetail.saleAcreage }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.buildingNum")
                }}</span>
                <span class="width_65 bg_color">{{
                  projectDetail.buildingNum
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.projectTel")
                }}</span>
                <span class="width_65">{{ projectDetail.projectTel }}</span>
              </div>
              <div class="flex3">
                <span class="width_35">
                    <!-- 项目唯一标识(SN) -->
                    {{$t('message.projectInfo.projectOnlyMark')}}
                </span>
                <span class="width_65 bg_color" style="white-space: nowrap;">{{
                  projectDetail.projectSn
                }}</span>
              </div>
            </div>
            <div class="type_content">
              <div class="flex3">
                <span class="width_35"></span>
                <span class="width_65"></span>
              </div>
              <div class="flex3">
                <span
                  class="width_35 bg_color"
                  style="width: 35%; height: 44px; border: none"
                ></span>
                <span class="width_65 bg_color"></span>
              </div>
              <div class="flex3">
                <span class="width_35"></span>
                <span class="width_65"></span>
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.latitude")
                }}</span>
                <span class="width_65 bg_color">{{
                  projectDetail.latitude
                }}</span>
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.projectType")
                }}</span>
                <span
                  class="width_65"
                  v-for="(item, index) in $t(
                    'message.companyDiagram.PROJECTTYPE'
                  )"
                  :key="index"
                  v-if="projectDetail.projectType == item.id"
                  >{{ item.name }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.structureType"
                  )
                }}</span>
                <span
                  class="width_65 bg_color"
                  v-for="(item, index) in $t(
                    'message.companyDiagram.STRUCTURETYPE'
                  )"
                  :key="index"
                  v-if="projectDetail.structureType == item.id"
                  >{{ item.name }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.bulidStatus")
                }}</span>
                <span
                  class="width_65"
                  v-for="(item, index) in $t(
                    'message.companyDiagram.BUILDSTATUS'
                  )"
                  :key="index"
                  v-if="projectDetail.bulidStatus == item.id"
                  >{{ item.name }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.constructionStage"
                  )
                }}</span>
                <span
                  class="width_65 bg_color"
                  v-for="(item, index) in $t(
                    'message.companyDiagram.CONSTRUCTIONSTAGE'
                  )"
                  :key="index"
                  v-if="projectDetail.constructionStage == item.id"
                  >{{ item.name }}</span
                >
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.households")
                }}</span>
                <span class="width_65">{{ projectDetail.households }}</span>
              </div>
              <div class="flex3">
                <span class="width_35 border_l">{{
                  $t("message.companyDiagram.dialog_ProjectPop_up.layoutImage")
                }}</span>
                <span class="width_65 bg_color">
                  <img
                    :src="projectDetail.layoutImage"
                    style="
                      width: 40px;
                      height: auto;
                      margin-top: 7px;
                      cursor: pointer;
                    "
                    @click="
                      bigImageDialog = true;
                      bigImageUrl = projectDetail.layoutImage;
                    "
                  />
                </span>
              </div>
              <div class="flex3">
                <span
                  class="width_35 border_l"
                  style="height: 44px"
                >{{ $t("message.companyDiagram.dialog_ProjectPop_up.shopDrawing")}}</span>
                <span class="width_65">
                     <img
                    :src="projectDetail.constructionMapUrl"
                    style="
                      width: 40px;
                      height: auto;
                      margin-top: 7px;
                      cursor: pointer;
                    "
                    @click="
                      bigImageDialog = true;
                      bigImageUrl = projectDetail.constructionMapUrl;
                    "
                  />
                </span>
              </div>
              <div class="flex3" style="background: rgba(235, 234, 234, 0.5);">
                <span class="width_35"> </span>
                <span class="width_65" style="white-space: nowrap;"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </vue-scroll>

    <!-- 项目弹框 -->
    <el-dialog
      class="projectDialog"
      :title="projectDialogTitle"
      :visible.sync="addProjectDialog"
      width="1100px"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="addProjectForm"
          ref="addProjectForm"
          :rules="addProjectFormRules"
          label-width="120px"
          class="dialogFormBox big"
          :inline="true"
        >
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectName')
            "
            prop="projectName"
          >
            <el-input
              v-model="addProjectForm.projectName"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.provincesCode')
            "
            prop="provincesCode"
          >
            <el-cascader
              ref="cascader"
              v-model="provincesCityArr"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
              :options="provincesCityList"
              :props="cascaderProps"
              filterable
              @change="changeProvincesCity"
            ></el-cascader>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectAddress')
            "
            prop="projectAddress"
          >
            <el-input
              v-model="addProjectForm.projectAddress"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectManage')
            "
            prop="projectManage"
          >
            <el-input
              v-model="addProjectForm.projectManage"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectTel')
            "
            prop="projectTel"
          >
            <el-input
              v-model="addProjectForm.projectTel"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.companyDiagram.dialog_ProjectPop_up.longitude')"
            prop="longitude"
          >
            <el-input
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
              v-model="addProjectForm.longitude"
              :disabled="true"
            >
              <template slot="append">
                <el-link type="primary" @click="toGetLocalFn">{{
                  $t(
                    "message.companyDiagram.dialog_ProjectPop_up.coordinatePicking"
                  )
                }}</el-link>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item
            :label="$t('message.companyDiagram.dialog_ProjectPop_up.latitude')"
            prop="latitude"
          >
            <el-input
              v-model="addProjectForm.latitude"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectNumber')
            "
            prop="projectNumber"
          >
            <el-input
              v-model="addProjectForm.projectNumber"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectType')
            "
            prop="projectType"
          >
            <el-select
              v-model="addProjectForm.projectType"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in $t('message.companyDiagram.PROJECTTYPE')"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t(
                'message.companyDiagram.dialog_ProjectPop_up.engineeringPurpose'
              )
            "
            prop="engineeringPurpose"
          >
            <el-select
              v-model="addProjectForm.engineeringPurpose"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in $t('message.companyDiagram.ENGINEERINGPRUPOSE')"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.structureType')
            "
            prop="structureType"
          >
            <el-select
              v-model="addProjectForm.structureType"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in $t('message.companyDiagram.STRUCTURETYPE')"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.projectAcreage')
            "
            prop="projectAcreage"
          >
            <el-input
              v-model="addProjectForm.projectAcreage"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.bulidStatus')
            "
            prop="bulidStatus"
          >
            <el-select
              v-model="addProjectForm.bulidStatus"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in $t('message.companyDiagram.BUILDSTATUS')"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.startWorkDate')
            "
            prop="startWorkDate"
          >
            <el-date-picker
              v-model="addProjectForm.startWorkDate"
              type="date"
              :placeholder="
                $t(
                  'message.companyDiagram.dialog_ProjectPop_up.date_placeholder'
                )
              "
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item
            :label="
              $t(
                'message.companyDiagram.dialog_ProjectPop_up.constructionStage'
              )
            "
            prop="constructionStage"
          >
            <el-select
              v-model="addProjectForm.constructionStage"
              :placeholder="$t('message.companyDiagram.PleaseSelect')"
            >
              <el-option
                v-for="item in $t('message.companyDiagram.CONSTRUCTIONSTAGE')"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.saleAcreage')
            "
            prop="saleAcreage"
          >
            <el-input
              type="digit"
              v-model="addProjectForm.saleAcreage"
              :placeholder="$t('message.companyDiagram.PleaseEnter')"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.households')
            "
            prop="households"
          >
            <el-input
              v-model.number="addProjectForm.households"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.buildingNum')
            "
            prop="buildingNum"
          >
            <el-input
              v-model.number="addProjectForm.buildingNum"
              :placeholder="
                $t('message.companyDiagram.dialog_ProjectPop_up.placeholder')
              "
            ></el-input>
          </el-form-item>
          <!-- 是否重点工程 -->

          <el-form-item
            :label="
              $t('message.projectInfo.isImportanceProject')
            "
            prop="majorProjectType"
          >
            <div style="width:280px">
              <el-radio v-model="addProjectForm.majorProjectType" :label="1">
                <!-- 是 -->
                {{ $t('message.projectInfo.is')}}
              </el-radio>
              <el-radio v-model="addProjectForm.majorProjectType" :label="0">
              {{$t('message.projectInfo.isNot')}}
                <!-- 否 -->
              </el-radio>
            </div>
          </el-form-item>
          <br>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.layoutImage')
            "
            prop="layoutImage"
          >
          <div style="width: 280px">
            <el-upload
              class="avatar-uploader"
              :action="$store.state.UPLOADURL"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="(file)=>handleUploadSuccess(file,1)"
              name="files"
            >
              <div v-if="addProjectForm.layoutImage" class="imgBox">
                <img :src="addProjectForm.layoutImage" class="avatar" />
                <i
                  class="el-icon-error redText"
                  @click.stop="addProjectForm.layoutImage = ''"
                ></i>
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

          </el-form-item>
          <el-form-item
            :label="
              $t('message.companyDiagram.dialog_ProjectPop_up.shopDrawing')
            "
            prop="constructionMapUrl"
          >
            <el-upload
              class="avatar-uploader"
              :action="$store.state.UPLOADURL"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="(file)=>handleUploadSuccess(file,2)"
              name="files"
            >
              <div v-if="addProjectForm.constructionMapUrl" class="imgBox">
                <img :src="addProjectForm.constructionMapUrl" class="avatar" />
                <i
                  class="el-icon-error redText"
                  @click.stop="addProjectForm.constructionMapUrl = ''"
                ></i>
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <div class="dialog-footer">
            <el-button
              class="cancleBtn"
              @click="addProjectDialog = false"
              icon="el-icon-circle-close"
              size="medium"
              >{{ $t("message.companyDiagram.cancel") }}</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              @click="saveProjectFn"
              size="medium"
              >{{ $t("message.companyDiagram.determine") }}</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
    <!-- 查看大图 -->
    <el-dialog :modal-append-to-body="false" title="查看大图" :visible.sync="bigImageDialog">
      <img width="100%" :src="bigImageUrl" alt />
    </el-dialog>
    <!--高德地图-->
    <gd-map v-if="showMap" @closeMap="closeMap" @save="getLngLat"></gd-map>
  </div>
</template>
<script>
import {
  sendSafetyHatProjectDataApi
} from "@/assets/js/api/companyDiagram.js";
import { getProjectDetail, editProjectInfo, sendProjectInfo,getProjectConfigListApi } from "@/assets/js/api/baseInfo.js";
import { selectProvincesCityListApi } from "@/assets/js/api/project.js";
import scroll from "vue-seamless-scroll";
import gdMap from "../../../components/map/gd-map";
export default {
  name: "baseInfo",
  components: {
    scroll,
    gdMap,
  },
  data() {
    var checkAge = (rule, value, callback) => {
      if (value == "" && value != 0) {
        callback(new Error(this.$t("message.companyDiagram.required")));
        return;
      }
      if (!Number.isInteger(value)) {
        callback(new Error(this.$t("message.companyDiagram.required_msg")));
      } else {
        callback();
      }
    };
    return {
      projectDialogTitle: /* "编辑项目", */ this.$t('message.projectInfo.editProject'),
      addProjectDialog: false,
      addProjectForm: {
        areaCode: "",
        buildingNum: "",
        bulidStatus: "",
        cityCode: "",
        companySn: "",
        constructionStage: "",
        engineeringPurpose: "",
        households: "",
        latitude: "",
        layoutImage: "",
        constructionMapUrl:'',
        longitude: "",
        projectAcreage: "",
        projectAddress: "",
        projectName: "",
        projectNumber: "",
        projectType: "",
        provincesCode: "",
        saleAcreage: "",
        startWorkDate: "",
        structureType: "",
        projectManage: "",
        projectTel: "",
        majorProjectType:0
      },
      projectDetail: {
        areaCode: "",
        buildingNum: "",
        bulidStatus: "",
        cityCode: "",
        companySn: "",
        constructionStage: "",
        engineeringPurpose: "",
        households: "",
        latitude: "",
        layoutImage: "",
        constructionMapUrl:'',
        longitude: "",
        projectAcreage: "",
        projectAddress: "",
        projectName: "",
        projectNumber: "",
        projectType: "",
        provincesCode: "",
        saleAcreage: "",
        startWorkDate: "",
        structureType: "",
        projectManage: "",
        projectTel: "",
      },
      addProjectFormRules: {
        projectName: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        provincesCode: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        projectAddress: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        projectManage: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        projectTel: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        longitude: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        latitude: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        projectNumber: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        projectType: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        engineeringPurpose: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        structureType: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        projectAcreage: [
          {
            required: true,
            message: this.$t("message.companyDiagram.required"),
            trigger: "blur",
          },
        ],
        bulidStatus: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        startWorkDate: [
          {
            required: true,
            message: this.$t("message.companyDiagram.Mandatory"),
            trigger: "change",
          },
        ],
        households: [{ required: true, validator: checkAge, trigger: "blur" }],
        buildingNum: [{ required: true, validator: checkAge, trigger: "blur" }],
      },
      bigImageDialog: false,
      bigImageUrl: "",
      projectSn: "",
      provincesCityArr: [],
      provincesCityList: [],
      cascaderProps: {
        label: "name",
        children: "childrenlist",
        value: "code",
      },
      showMap: false,
      projectAuditStatus:'',//审核状态
      company: ''
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.company = COMPANY
    this.getDataDateils();
    this.loadProvincesCityList();
    this.getProjectConfigList()
  },

  methods: {
    sendSafetyHatProject(){
      sendSafetyHatProjectDataApi({projectSn: this.projectSn}).then(res=>{
        if(res.code == 200){
          this.$message.success('上传成功！')
        }
      })
    },
    getProjectConfigList(){
      getProjectConfigListApi({projectSn: this.projectSn}).then(res => {
        if(res.code == 200){
          this.projectAuditStatus = res.result[0].projectAuditStatus
          console.log(res.result[0].projectAuditStatus);
        }
      })
    },
    uploadThirdParty(){
      sendProjectInfo({projectSn: this.projectSn}).then(res=>{
        if(res.code == 200){
          this.$message.success(this.$t('message.projectInfo.updateSuccess')+'!')
          this.getProjectConfigList()
        }
      })
    },
    closeMap(val) {
      this.showMap = val;
    },
    getLngLat(v) {
      this.showMap = false;
      this.addProjectForm.longitude = v.lng;
      this.addProjectForm.latitude = v.lat;
    },
    //获取详情
    getDataDateils() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          this.projectDetail = res.result!=null ? res.result : this.projectDetail;
          this.provincesCityArr = [
            res.result.provincesCode,
            res.result.cityCode,
            res.result.areaCode,
          ];
          this.addProjectForm = JSON.parse(JSON.stringify(res.result));
          this.$store.commit('setProDetail',res.result)
        }
      });
    },

    // 文件上传前
    beforeAvatarUpload(file) {
      if (
        file.type != "image/jpeg" &&
        file.type != "image/png" &&
        file.type != "image/jpg" &&
        file.type != "image/bmp"
      ) {
        this.$message.error(this.$t("message.companyDiagram.uploadMsg")); //只能上传图片
        return false;
      } else {
        return true;
      }
    },
    //文件上传成功
    handleUploadSuccess(res,type) {
      console.log(res)
      if(type==1){
        this.addProjectForm.layoutImage =
          this.$store.state.FILEURL + res.data[0].imageUrl;
      }else{
        this.addProjectForm.constructionMapUrl = this.$store.state.FILEURL + res.data[0].imageUrl;
      }
    },

    //获取经纬度
    toGetLocalFn() {
      this.showMap = true;
      // window.open("https://lbs.amap.com/console/show/picker");
    },

    //编辑保存项目
    saveProjectFn() {
      this.$refs["addProjectForm"].validate((valid) => {
        if (valid) {
          editProjectInfo(this.addProjectForm).then((res) => {
            this.addProjectDialog = false;
            this.getDataDateils();
            this.$message.success(
              this.$t("message.companyDiagram.editSuccess")
            ); //编辑成功！
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //获取项目所在省市下拉
    loadProvincesCityList() {
      selectProvincesCityListApi().then((res) => {
        this.provincesCityList = res.result;
      });
    },
    //切换省市
    changeProvincesCity(val) {
      this.addProjectForm.provincesCode = val[0];
      this.addProjectForm.cityCode = val[1];
      this.addProjectForm.areaCode = val[2];
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex2 {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.flex3 {
  display: flex;
  align-items: center;
}
.flex4 {
  display: flex;
  justify-content: space-between;
}
.flex5 {
  display: flex;
  align-items: center;
  justify-content: center;
}
.baseInfo {
  width: 100%;
  height: 100%;
  // background: #ffffff;
  padding: 15px;
  box-sizing: border-box;
  .btn_wrap {
    text-align: right;
  }
  .custom_tab {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(148, 148, 148, 0.5);
    border-bottom: none;
    margin-top: 30px;
    // color: #333;
    .title {
      width: 100%;
      font-size: 14px;
      padding: 12px 20px;
      border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      box-sizing: border-box;
      height: 44px;
      background: #eeeeee;
    }

    .type_content {
      width: 50%;
      div {
        font-size: 14px;
        padding: 12px 0;
        height: 44px;
        line-height: 44px;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(148, 148, 148, 0.5);
      }
    }

    .width_65 {
      width: 65%;
      display: inline-block;
      box-sizing: border-box;
      height: 44px;
      padding: 0 15px;
    }
    .width_35 {
      width: 35%;
      display: inline-block;
      box-sizing: border-box;
      border-right: 1px solid rgba(148, 148, 148, 0.5);
      padding: 0 15px;
      text-align: right;
      background: rgba(235, 234, 234, 0.5);
    }
  }
  .bg_color {
    background: rgba(235, 234, 234, 0.5);
    display: inline-block;
    box-sizing: border-box;
  }
  .border_l {
    border-left: 1px solid rgba(148, 148, 148, 0.5);
  }
  /deep/ .el-dialog {
    margin-top: 10px !important;
  }

  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    // overflow: hidden;
    height: 178px;
    width: 178px;
  }

  .avatar-uploader:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .imgBox {
    position: relative;

    .el-icon-error {
      font-size: 20px;
      position: absolute;
      right: -10px;
      top: -10px;
      cursor: pointer;
    }
  }
}
</style>
