<template>
  <div class="ApproveDetailBox">
    <!-- 基本信息 区域 start-->
    <el-form ref="ruleForm" :model="form" :rules="rules">
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode == '0102' ||
          form.institutionalCode == '0103' ||
          form.institutionalCode == '0104' ||
          industryCode === '03' ||
          industryCode === '04' ||
          industryCode === '05' ||
          industryCode === '06' ||
          industryCode === '07' ||
          industryCode === '02'
        "
      >
        <span class="title"><i></i><strong>基本信息</strong></span>
        <!-- 公司名称 -->
        <template>
          <el-form-item
            :label="
              industryCode === '02' || industryCode === '07' || form.institutionalCode == '0406'
                ? '单位名称'
                : '公司名称'
            "
            class="formItem"
            prop="name"
          >
            <el-input
              v-model="form.name"
              placeholder="请与营业执照名称保持一致"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 内保行业和其他行业显示 start -->
        <template>
          <el-form-item
            :label="
              form.institutionalCode === '0406' ? '负责人' : '法定代表人姓名'
            "
            class="formItem"
            prop="legalPersonName"
            v-if="industryCode !== '06' && industryCode !== '07' && industryCode !== '02'"
          >
            <el-input
              v-model="form.legalPersonName"
              placeholder="请与营业执照名称保持一致"
            ></el-input>
          </el-form-item>
        </template>
        <template>
          <el-form-item
            label="证件类型"
            class="formItem"
            prop="legalPersonCredentialType"
            v-if="industryCode !== '06' && industryCode !== '07' && industryCode !== '02'"
          >
            <!-- <el-input
              :value="
                form.legalPersonCredentialType == 0
                  ? '居民身份证/户口簿'
                  : form.legalPersonCredentialType == 1
                  ? '香港特区护照/身份证'
                  : form.legalPersonCredentialType == 2
                  ? '澳门特区护照/身份证明'
                  : form.legalPersonCredentialType == 3
                  ? '台湾居民来往大陆通行证'
                  : '外国护照'
              "
              disabled
            ></el-input> -->
            <el-select
              style="width: 100%"
              v-model="form.legalPersonCredentialType"
            >
              <el-option label="居民身份证/户口簿" :value="0"></el-option>
              <el-option label="香港特区护照/身份证" :value="1"></el-option>
              <el-option label="澳门特区护照/身份证明" :value="2"></el-option>
              <el-option label="台湾居民来往大陆通行证" :value="3"></el-option>
              <el-option label="外国护照" :value="4"></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template>
          <el-form-item
            label="证件号码"
            class="formItem"
            prop="legalPersonCredentialNumber"
            v-if="industryCode !== '06' && industryCode !== '07' && industryCode !== '02'"
          >
            <el-input v-model="form.legalPersonCredentialNumber"></el-input>
          </el-form-item>
        </template>
        <template>
          <el-form-item
            label="手机号码"
            class="formItem"
            prop="legalPersonTelephone"
            v-if="
              industryCode === '03' ||
              industryCode === '04' ||
              industryCode === '05'
            "
          >
            <el-input v-model="form.legalPersonTelephone"></el-input>
          </el-form-item>
        </template>
        <!-- 内保行业和其他行业显示 end -->

        <!-- 注册地区 55-->
        <template v-if="form.institutionalCode !== '0406'">
          <el-form-item
            label="注册地区"
            class="formItem"
            prop="placeOfRegisterCode"
            v-if="industryCode !== '06' && industryCode !== '07' && industryCode !== '02'"
          >
            <el-cascader
              v-model="form.placeOfRegisterCode"
              :options="areaCityListArr"
              class="areaItem"
              style="width: 100%"
              popper-class="myCascaderplaceClass"
              @change="placeOfRegisterCodeChange"
            ></el-cascader>
          </el-form-item>
        </template>
        <!-- 注册地详细地址 55-->
        <template v-if="form.institutionalCode !== '0406'">
          <el-form-item
            label="注册地详细地址"
            class="formItem"
            prop="placeOfRegister.address"
            v-if="industryCode !== '06' && industryCode !== '07' && industryCode !== '02'"
          >
            <el-input
              v-model="form.placeOfRegister.address"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>

        <!-- 办公地区 55-->
        <template>
          <el-form-item
            label="办公地区"
            class="formItem"
            prop="placeOfBusinessCode"
            v-if="industryCode === '07' || industryCode === '02'"
          >
            <el-cascader
              v-model="form.placeOfBusinessCode"
              :options="areaCityListArr"
              class="areaItem"
              style="width: 100%"
              popper-class="myCascaderplaceClass"
              :props="{ checkStrictly: true }"
              @change="placeOfRegisterCodeChange"
            ></el-cascader>
          </el-form-item>
        </template>
        <!-- 办公地详细地址 55-->
        <template>
          <el-form-item
            label="办公地详细地址"
            class="formItem"
            prop="placeOfBusiness.address"
            v-if="industryCode === '07' || industryCode === '02'"
          >
            <el-input
              v-model="form.placeOfBusiness.address"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
      </div>
      <!-- 基本信息 区域 end-->

      <!-- 法人或负责人信息 区域 start-->
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode == '0102' ||
          form.institutionalCode == '0103' ||
          form.institutionalCode == '0104' ||
          !(
            industryCode === '03' ||
            industryCode === '04' ||
            industryCode === '05' ||
            industryCode === '06' ||
            industryCode === '07' ||
            industryCode === '02'
          )
        "
      >
        <span class="title"><i></i><strong>法人或负责人信息</strong></span>
        <!-- 法人或负责人姓名 -->
        <template>
          <el-form-item
            label="法人或负责人姓名"
            class="formItem"
            prop="legalPersonName"
          >
            <el-input
              v-model="form.legalPersonName"
              placeholder="请与营业执照保持一致"
            ></el-input>
          </el-form-item>
        </template>
      </div>
      <!-- 法人或负责人信息 区域 end-->

      <!-- 注册信息 区域 start-->
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode.slice(0, 2) == '02' ||
          form.institutionalCode == '0102' ||
          form.institutionalCode == '0103' ||
          form.institutionalCode == '0104' ||
          industryCode === '03' ||
          (industryCode === '04' && form.institutionalCode !== '0406') ||
          industryCode === '05'
        "
      >
        <span class="title"><i></i><strong>注册信息</strong></span>
        <!-- 注册资本（万元） -->
        <template>
          <el-form-item
            label="注册资本（万元）"
            class="formItem"
            prop="registeredCapital"
            v-if="
              industryCode !== '03' &&
              industryCode !== '04' &&
              industryCode !== '05'
            "
          >
            <el-input
              v-model="form.registeredCapital"
              placeholder="请与营业执照保持一致"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 统一社会信用代码 -->
        <template>
          <el-form-item
            label="统一社会信用代码"
            class="formItem"
            prop="unifySocialCreditCode"
          >
            <el-input
              v-model="form.unifySocialCreditCode"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 营业执照扫描件 -->
        <template>
          <el-form-item
            :label="
              form.institutionalCode == '0102' ||
              form.institutionalCode.slice(0, 2) == '02' ||
              industryCode === '03' ||
              industryCode === '04' ||
              industryCode === '05'
                ? '营业执照扫描件'
                : form.institutionalCode == '0103'
                ? '资质证照扫描件'
                : form.institutionalCode == '0104'
                ? '资质证照扫描件'
                : ''
            "
            class="formItem"
            ref="unifySocialCreditCodeFilefileListRef"
            prop="unifySocialCreditCodeFilefileList"
          >
            <el-upload
              action="#"
              class="avatar-uploaderApprove"
              :http-request="uploadImgUnifySocialCreditCodeFile"
              :limit="1"
              :file-list="form.unifySocialCreditCodeFilefileList"
              list-type="picture-card"
              :class="{
                SocialCreditCodeFileuploadDisabled:
                  SocialCreditCodeFileuploadDisabled,
              }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="form.unifySocialCreditCodeFile"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="
                      handlePictureCardPreviewUnifySocialCreditCodeFile(file)
                    "
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemoveUnifySocialCreditCodeFile(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>

            <el-dialog
              :visible.sync="unifySocialCreditCodeFileDialogVisible"
              :append-to-body="true"
            >
              <img width="100%" :src="form.unifySocialCreditCodeFile" alt="" />
            </el-dialog>
          </el-form-item>
        </template>
      </div>
      <!-- 注册信息 区域 end-->

      <!-- 资质信息--保安服务公司 区域 start-->
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode == '0102' || form.institutionalCode == '0103'
        "
      >
        <span class="title"><i></i><strong>资质信息</strong></span>
        <!-- 保安服务许可证号 -->
        <template>
          <el-form-item
            :label="
              form.institutionalCode == '0102'
                ? '保安服务许可证号'
                : form.institutionalCode == '0103'
                ? '保安培训许可（备案）证号'
                : ''
            "
            class="formItem"
            prop="servicePermitNumber"
          >
            <el-input
              v-model="form.servicePermitNumber"
              placeholder=""
            ></el-input>
          </el-form-item>
        </template>
        <!-- 批准文号 -->
        <template v-if="form.institutionalCode == '0102'">
          <el-form-item
            label="批准文号"
            class="formItem"
            prop="securityApprovalNumber"
          >
            <el-input
              v-model="form.securityApprovalNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 发证机关名称 -->
        <template>
          <el-form-item
            label="发证机关名称"
            class="formItem"
            prop="nameOfIssuingAuthority"
          >
            <el-input
              v-model="form.nameOfIssuingAuthority"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 保安服务许可证首次发证日期 -->
        <template>
          <el-form-item
            :label="
              form.institutionalCode == '0102'
                ? '保安服务许可证首次发证日期'
                : form.institutionalCode == '0103'
                ? '发证日期'
                : ''
            "
            class="formItem"
            prop="firstIssueServicePermit"
          >
            <el-date-picker
              v-model="form.firstIssueServicePermit"
              type="date"
              placeholder="选择年月日"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              style="width: 100%"
            >
            </el-date-picker>
          </el-form-item>
        </template>
        <!-- 服务范围 -->
        <template v-if="form.institutionalCode == '0102'">
          <el-form-item
            label="服务范围"
            class="formItem"
            prop="serviceScopeList"
          >
            <el-select
              multiple
              v-model="form.serviceScopeList"
              placeholder="请选择"
              @change="serviceScopeListChange"
              style="width: 100%"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="(item, index) in dictRegisterListObj.serviceScope"
                :key="index"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <!-- 培训内容 -->
        <template v-if="form.institutionalCode == '0103'">
          <el-form-item label="培训内容" class="formItem" prop="trainContent">
            <el-input
              v-model="form.trainContent"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 保安服务许可证扫描件 -->
        <template>
          <el-form-item
            :label="
              form.institutionalCode == '0102'
                ? '保安服务许可证扫描件'
                : form.institutionalCode == '0103'
                ? '保安培训许可（备案）证扫描件'
                : ''
            "
            class="formItem"
            ref="servicePermitAttachmentListRef"
            prop="servicePermitAttachmentList"
          >
            <el-upload
              action="#"
              class="avatar-uploaderApprove"
              :http-request="uploadImgservicePermitAttachment"
              :limit="1"
              :file-list="form.servicePermitAttachmentList"
              list-type="picture-card"
              :class="{
                servicePermitAttachmentDisabled:
                  servicePermitAttachmentDisabled,
              }"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="form.servicePermitAttachment"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="
                      handlePictureCardPreviewservicePermitAttachment(file)
                    "
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    class="el-upload-list__item-delete"
                    @click="handleRemoveservicePermitAttachment(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>

            <el-dialog
              :visible.sync="servicePermitAttachmentDialogVisible"
              :append-to-body="true"
            >
              <img width="100%" :src="form.servicePermitAttachment" alt="" />
            </el-dialog>
          </el-form-item>
        </template>
      </div>
      <!-- 资质信息 区域 end-->

      <!-- 监管归属 区域 start-->
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode == '0102' ||
          form.institutionalCode == '0103' ||
          form.institutionalCode == '0104' ||
          industryCode === '06'||industryCode === '04'
        "
      >
        <span class="title"><i></i><strong>监管归属</strong></span>
        <!-- 监管地区 -->
        <template>
          <el-form-item
            label="监管地区"
            class="formItem"
            prop="placeOfSuperviseCode"
          >
            <el-cascader
              v-model="form.placeOfSuperviseCode"
              :options="areaCityListArr"
              class="areaItem"
              style="width: 100%"
              @change="placeOfSuperviseCodeChange"
              popper-class="myCascaderplaceClass"
            ></el-cascader>
          </el-form-item>
        </template>
        <!-- 监管机构 -->
        <template v-if="form.placeOfSuperviseCode.length">
          <el-form-item
            label="监管机构"
            class="formItem"
            prop="superviseDepartIdArr"
          >
            <el-cascader
              :options="form.superviseDepartIdoptions"
              :props="{ checkStrictly: true, value: 'id', label: 'name' }"
              :show-all-levels="false"
              v-model="form.superviseDepartIdArr"
              style="width: 100%"
              @change="superviseDepartIdChange"
              popper-class="myCascaderDepartClass"
              ref="myCascader"
              clearable
            ></el-cascader>
          </el-form-item>
        </template>
      </div>
      <!-- 监管归属 区域 end-->

      <!-- 内保行业主管单位信息 start -->
      <div class="contentMainBox" v-if="industryCode === '04' && false">
        <span class="title"><i></i><strong>主管单位信息</strong></span>
        <template>
          <el-form-item
            label="所在地区"
            class="formItem"
            prop="placeOfCompetentUnitCode"
          >
            <el-cascader
              v-model="form.placeOfCompetentUnitCode"
              :options="areaCityListArr"
              class="areaItem"
              style="width: 100%"
              @change="placeOfCompetentUnitCodeChange"
              popper-class="myCascaderplaceClass"
              disabled
            ></el-cascader>
          </el-form-item>
        </template>
        <template>
          <el-form-item
            label="主管单位"
            class="formItem"
            prop="competentUnitCode"
          >
            <el-input
              :value="
                form.competentUnitCode === '01'
                  ? '卫生局'
                  : form.competentUnitCode === '02'
                  ? '文物局'
                  : form.competentUnitCode === '03' ||
                    form.competentUnitCode === '04'
                  ? '教育局'
                  : '金融监督管理局'
              "
              disabled
            ></el-input>
          </el-form-item>
        </template>
      </div>
      <!-- 内保行业主管单位信息 end -->

      <!-- 系统管理员 区域 start-->
      <div
        class="contentMainBox"
        v-if="
          form.institutionalCode == '0102' ||
          form.institutionalCode == '0103' ||
          form.institutionalCode == '0104' ||
          industryCode === '03' ||
          industryCode === '04' ||
          industryCode === '05' ||
          industryCode === '06' ||
          industryCode === '07' ||
          industryCode === '02'
        "
      >
        <span class="title"><i></i><strong>系统管理员</strong></span>
        <!-- 姓名 -->
        <template>
          <el-form-item label="姓名" class="formItem" prop="administrator.name">
            <el-input
              v-model="form.administrator.name"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 警号 -->
        <template>
          <el-form-item
            label="警号"
            class="formItem"
            prop="administrator.name"
            v-if="industryCode === '06'"
          >
            <el-input
              v-model="form.administrator.credentialNumber"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 手机号码 -->
        <template>
          <el-form-item
            label="手机号码"
            class="formItem"
            prop="administrator.telephone"
          >
            <el-input
              v-model="form.administrator.telephone"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
        </template>
        <!-- 身份证号 -->
        <template>
          <el-form-item
            label="身份证号"
            class="formItem"
            prop="administrator.credentialNumber"
            v-if="industryCode !== '06'"
          >
            <el-input
              v-model="form.administrator.credentialNumber"
              placeholder="请输入"
              disabled
            ></el-input>
          </el-form-item>
        </template>
      </div>
      <!-- 系统管理员 区域 end-->

      <!-- 分享单位 区域 start-->
      <!-- 内保行业显示 -->
      <div class="contentMainBox" v-if="industryCode === '04'">
        <span class="title"><i></i><strong>分享单位</strong></span>
        <template>
          <el-form-item
            label="单位名称"
            class="formItem"
            prop="shareOrganizationName"
          >
            <el-input v-model="form.shareOrganizationName" disabled></el-input>
          </el-form-item>
        </template>
        <template>
          <el-form-item
            label="分享人"
            class="formItem"
            prop="shareEmployeeName"
          >
            <el-input v-model="form.shareEmployeeName" disabled></el-input>
          </el-form-item>
        </template>
      </div>
      <!-- 分享单位 区域 end-->

      <!-- 动态扩展字段 区域 start-->
      <div
        class="contentMainBox"
        v-if="hasDynamicFields"
      >
        <span class="title"><i></i><strong>动态扩展字段</strong></span>
        <el-form-item
          v-for="(value, key) in form.dynamicFields.items"
          :key="key"
          :label="getDynamicFieldLabel(key)"
          class="formItem"
        >
          <el-input :value="value" disabled></el-input>
        </el-form-item>
      </div>
      <!-- 动态扩展字段 区域 end-->

      <!-- 保存 -->
      <div class="ApproveSubmit" v-if="form.institutionalCode">
        <el-button type="primary" @click="submitForm">保存</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>
import {
  cityOptionsListApi,
  dictRegisterListApi,
  placeOfSuperviseCodeChangeDepartIdApi,
  ApproveSubmitApi,
} from "@/api/staffApi.js";
import { CodeToText } from "element-china-area-data"; //省市区联动插件

export default {
  props: ["organizationId", "formList", "status", "industryCode"],
  data() {
    return {
      form: {
        institutionalCode: "",
        placeOfRegister: {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
          address: "",
        }, //注册地区
        placeOfcompetentUnit: {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
        },
        unifySocialCreditCodeFilefileList: [],
        unifySocialCreditCodeFile: "",
        servicePermitAttachmentList: [],
        servicePermitAttachment: "",
        placeOfSuperviseCode: [],
        placeOfSupervise: {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
          address: "",
        }, //监管地区
        administrator: {
          name: "",
          telephone: "",
          credentialType: 0, //默认居民身份证/户口簿
          credentialNumber: "",
        },
      },
      areaCityListArr: [], //省市区
      dictRegisterListObj: {}, //字典表
      unifySocialCreditCodeFileDialogVisible: false,
      servicePermitAttachmentDialogVisible: false,

      rules: {
        industryCode: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        institutionalCode: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        industryDetailType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        name: [{ required: true, message: "必填项", trigger: "blur" }],
        type: [{ required: true, message: "必填项", trigger: "change" }],
        telephone: [{ required: true, message: "必填项", trigger: "blur" }],
        economicType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        nature: [{ required: true, message: "必填项", trigger: "change" }],
        placeOfRegisterCode: [
          { required: true, message: "必填项", trigger: "change" },
        ], //55
        placeOfRegister: {
          address: [{ required: true, message: "必填项", trigger: "change" }],
        },
        placeOfBusinessCode: [
          { required: true, message: "必填项", trigger: "change" },
        ], //55
        placeOfBusiness: {
          address: [{ required: true, message: "必填项", trigger: "blur" }],
        },
        parentName: [{ required: true, message: "必填项", trigger: "blur" }],
        parentCertificateType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        parentCertificateNumber: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        parentLegalPersonName: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        parentLegalPersonTelephone: [
          { required: true, message: "必填项", trigger: "change" },
        ],

        legalPersonName: [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        legalPersonTelephone: [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        legalPersonCredentialType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        legalPersonCredentialNumber: [
          { required: true, message: "必填项", trigger: "blur" },
        ],
        legalPersonNationality: [
          { required: true, message: "必填项", trigger: "change" },
        ],

        registeredCapital: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        fixedCapital: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        annualSalesVolume: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        annualProfitTax: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        certificateType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        unifySocialCreditCode: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        unifySocialCreditCodeFile: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        servicePermitNumber: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityApprovalNumber: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        nameOfIssuingAuthority: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        firstIssueServicePermit: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        serviceScopeList: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        servicePermitAttachment: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityPreparednessRating: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityArmedRating: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securitySafetyDefenseRating: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        isRiskAssessment: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        placeOfSuperviseCode: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        superviseDepartId: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        superviseDepartIdArr: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        administratorname: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        administratortelephone: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        administratorcredentialType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        administratorcredentialNumber: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        unifySocialCreditCodeFilefileList: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        servicePermitAttachmentList: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        administrator: {
          name: [{ required: true, message: "必填项", trigger: "change" }],
          telephone: [{ required: true, message: "必填项", trigger: "change" }],
          credentialType: [
            { required: true, message: "必填项", trigger: "change" },
          ],
          credentialNumber: [
            { required: true, message: "必填项", trigger: "change" },
          ],
        },

        securityPersonName: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityPersonTelephone: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityPersonCredentialType: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        securityPersonCredentialNumber: [
          { required: true, message: "必填项", trigger: "change" },
        ],

        trainContent: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        numberOfSecurityGuards: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        isPublicSecuritySecurity: [
          { required: true, message: "必填项", trigger: "change" },
        ],
        isPropertyEnterprise: [
          { required: true, message: "必填项", trigger: "change" },
        ],

        natureOfSelfRecruitedUnits: [
          { required: true, message: "必填项", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    SocialCreditCodeFileuploadDisabled() {
      return this.form.unifySocialCreditCodeFilefileList.length > 0;
    },
    servicePermitAttachmentDisabled() {
      return this.form.servicePermitAttachmentList.length > 0;
    },
    hasDynamicFields() {
      return (
        this.form &&
        this.form.dynamicFields &&
        this.form.dynamicFields.items &&
        Object.keys(this.form.dynamicFields.items).length > 0
      );
    },
  },
  async mounted() {
    await this.areaCityList(); //省市区层级
    await this.dictRegisterList(); //所有字典表
    if (Object.keys(this.formList)) {
      this.ApproveDetailList(); //回显详情列表
    }
    console.log(888);
  },
  methods: {
    ApproveDetailList() {
      let obj = JSON.stringify(this.formList);
      let obj2 = JSON.parse(obj);
      console.info("approve detail", obj2);
      console.info("dynamicFields", obj2.dynamicFields);
      this.$set(this, "form", obj2);
      this.$set(this.form, "unifySocialCreditCodeFilefileList", []);
      this.$set(this.form, "servicePermitAttachmentList", []);
      // 注册地区
      if (!this.form.placeOfRegister) {
        this.form.placeOfRegister = {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
          address: "",
        };
      }
      // 内保行业主管单位信息
      if (!this.form.placeOfCompetentUnit) {
        this.form.placeOfCompetentUnit = {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
          address: "",
        };
      }
      // 保安行业监管机构信息
      if (!this.form.placeOfSupervise) {
        this.form.placeOfSupervise = {
          province: { code: "", name: "" },
          city: { code: "", name: "" },
          district: { code: "", name: "" },
          address: "",
        };
      }
      if (!this.form.administrator) {
        this.form.administrator = {
          name: "",
          telephone: "",
        };
      }
      // 注册地区数据处理
      if (this.form.placeOfRegister && Object.keys(this.form.placeOfRegister)) {
        // let arr = [this.form.placeOfRegister.province.code, this.form.placeOfRegister.city.code, this.form.placeOfRegister.district.code]
        let arr = [];
        if (
          this.form.placeOfRegister.province &&
          this.form.placeOfRegister.province.code
        ) {
          arr.push(this.form.placeOfRegister.province.code);
        }
        if (
          this.form.placeOfRegister.city &&
          this.form.placeOfRegister.city.code
        ) {
          arr.push(this.form.placeOfRegister.city.code);
        }
        if (
          this.form.placeOfRegister.district &&
          this.form.placeOfRegister.district.code
        ) {
          arr.push(this.form.placeOfRegister.district.code);
        }
        this.$set(this.form, "placeOfRegisterCode", arr);
      }
      // 办公地区、经营地区数据处理
      if (this.form.placeOfBusiness && Object.keys(this.form.placeOfBusiness)) {
        let arr = [];
        if (
          this.form.placeOfBusiness.province &&
          this.form.placeOfBusiness.province.code
        ) {
          arr.push(this.form.placeOfBusiness.province.code);
        }
        if (
          this.form.placeOfBusiness.city &&
          this.form.placeOfBusiness.city.code
        ) {
          arr.push(this.form.placeOfBusiness.city.code);
        }
        if (
          this.form.placeOfBusiness.district &&
          this.form.placeOfBusiness.district.code
        ) {
          arr.push(this.form.placeOfBusiness.district.code);
        }
        this.$set(this.form, "placeOfBusinessCode", arr);
      }
      // 内保行业主管单位所在地区
      if (
        this.form.placeOfCompetentUnit &&
        Object.keys(this.form.placeOfCompetentUnit)
      ) {
        let arr = [];
        if (
          this.form.placeOfCompetentUnit.province &&
          this.form.placeOfCompetentUnit.province.code
        ) {
          arr.push(this.form.placeOfCompetentUnit.province.code);
        }
        if (
          this.form.placeOfCompetentUnit.city &&
          this.form.placeOfCompetentUnit.city.code
        ) {
          arr.push(this.form.placeOfCompetentUnit.city.code);
        }
        if (
          this.form.placeOfCompetentUnit.district &&
          this.form.placeOfCompetentUnit.district.code
        ) {
          arr.push(this.form.placeOfCompetentUnit.district.code);
        }
        this.$set(this.form, "placeOfCompetentUnitCode", arr);
      }
      // 保安行业监管地区
      if (
        this.form.placeOfSupervise &&
        Object.keys(this.form.placeOfSupervise)
      ) {
        console.log("keys11", Object.keys(this.form.placeOfSupervise));
        let arr = [];
        // let arr=['900000','900101']
        if (
          this.form.placeOfSupervise.province &&
          this.form.placeOfSupervise.province.code
        ) {
          arr.push(this.form.placeOfSupervise.province.code);
        }
        if (
          this.form.placeOfSupervise.city &&
          this.form.placeOfSupervise.city.code
        ) {
          arr.push(this.form.placeOfSupervise.city.code);
        }
        if (
          this.form.placeOfSupervise.district &&
          this.form.placeOfSupervise.district.code
        ) {
          arr.push(this.form.placeOfSupervise.district.code);
        }
        this.$set(this.form, "placeOfSuperviseCode", arr);

        console.log("this.form11", this.form);
      }
      // debugger
      if (this.form.placeOfSuperviseCode) {
        this.placeOfSuperviseCodeChange(this.form.placeOfSuperviseCode);
      }
      if (this.form.unifySocialCreditCodeFile) {
        this.$set(this.form, "unifySocialCreditCodeFilefileList", [
          { url: this.form.unifySocialCreditCodeFile },
        ]);
      }
      if (this.form.servicePermitAttachment) {
        this.$set(this.form, "servicePermitAttachmentList", [
          { url: this.form.servicePermitAttachment },
        ]);
      }
    },

    areaCityList() {
      return new Promise((resolve) => {
        cityOptionsListApi().then((response) => {
          console.log(response);
          console.log(5);
          this.areaCityListArr = response.data;
          console.log("22", this.areaCityListArr);
          // this.form.placeOfSuperviseCode = ['110000', '110100', '110101']//['100000', '101500', '101500']
          resolve(response);
        });
      });
    },
    dictRegisterList() {
      return new Promise((resolve) => {
        dictRegisterListApi().then((response) => {
          console.log(6);
          console.log(response);
          this.dictRegisterListObj = response.data;
          resolve(response);
        });
      });
    },
    placeOfRegisterCodeChange(value) {
      console.log(value);
      // this.form.placeOfRegister = {
      //     province: { code: value[0], name: CodeToText[value[0]] },
      //     city: { code: value[1], name: CodeToText[value[1]] },
      //     district: { code: value[2], name: CodeToText[value[2]] },
      // }
    },
    placeOfCompetentUnitCodeChange(value) {
      console.log(value);
      // this.form.placeOfRegister = {
      //     province: { code: value[0], name: CodeToText[value[0]] },
      //     city: { code: value[1], name: CodeToText[value[1]] },
      //     district: { code: value[2], name: CodeToText[value[2]] },
      // }
    },
    //营业执照扫描件-预览
    handlePictureCardPreviewUnifySocialCreditCodeFile() {
      this.unifySocialCreditCodeFileDialogVisible = true;
    },
    //营业执照扫描件-删除
    handleRemoveUnifySocialCreditCodeFile() {
      this.$set(this.form, "unifySocialCreditCodeFile", "");
      this.$set(this.form, "unifySocialCreditCodeFilefileList", []);
      console.log("this.form", this.form);
    },
    //营业执照扫描件-上传
    uploadImgUnifySocialCreditCodeFile(e) {
      console.log("e", e);
      var that = this;
      var domainId = "default"; //保存本地企业id
      let now = new Date();
      let y = now.getFullYear();
      let m =
        now.getMonth() + 1 < 10
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1;
      let d = now.getDate();
      let md = m + "-" + d;
      var objectKey = `uploads/${y}/${md}/${domainId}/${now.getTime()}/${
        e.file.name
      }`;
      var obs = new ObsClient({
        access_key_id: ak,
        secret_access_key: sk,
        server: urlserver,
        timeout: 60 * 5,
      });
      obs
        .putObject({
          Bucket: BucketName,
          Key: objectKey,
          SourceFile: e.file, //获取file文件
        })
        .then(function (result) {
          console.log(result);

          if (result.CommonMsg.Status < 300) {
            that.$message({ type: "success", message: "上传成功" });
            console.log("Create object:" + objectKey + " successfully!\n");
            var httpurl = `https://${BucketName}.${urlserver}/${objectKey}`;
            httpurl = convertCdnPath(httpurl);
            console.log("文件上传", httpurl);
            that.form.unifySocialCreditCodeFilefileList = [{ url: httpurl }];
            console.log(that.form);
            that.form.unifySocialCreditCodeFile = httpurl;
            that.$refs.unifySocialCreditCodeFilefileListRef.clearValidate(); //上传完清除校验
          }
        });
    },

    //许可证扫描件-预览
    handlePictureCardPreviewservicePermitAttachment() {
      this.servicePermitAttachmentDialogVisible = true;
    },
    //许可证扫描件-删除
    handleRemoveservicePermitAttachment() {
      this.$set(this.form, "servicePermitAttachment", "");
      this.$set(this.form, "servicePermitAttachmentList", []);
      console.log("this.form", this.form);
    },
    //许可证扫描件-上传
    uploadImgservicePermitAttachment(e) {
      console.log("e", e);
      var that = this;
      var domainId = "default"; //保存本地企业id
      let now = new Date();
      let y = now.getFullYear();
      let m =
        now.getMonth() + 1 < 10
          ? "0" + (now.getMonth() + 1)
          : now.getMonth() + 1;
      let d = now.getDate();
      let md = m + "-" + d;
      var objectKey = `uploads/${y}/${md}/${domainId}/${now.getTime()}/${
        e.file.name
      }`;
      var obs = new ObsClient({
        access_key_id: ak,
        secret_access_key: sk,
        server: urlserver,
        timeout: 60 * 5,
      });
      obs
        .putObject({
          Bucket: BucketName,
          Key: objectKey,
          SourceFile: e.file, //获取file文件
        })
        .then(function (result) {
          console.log(result);

          if (result.CommonMsg.Status < 300) {
            that.$message({ type: "success", message: "上传成功" });
            console.log("Create object:" + objectKey + " successfully!\n");
            var httpurl = `https://${BucketName}.${urlserver}/${objectKey}`;
            httpurl = convertCdnPath(httpurl);
            console.log("文件上传", httpurl);
            that.form.servicePermitAttachmentList = [{ url: httpurl }];
            console.log(that.form);
            that.form.servicePermitAttachment = httpurl;
            that.$refs.unifySocialCreditCodeFilefileListRef.clearValidate(); //上传完清除校验
          }
        });
    },
    serviceScopeListChange() {},
    getDynamicFieldLabel(key) {
      if (
        this.form.dynamicFields &&
        this.form.dynamicFields.labels &&
        this.form.dynamicFields.labels[key]
      ) {
        return this.form.dynamicFields.labels[key];
      }
      return key;
    },
    //根据监管地区改变查询监管机构接口
    placeOfSuperviseCodeChange(value) {
      console.log(value);
      console.log(
        "this.form.superviseDepartIdArr",
        this.form.superviseDepartIdArr
      );
      this.form.placeOfSupervise = {
        province: { code: value[0], name: CodeToText[value[0]] },
        city: { code: value[1], name: CodeToText[value[1]] },
        district: { code: value[2], name: CodeToText[value[2]] },
      };
      console.log(this.form.placeOfSuperviseCode);
      console.log(this.form);
      if (this.form.placeOfSuperviseCode) {
        //监管地区--省市区编码
        let provideCode = this.form.placeOfSuperviseCode[0]; //获取省，根据省获取监管机构列表
        placeOfSuperviseCodeChangeDepartIdApi(
          provideCode,
          this.industryCode
        ).then((response) => {
          console.log("监管机构", response);
          if (response.data) {
            this.$set(this.form, "superviseDepartIdoptions", [response.data]); //数组
            console.log(
              "this.form.superviseDepartIdoptions",
              this.form.superviseDepartIdoptions
            );
            if (
              Object.keys(this.formList) &&
              this.form.superviseDepartIdoptions &&
              this.form.superviseDepartId
            ) {
              let arr = this.getParentsByIdsuperviseDepartIdArr(
                this.form.superviseDepartIdoptions,
                this.form.superviseDepartId
              ); //回显监管机构，拼接superviseDepartIdArr数组
              console.log("arr", arr);
              // this.form.superviseDepartIdArr = arr
              this.$set(this.form, "superviseDepartIdArr", arr);
              console.log("this.form88", this.form);
              // console.log('this.form.superviseDepartIdArr2', this.form.superviseDepartIdArr)
            }
          } else {
            this.$set(this.form, "superviseDepartIdoptions", []);
            this.$set(this.form, "superviseDepartIdArr", []);
          }
        });
      }
    },
    //下拉选择监管机构获取名称
    superviseDepartIdChange(value) {
      console.log(value);
      let labelName = this.$refs.myCascader.getCheckedNodes()[0].pathLabels; //获取el-cascader选中的中文label
      console.log(labelName);
      this.form.superviseDepartId = value && value[value.length - 1];
      this.form.superviseDepartName = labelName[labelName.length - 1];
      console.log(this.form);
      console.log(
        "this.form.superviseDepartIdArr11",
        this.form.superviseDepartIdArr
      );
    },
    getParentsByIdsuperviseDepartIdArr(list, id) {
      // debugger
      for (let i in list) {
        if (list[i] && list[i].id == id) {
          //查询到就返回该数组对象的value
          return [list[i].id];
        }
        if (list[i].children) {
          let node = this.getParentsByIdsuperviseDepartIdArr(
            list[i].children,
            id
          );
          // debugger
          if (node !== undefined) {
            //查询到把父节把父节点加到数组前面
            node.unshift(list[i].id);
            return node;
          }
        }
      }
    },
    //根据监管地区，传递省编码，获取监管机构列表，在根据监管机构编码找出监管机构名称
    async superviseDepartCodeName() {
      let provideCode = this.form.placeOfSuperviseCode[0];
      await placeOfSuperviseCodeChangeDepartIdApi(
        provideCode,
        this.industryCode
      ).then((response) => {
        if (response.data) {
          this.getDepartNameForDepartCode([response.data]); //递归遍历获取监管名称
          console.log("this.form12 xx", this.form);
        }
      });
    },
    //递归遍历获取监管名称
    getDepartNameForDepartCode(list) {
      for (let i in list) {
        if (list[i] && list[i].id == this.form.superviseDepartId) {
          return this.$set(this.form, "superviseDepartName", list[i].name);
        }
        if (list[i].children) {
          this.getDepartNameForDepartCode(list[i].children);
        }
      }
    },
    //保存
    async submitForm() {
      if (this.status == "审批通过") {
        this.$message({ type: "error", message: "审批通过不可以修改" });
        return;
      }
      console.log(this.form);
      // 注册地区
      if (this.form.placeOfRegisterCode) {
        let value = this.form.placeOfRegisterCode;
        this.form.placeOfRegister = {
          province: { code: value[0], name: CodeToText[value[0]] },
          city: { code: value[1], name: CodeToText[value[1]] },
          district: { code: value[2], name: CodeToText[value[2]] },
          address: this.form.placeOfRegister.address,
        };
      }

      // 办公地区、经营地区数据处理
      if (this.form.placeOfBusinessCode) {
        let value = this.form.placeOfBusinessCode;
        this.form.placeOfBusiness = {
          province: { code: value[0], name: CodeToText[value[0]] },
          city: { code: value[1], name: CodeToText[value[1]] },
          district: { code: value[2], name: CodeToText[value[2]] },
          address: this.form.placeOfBusiness.address,
        };
      }

      // 内保行业主管单位所在地区
      if (this.form.placeOfCompetentUnitCode) {
        let value = this.form.placeOfCompetentUnitCode;
        this.form.placeOfCompetentUnit = {
          province: { code: value[0], name: CodeToText[value[0]] },
          city: { code: value[1], name: CodeToText[value[1]] },
          district: { code: value[2], name: CodeToText[value[2]] },
          address: this.form.placeOfCompetentUnit.address,
        };
      }

      // 保安行业监管地区
      if (this.form.placeOfSuperviseCode) {
        let value = this.form.placeOfSuperviseCode;
        this.form.placeOfSupervise = {
          province: { code: value[0], name: CodeToText[value[0]] },
          city: { code: value[1], name: CodeToText[value[1]] },
          district: { code: value[2], name: CodeToText[value[2]] },
        };
      }
      if (this.form.superviseDepartIdArr) {
        this.form.superviseDepartId =
          this.form.superviseDepartIdArr[
            this.form.superviseDepartIdArr.length - 1
          ];
      }
      this.$refs["ruleForm"].validate(async (valid) => {
        if (valid) {
          if (!this.form.superviseDepartName) {
            await this.superviseDepartCodeName(); // 根据监管地区，传递省编码，获取监管机构列表，在根据监管机构编码找出监管机构名称
          }
          console.log("this.form11", this.form);
          let obj = JSON.stringify(this.form);
          let obj2 = JSON.parse(obj);
          delete obj2.unifySocialCreditCodeFilefileList;
          delete obj2.servicePermitAttachmentList;
          delete obj2.superviseDepartIdoptions;
          delete obj2.placeOfSuperviseCode;
          delete obj2.superviseDepartIdArr;
          await ApproveSubmitApi(obj2, this.organizationId).then((response) => {
            console.log("提交", response);
            if (response.status == 200) {
              this.$message({ type: "success", message: "保存成功" });
              console.log("this", this);
              this.$parent.$parent.drawer = false;
              this.$parent.$parent.approveOrgTableList(); //刷新列表
            }
          });
        } else {
          this.$message({ type: "error", message: "请输入必填项" });
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.ApproveDetailBox {
  padding: 10px;
  font-size: 14px;
  .contentMainBox {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    width: 100%;

    .title {
      margin-bottom: 10px;
      text-align: left;
      display: flex;

      i {
        width: 2px;
        height: 20px;
        background: #1c79ff;
        margin-right: 10px;
      }

      strong {
        color: #333333;
      }
    }
  }
  .ApproveSubmit {
    bottom: 10px;
    width: 100%;
    z-index: 100;
    .el-button {
      width: 100%;
    }
  }
}
</style>
<style lang="scss">
.avatar-uploaderApprove .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}
.avatar-uploaderApprove .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.avatar-uploaderApprove .el-upload-list {
  display: inline-block;
  margin-top: 40px;
}
.avatar-uploaderApprove .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
  margin-top: 40px;
}
.avatar-uploaderApprove .el-upload-list--picture-card .el-upload-list__item {
  width: 80px;
  height: 80px;
}
.SocialCreditCodeFileuploadDisabled {
  .el-upload--picture-card {
    display: none;
  }
}
.servicePermitAttachmentDisabled {
  .el-upload--picture-card {
    display: none;
  }
}
</style>
