<template>
  <el-dialog
    class="shopAuditDetails-container"
    custom-class="center-dialog"
    :fullscreen="true"
    :title="title"
    top="0vh"
    :visible.sync="showDialog"
    v-loading.fullscreen.lock="showLoading"
    @close="close"
  >
    <div class="item-content" v-if="!showLoading">
      <div class="item-title">基本信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">入驻编号</div>
          <el-input
            class="item-input"
            v-model="form.id"
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺 ID</div>
          <el-input
            class="item-input"
            v-model="form.store_id"
            clearable
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺名称</div>
          <el-input
            class="item-input"
            style="width: 300px;margin-right: 0;"
            v-model="form.store_name"
            clearable
            :disabled="isReadonly"
          />
          <el-button v-if="!isReadonly && form.store_name != sourceFormData.store_name" type="primary" style="margin-left: 20px;" @click="handlerCheckShowName">检查名字</el-button>
        </div>

        <div class="item-block" style="margin-left: 30px;">
          <div class="item-lable">经营品类</div>
          <el-input
            class="item-input"
            v-model="form.biz_category"
            clearable
            :disabled="isReadonly"
          />
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">联系人姓名</div>
          <el-input
            class="item-input"
            v-model="form.contact_name"
            clearable
            :disabled="isReadonly"
          />
        </div>
        <div class="item-block">
          <div class="item-lable">登录手机号</div>
          <el-input
            class="item-input"
            v-model="form.login_mobile"
            clearable
            :disabled="true"
            disabled
          />
        </div>
      </div>
      <div class="item-title">地址信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺所在的省</div>
          <el-select class="item-input"
           v-model="areaCode" filterable placeholder="请选择" :disabled="isReadonly"
           @change="handerChangeArea"
           >
            <el-option
              v-for="(item,index) of areaData"
              :key="item.id"
              :label="item.name"
              :value="Number(item.id)">
            </el-option>
          </el-select>
          <!-- <el-input
            class="item-input"
            v-model="form.province_nmae"
            clearable
            :disabled="isReadonly"
          /> -->
        </div>
        <div class="item-block">
          <div class="item-lable">店铺所在的市</div>
          <el-select 
           class="item-input"
           v-model="cityCode" 
           filterable 
           placeholder="请选择" 
           :disabled="isReadonly"
           @change="handerChangeCity"
           >
            <el-option
              v-for="item in cityData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <!-- <el-input
            class="item-input"
            v-model="form.city_name"
            clearable
            :disabled="isReadonly"
          /> -->
        </div>
        <div class="item-block">
          <div class="item-lable">店铺所在的县区</div>
           <el-select 
            class="item-input"
            v-model="provinceCode" 
            filterable 
            placeholder="请选择" 
            :disabled="isReadonly"
             @change="handerChangeProvince"
           >
            <el-option
              v-for="item in provinceData"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
         
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺经度</div>
          <el-input
            class="item-input"
            v-model="form.store_longitude"
            clearable
            :disabled="isReadonly"
            disabled
          />
        </div>
        <div class="item-block">
          <div class="item-lable">店铺维度</div>
          <el-input
            class="item-input"
            v-model="form.store_latitude"
            clearable
            :disabled="isReadonly"
            disabled
          />
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺的详细地址</div>
          <el-select class="item-input"
            filterable
            remote
            reserve-keyword
            clearable
            :remote-method="handerGetBaiduSuggestion"
            :loading="loadingBaiduSuggestion"
            style="width: 580px"
            @change="handerChangeStoreAddress"
            v-model="form.store_address"  
            placeholder="请输入地址后选择" 
            :disabled="isReadonly || cityCode == '' || provinceCode == ''"
           >
            <el-option
              v-for="item in searchAddressList"
              :key="item.id"
              :label="item.name"
              :value="item">
            </el-option>
          </el-select>
          <!-- <el-input
            class="item-input"
            v-model="form.store_address"
            style="width: 580px"
            clearable
            :disabled="isReadonly"
            @input="handerGetBaiduSuggestion"
          /> -->
        </div>
      </div>
      <div class="item-info" style="margin: 40px 0">
        <div class="item-block">
          <div class="item-lable">店铺门面正面图片</div>
          <div>
          <el-image
            style="margin-right: 20px; width: 500px; height: 300px"
            :src="
              form.front_facade_image ||
              require('@/assets/index_images/image.jpg')
            "
            :preview-src-list="srcList1"
            lazy
          ></el-image>
            <div class="upload-btn"> 
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :data="uploadParams"
                :show-file-list="false"
                :limit="1"
                :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'front_facade_image')"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
              </el-upload>
            </div>
          </div>
          <div class="item-lable">店铺门面环境图片</div>
          <div>
          <el-image
            style="margin-right: 20px; width: 500px; height: 300px"
            :src="
              form.environment_image ||
              require('@/assets/index_images/image.jpg')
            "
            :preview-src-list="srcList2"
            lazy
          ></el-image>
            <div  class="upload-btn"> 
             <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :data="uploadParams"
                :show-file-list="false"
                :limit="1"
                :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'environment_image')"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="item-title">到账/结算 &nbsp;信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">到账比例</div>
          <el-input
            class="item-input"
            v-model="form.split_ratio"
            clearable
            :disabled="isReadonly"
          >
            <template slot="append">%</template>
          </el-input>
        </div>
         <div class="item-block" >
          <div class="item-lable"> 
            <label style="margin-right: 20px;">结算类型：</label>
            <el-radio v-model="form.settlement_method" :label="1" :disabled="isReadonly">次日结算</el-radio>
          </div>
        </div>
      
      </div>
      <div class="item-title">入驻类型</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">入驻类型</div>
          <el-input
            class="item-input"
            v-model="entityType[form.entity_type - 1]"
            clearable
            :disabled="isReadonly"
            disabled
          ></el-input>
        </div>
      </div>
      <div class="item-title">证件信息</div>
      <div v-if="form.entity_type == 1">
        <div class="item-info">
        <div class="item-block">
          <div class="item-lable">姓名</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_name"
              clearable
              :disabled="isReadonly"
            ></el-input>
        </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">公司名</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_company"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">营业执照编号</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_number"
              style="width: 600px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">营业执照开始有效日期</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_period_begin"
              style="width: 600px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">营业执照结束有效日期</div>
            <el-input
              class="item-input"
              v-model="form.biz_license_period_end"
              style="width: 600px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block" style="align-items: flex-start;">
            <div class="item-lable">营业执照图片</div>
            <div>
            <el-image
              style="margin-right: 20px; width: 500px; height: 300px"
              :src="
                form.biz_license_image ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList3"
              lazy
            ></el-image>
             <div class="upload-btn"> 
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :data="uploadParams"
                :limit="1"
                :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'biz_license_image')"
                :before-upload="beforeUpload"
                :on-progress="progressUpload"
                :show-file-list="false"
                >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
              </el-upload>
              </div>
            </div>
            <div class="item-lable">经营范围</div>
            <el-input
              type="textarea"
              class="item-input"
              v-model="form.biz_license_content"
              style="width: 600px"
              clearable
              :autosize="{ minRows: 15 }"
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <!-- <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">许可证类型</div>
              <el-select class="item-input"
                filterable
                v-model="form.license_type"  
                placeholder="请输入地址后选择" 
                :disabled="isReadonly"
              >
                <el-option
                  v-for="item in licenseType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">许可证编号</div>
            <el-input
              class="item-input"
              v-model="form.license_number"
              style="width: 600px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div> -->
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">许可证图片</div>
            <div class="item-other-license-list">
              <el-upload
                class="avatar-uploader"
                list-type="picture-card"
                :on-change="handleUploadChange"
                :action="uploadUrl"
                :data="uploadParams"
                :file-list="form.other_license_list_2"
                :limit="2"
                :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'license_image')"
                :on-remove="handerRemoveUpload"
                :before-upload="beforeUpload"
                :on-preview="handlePictureCardPreview"
                :on-exceed="handleExceed"
                :disabled="isReadonly"
                >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false" :append-to-body="true">
                <img class="" width="100%" height="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <div class="other_license_list" v-if="form.other_license_list.length > 0">
                <div class="other_license_list_item" v-for="(item,index) of form.other_license_list">
                  <el-select 
                    class="item-input"
                    style="width: 180px;"
                    v-model="item.type"
                    placeholder="请选择"
                    :disabled="isReadonly"
                    @change="handerChangeProvince"
                  >
                    <el-option
                      v-for="(group,index2) of licenseType"
                      :key="index2"
                      :label="group.name"
                      :value="group.id">
                    </el-option>
                  </el-select>
                  <el-input
                    class="item-input"
                    v-model="item.number"
                    style="width: 180px;margin-top: 20px;"
                    clearable
                     placeholder="请输入许可证编号"
                    :disabled="isReadonly"
                  ></el-input>
                </div>
              </div>
            </div>
         
            <!-- <el-image
              v-for="(item, index) of form.license_image"
              :key="index"
              style="margin-right: 20px; width: 500px; height: 200px"
              :src="item || require('@/assets/index_images/image.jpg')"
              :preview-src-list="srcList4"
              lazy
            ></el-image> -->
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="width: 154px;">法人姓名</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_name"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="width: 154px;">法人手机号</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_mobile"
               style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="width: 154px;">法人身份证号码</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_id_number"
               style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="width: 154px;">法人身份证地址</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_id_addr"
               style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">法人身份证开始有效日期</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_id_period_begin"
               style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable">法人身份证结束有效日期</div>
            <el-input
              class="item-input"
              v-model="form.legal_person_id_period_end"
               style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">法人身份证正面图片</div>
            <div>
              <el-image
                style="margin-right: 20px; width: 500px; height: 300px"
                :src="
                  form.legal_person_id_images ||
                  require('@/assets/index_images/image.jpg')
                "
                :preview-src-list="srcList5"
                lazy
              ></el-image>
              <div class="upload-btn"> 
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :data="uploadParams"
                  :limit="1"
                  :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'legal_person_id_images')"
                  :before-upload="beforeUpload"
                  :on-progress="progressUpload"
                  :show-file-list="false"
                  >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                </el-upload>
              </div>
            </div>
          </div>
          <div class="item-block">
            <div class="item-lable">法人身份证反面图片</div>
            <div>
              <el-image
                style="margin-right: 20px; width: 500px; height: 300px"
                :src="
                  form.legal_person_id_images2 ||
                  require('@/assets/index_images/image.jpg')
                "
                :preview-src-list="srcList6"
                lazy
              ></el-image>
               <div class="upload-btn"> 
                <el-upload
                  class="upload-demo"
                  :action="uploadUrl"
                  :data="uploadParams"
                  :limit="1"
                  :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'legal_person_id_images2')"
                  :before-upload="beforeUpload"
                  :on-progress="progressUpload"
                  :show-file-list="false"
                  >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
                </el-upload>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="" v-if="form.entity_type == 2">
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="min-width: 154px;">姓名</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_name"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="min-width: 154px;">个人入驻时的身份证号码</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_number"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="min-width: 154px;">个人入驻时的身份证地址</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_addr"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="min-width: 154px;">身份证开始有效日期</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_period_begin"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info">
          <div class="item-block">
            <div class="item-lable" style="min-width: 154px;">身份证结束有效日期</div>
            <el-input
              class="item-input"
              v-model="form.individual_id_period_end"
              style="width: 300px"
              clearable
              :disabled="isReadonly"
            ></el-input>
          </div>
        </div>
        <div class="item-info" style="margin: 40px 0">
          <div class="item-block">
            <div class="item-lable">个人入驻时身份证正面图片</div>
            <el-image
              style="margin-right: 20px; width: 500px; height: 300px"
              :src="
                form.individual_id_images ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList7"
              lazy
            ></el-image>
          </div>
          <div class="item-block">
            <div class="item-lable">个人入驻时身份证反面图片</div>
            <el-image
              style="margin-right: 20px; width: 500px; height: 300px"
              :src="
                form.individual_id_images2 ||
                require('@/assets/index_images/image.jpg')
              "
              :preview-src-list="srcList8"
              lazy
            ></el-image>
          </div>
        </div>
      </div>
      <div class="item-title">银行信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">开户银行</div>
          <el-input
            class="item-input"
            v-model="form.bank_name"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
        </div>
        <!-- <div class="item-block">
          <div class="item-lable">开户银行的支行名称</div>
          <el-input
            class="item-input"
            v-model="form.bank_branch_name"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
        </div> -->
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">收款账户姓名</div>
          <el-input
            class="item-input"
            v-model="form.account_holder_name"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">收款账户号码</div>
          <el-input
            class="item-input"
            v-model="form.account_number"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
        </div>
      </div>
      <div class="item-title">合同信息</div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable" style="width: 126px">合同编号</div>
          <el-input
            class="item-input"
            v-model="form.lkl_ec_no"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">正式合同的下载地址</div>
          <el-input
            class="item-input"
            v-model="form.contract_download_url"
            style="width: 400px"
            clearable
            :disabled="isReadonly"
          ></el-input>
          <el-button v-if="form.contract_download_url" type="primary" @click="downloadFile" :loading="downloading"> {{ downloading ? '下载中...' : '下载合同' }}</el-button>
        </div>
      </div>
      <div class="item-title">审核信息</div>
      
      <el-steps  :space="200" :active="calculateActiveStep" finish-status="success" align-center class="audit-steps">
        <el-step title="审核状态" :description="formatApprovalStatus(form.approval_status)"></el-step>
        <el-step title="合同状态" :description="form.has_ec_signed == 1 ? '成功' : '未签署'"></el-step>
        <el-step title="进件状态" :description="form.has_apply_mer == 1 ? '成功' : '未进件'"></el-step>
        <el-step title="分账业务申请状态" :description="form.has_apply_split == 1 ? '已申请' : '未申请'"></el-step>
        <el-step title="分账接收方绑定状态" :description="form.has_bind_receiver == 1 ? '已绑定' : '未绑定'"></el-step>
        <el-step title="店铺创建状态" :description="form.store_status == 1 ? '已创建' : '未创建'"></el-step>
        <el-step title="入驻完成" :description="form.approval_status == 1 ? '已完成' : '未完成'"></el-step>
      </el-steps>
      <!-- <div class="item-info">
        <div class="item-block">
          <div class="item-lable">审批状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color:approvalStatusClass(form.approval_status)}"
          >
            {{  formatApprovalStatus(form.approval_status) }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">合同状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_ec_signed == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_ec_signed == 1 ? '成功' : '未签署' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">进件状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_mer == 1 ? '#48c978': 'red'}"
          >
             {{  form.has_apply_mer == 1 ? '成功' : '未进件' }}
          </span>
        </div>
      </div>

      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">店铺创建状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.store_status == 1 ? '#48c978': 'red'}"
          >
            {{  form.store_status == 1 ? '已创建' : '未创建' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账业务申请状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_split == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_apply_split == 1 ? '已申请' : '未申请' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账业务申请状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_apply_split == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_apply_split == 1 ? '已申请' : '未申请' }}
          </span>
        </div>
      </div>
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">分账接收方绑定状态</div>
          <span
            :class="['item-input', 'approval-status']"
            :style="{color: form.has_bind_receiver == 1 ? '#48c978': 'red'}"
          >
            {{  form.has_bind_receiver == 1 ? '已绑定' : '未绑定' }}
          </span>
        </div>
      </div> -->
      <div class="item-info">
        <div class="item-block">
          <div class="item-lable">审批时的备注信息</div>
          <el-input
            type="textarea"
            class="item-input"
            v-model="form.approval_remark"
            style="width: 400px"
            clearable
            :autosize="{ minRows: 15 }"
          ></el-input>
        </div>
        <div class="item-block item-block-2">
          <div>
            <el-checkbox
              :isIndeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
            >
              全选（全选 等于
              重新填写所有审核资料）（单个/多个就是补交审核资料）
            </el-checkbox>
          </div>
          <div class="check-item">
            <div class="check-title">基本信息</div>
            <el-checkbox-group v-model="checkboxList" @change="handlecheckbox">
              <el-checkbox
                v-for="(item, index) of formConfig.baseInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">地址信息</div>
            <el-checkbox-group v-model="checkboxList" @change="handlecheckbox">
              <el-checkbox
                v-for="(item, index) of formConfig.addressInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">证件信息</div>
            <el-checkbox-group
              v-if="form.entity_type == 1"
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.certificate"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
            <el-checkbox-group
              v-if="form.entity_type == 2"
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.certificate2"
                :key="index + item.key"
                :label="item.key"
              >
                {{ item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="check-item">
            <div class="check-title">银行信息</div>
            <el-checkbox-group
              v-model="checkboxList"
              @change="handlecheckbox"
              class="check-certificate"
            >
              <el-checkbox
                v-for="(item, index) of formConfig.bankInfo"
                :key="index + item.key"
                :label="item.key"
              >
                {{ form.entity_type == 1 ? '银行' : item.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-content" v-if="!showLoading">
      <el-button
        class="btn"
        style="width: 150px;"
        type="success"
        @click="getMerchApproval(5)"
        v-if="![1,5].includes(form.approval_status)"
      >
        提交拉卡拉审核
      </el-button>
      <el-button
      v-if="form.approval_status != 1"
        class="btn"
        type="danger"
        @click="getMerchApproval(2)"
      >
        驳回审核
      </el-button>
      <el-button
        v-if="![1,5].includes(form.approval_status)"
        class="btn"
        type="normal"
        @click="saveUserInfo()"
      >
        保存信息
      </el-button>
      
      <!-- <el-button class="btn" type="danger" @click="getCheckContractFile()">
        查看商家签署合同
      </el-button> -->
      <el-button
        class="btn btn-hetong"
        type="success"
        @click="createShop()"
        v-if="form.has_apply_mer == 1 &&  form.approval_status == 5 && form.has_apply_split == 1 
        && form.has_bind_receiver ==1 &&  form.has_apply_receiver ==1 &&
        form.store_status == 2"
      >
        创建店铺
      </el-button>
      <!-- <el-button
        class="btn btn-hetong"
        type="success"
        @click="createSubAccount()"
        v-if=" form.approval_status == 5 && form.has_apply_mer ==1 && form.has_apply_split != 1"
      >
        分账业务申请
      </el-button> -->
      <el-button class="btn" @click="close()">取消</el-button>
    </div>
    
  </el-dialog>
</template>

<script>
import {
  getMerchDetail,
  getMerchApproval,
  getCreateByFile,
  getCheckContractFile,
  createShop,
  createSubAccount,
  checkShopName,
  updateUserInfo
} from '@/api/shopAudit/shopAudit'

import { batchNoApi, imgOcrResultApi } from "@/api/upload";

import {
  getBaiduSuggestion
} from "@/api/baidu/baidu.js"

import { GetCategoryList } from '@/api/base/store/category'
import city from './cityData.js'
import config from './formConfig'
import { color } from 'echarts'
import { copy } from 'clipboard'
import { getAreaJSON } from '@/utils/static'
import { URL } from '@/config'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/token'
import { compressImage } from "@/utils/file";


const orcImgTypeConf = {
  FR_ID_CARD_FRONT: "FR_ID_CARD_FRONT",
  FR_ID_CARD_BEHIND: "FR_ID_CARD_BEHIND",
  ID_CARD_FRONT: "ID_CARD_FRONT",
  ID_CARD_BEHIND: "ID_CARD_BEHIND",
  BUSINESS_LICENCE: "BUSINESS_LICENCE",
  BANK_CARD: "BANK_CARD",
};

export default {
  props: {
    show: {
      typeof: Boolean,
      default: false,
    },
    id: {
      typeof: Number,
    },
  },
  data() {
    return {
      title: '店铺审核详情',
      showDialog: false,
      showLoading: false,
      formConfig: JSON.parse(JSON.stringify(config)),
      cityData: JSON.parse(JSON.stringify(city.cityData)),
      form: {
        id:'',
        login_mobile: '66',
        store_id: '1',
        store_name: '',
        contact_name: '',
        biz_category: 0,
        settlement_method: '',
        store_area:'',
        store_longitude: '',
        store_latitude: '',
        province_id: '',
        city_id: '',
        store_address: '',
        entity_type: '',
        front_facade_image: '',
        environment_image: '',
        biz_license_number: '',
        biz_license_image: '',
        biz_license_content:'',
        license_type: 1,
        license_number: '',
        license_image: [],
        legal_person_name: '',
        legal_person_mobile: '',
        legal_person_id_number: '',
        legal_person_id_images: '',
        legal_person_id_images2: '',
        individual_id_number: '',
        individual_id_images: '',
        individual_id_images2: '',
        bank_name: '',
        bank_branch_name: '',
        account_number: '',
        account_holder_name: '',
        contract_number: '',
        contract_download_url: '',
        approval_status: 3,
        approval_remark: '',
        province_nmae: '',
        city_name: '',
        county_name: '',
        signed_status: 0,
        lkl_mer_cup_no:'',  // 拉卡拉商户号
        lkl_term_no:'',// 拉卡拉终端号
        has_ec_signed:'' , // 是否签合同，1-是；2-否；
        has_apply_mer:'' ,// 是否进件成功，1-是；2-否；
        has_apply_split:'',// 是否申请分账业务，1-是；2-否；
        has_apply_receiver:'',// 是否申请创建分账接收方，1-是；2-否；,
        has_bind_receiver:'',// 是否是否绑定分账接收方，1-是；2-否；
        other_license_list:[],
        other_license_list_2:[],
        mchId:0
      },
      entityType: ['企业', '个人'],
      approvalStatus:[
        {
          key:1,
          value:'已通过',
          color:'#48c978'
        },
        {
          key:2,
          value:'未通过',
          color:'red'
        },
        {
          key:3,
          value:'待审核',
          color:'#ffba00'
        },
        {
          key:4,
          value:'未申请过',
          color:'#000'
        },
        {
          key:5,
          value:'已提交拉卡拉审核',
          color:'#ffba00'
        },
        {
          key:21,
          value:'拉卡拉审核未通过',
          color:'red'
        },
      ],
      licenseType: [
        {
          id: 1,
          name: "许可证",
        },
        {
          id: 2,
          name: "特许证件",
        },
        {
          id: 3,
          name: "其他证件",
        },
      ],
      storeStatus : ['已创建','未创建'],
      signedStatus: [
        {
          index: -1,
          value: '预备数据阶段',
        },
        {
          index: 0,
          value: '等待签署',
        },
        {
          index: 1,
          value: '已部分签署',
        },
        {
          index: 2,
          value: '已完成',
        },
        {
          index: 3,
          value: '已撤销',
        },
        {
          index: 5,
          value: '已过期',
        },
        {
          index: 7,
          value: '已拒签',
        },
      ],
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      ],
      checkboxList: [],
      checkAll: false,
      isIndeterminate: true,
      srcList1: [],
      srcList2: [],
      srcList3: [],
      srcList4: [],
      srcList5: [],
      srcList6: [],
      srcList7: [],
      srcList8: [],
      downloading: false,
      sourceFormData:{},
      isShopNamePass:true,
      areaData:[],
      areaCode:"",
      cityData:[],
      cityCode:"",
      provinceData:[],
      provinceCode:"",
      time:null,
      searchAddressList:[],
      loadingBaiduSuggestion:false,
      front_facade_image:[],
      environment_image:[],
      uploadUrl: URL.action,
      uploadParams: {
        authorization: "",
        gallery_id: 0,
      },
      loadingPage:false,
      orcTimeout:null,
      orcLoading:{},
      dialogImageUrl: '',
      dialogVisible: false,
      dialogImageUrlList:[],
  
    }
  },
  computed: {
    
    isReadonly(){
      return this.form.approval_status == 1 && this.form.has_apply_mer == 1
    },
    signedStatusClass() {
      

      if (this.form.store_status  == 1) {
        return 'color:#48c978'
      } else {
        return 'color:red'
      }
    },
        // 计算 active 值的逻辑
    calculateActiveStep() {

      let form = this.form

      // 7. 入驻完成（所有条件都满足）
      if (form.approval_status === 1 && 
          form.has_ec_signed === 1 && 
          form.has_apply_mer === 1 && 
          form.store_status === 1 && 
          form.has_apply_split === 1 && 
          form.has_bind_receiver === 1) {
        return 7; // 所有步骤完成
      }

      // 6. 分账接收方绑定结果
      if (form.has_apply_split === 1) {
        if (form.has_bind_receiver === 1) return 6; // 成功
        if (form.approval_status === 21 && form.has_bind_receiver === 2) return 6; // 失败
        return 5; // 进行中
      }

      // 5. 分账业务申请结果
      if (form.store_status === 1) {
        if (form.has_apply_split === 1) return 5; // 成功
        if (form.approval_status === 21 && form.has_apply_split === 2) return 5; // 失败
        return 4; // 进行中
      }

      // 4. 店铺创建结果
      if (form.has_apply_mer === 1) {
        if (form.store_status === 1) return 4; // 成功
        if (form.approval_status === 2 && form.store_status === 2) return 4; // 失败
        return 3; // 进行中
      }

      // 3. 商家进件审核结果
      if (form.has_ec_signed === 1) {
        if (form.has_apply_mer === 1) return 3; // 成功
        if (form.approval_status === 21 && form.has_apply_mer === 2) return 3; // 失败
        return 2; // 进行中
      }

      // 2. 合同签署结果
      if (form.approval_status === 5 && form.has_ec_signed === 2 && form.lkl_ec_result_url) {
        return 1; // 合同签署待办
      }
      if (form.has_ec_signed === 1) return 2; // 成功
      if (form.approval_status === 21 && form.has_ec_signed === 2) return 2; // 失败

      // 1. 审核状态（默认第一步）
      return 0;
      },
  },
  watch: {
    show: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.showDialog = true
          this.getMerchDetail()
    
        } else {
          this.showDialog = false
        }
      },
    },
  },
  created() {
    this.uploadParams.authorization = getToken()

    console.log(this.uploadParams)
  },
  methods: {
    async getMerchDetail() {

      this.showLoading = true
      let res = await getMerchDetail({ id: this.id })
      if (res && res.status == 200) {
        this.form =  {...this.form,...res.data}
        if(!this.form.other_license_list){
          this.form.other_license_list = []
        }
        if (res.data) {
          let item = this.signedStatus.find(
            (item) => item.index == res.data.signed_status
          )
          if (item) {
            this.form.signedStatusName = item.value
          }
        }

        if(this.form.entity_type == 1){
          this.title = `店铺审核详情  ( 企业入驻 )`
        }else{
          this.title = `店铺审核详情  ( 个人入驻 )`
        }


        if(this.form.individual_id_period_end == '9999-12-31'){
           this.form.legal_person_id_period_end = '长期'
        }

        if( this.form.legal_person_id_period_end == '9999-12-31'){
           this.form.individual_id_period_end = '长期'
        }

        if(this.form.biz_license_period_end == '9999-12-31'){
          this.form.biz_license_period_end = '长期'
        }

        //深拷贝原始数据
       
        this.showLoading = false
        await this.getCategoryList();
        const areaData = await getAreaJSON()
        
        if(this.form.store_district){
          let storeDistrict = this.form.store_district.split("/")

          if(storeDistrict[0]){
             this.areaCode =  Number(storeDistrict[0])
          }
          if(storeDistrict[1]){
            this.cityCode = Number(storeDistrict[1]);
          }
          
          if(storeDistrict[2]){
            this.provinceCode = Number(storeDistrict[2])
          }
        }

        if (areaData) {
          this.areaData = this.formatAreaData(areaData[0]['provinces'])
          console.log(this.areaData)
        }

        if(this.form.store_area){
          let areaArr = this.form.store_area.split('/');
          
          if(areaArr[0]){
            this.form.province_nmae = areaArr[0]
          }
          
          if(areaArr[1]){
            this.form.city_name = areaArr[1]
      
            const cityData = this.areaData.find((item)=>{
              if(item.id == this.areaCode){
                return item
              }
             })

            if(cityData && cityData.citys){
              this.cityData = cityData.citys
              console.log(this.cityData)
            }
          }

          if(areaArr[2]){
            this.form.county_name = areaArr[2]
          
            const provinceData = this.cityData.find(item=>{
              if(item.id == this.cityCode){
                return item
              }
            })

            if(provinceData && provinceData.districts){
              this.provinceData = provinceData.districts
            }
          }
        }

        // this.cityData.provinceData.forEach((item) => {
        //   if (item.value == res.data.province_id) {
        //     this.form.province_nmae = item.label
        //   }
        // })

        // this.cityData.cityData.forEach((item) => {
        //   item.forEach((group) => {
        //     if (group.value == res.data.city_id) {
        //       this.form.city_name = group.label
        //     }
        //   })
        // })

        // this.cityData.areaData.forEach((item) => {
        //   item.forEach((group) => {
        //     group.forEach((group2) => {
        //       if (group2.value == res.data.county_id) {
        //         this.form.county_name = group2.label
        //       }
        //     })
        //   })
        // })

        this.srcList1.push(res.data.front_facade_image)
        this.srcList2.push(res.data.environment_image)
        this.srcList3.push(res.data.biz_license_image)

        if (res.data.other_license_list) {
        
          this.form.other_license_list_2 = res.data.other_license_list.map((item)=>{
            return {
              name:item.img,
              url:item.img,
            }
          })
          
        }
        this.srcList5.push(res.data.legal_person_id_images)
        this.srcList6.push(res.data.legal_person_id_images2)
        this.srcList7.push(res.data.individual_id_images)
        this.srcList8.push(res.data.individual_id_images2)

        this.sourceFormData = JSON.parse(JSON.stringify(this.form));
      }

    },
    formatAreaData(data){
       let provinces = []
        data.forEach((item) => {
          let province = {
            pid: 0,
            id: item.id,
            name: item.name,
          }
          let citys = []
          item.citys.forEach((iCity) => {
            let city = {
              pid: item.id,
              id: iCity.id,
              name: iCity.name,
              districts:iCity.districts
            }
            citys.push(city)
          })
          province.citys = citys
          provinces.push(province)
        })
        return provinces
    },
    downloadFile(){
      this.downloading = true
      const link = document.createElement('a')
      link.href = this.form.contract_download_url
      link.download = this.getFileNameFromUrl(this.form.contract_download_url)
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
      this.downloading = false

      this.$message({
        message: '下载完成，请注意浏览器右上角下载',
        type: 'success',
      })
      
    },
    // 从URL中提取文件名
    getFileNameFromUrl(url) {
      const parts = url.split('/')
      return parts[parts.length - 1] || 'contract.pdf'
    },
    async getCategoryList(){
      let res =  await GetCategoryList();

      if(res && res.status == 200){

        let name =  this.findCategoryName(res.data,this.form.biz_category);
        if(name){
          this.form.biz_category = name
        }
      }
    },
    findCategoryName(categories, targetId) {
    for (const category of categories) {
        // 如果当前分类匹配，直接返回名称
            if (category.store_category_id === targetId) {
                return category.store_category_name;
            }
            
            // 如果有子分类，递归查找
            if (category.children && category.children.length > 0) {
                const foundInChildren = this.findCategoryName(category.children, targetId);
                if (foundInChildren) {
                    return foundInChildren;
                }
            }
        }
        
        return null; // 没找到
    },
    async getMerchApproval(status) {
      if (status == 2 && this.checkboxList.length == 0) {
        this.$message({
          message: '请勾选至少一项驳回原因',
          type: 'warning',
        })
        return
      }

      let msg =
        status == 5
          ? '此操作将通过审核，是否继续？'
          : '此操作将驳回审核，是否继续？'

      if (this.form.approval_status == 1) {
        msg = '已经审核通过了，确定要驳回吗？'
      }

      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let parems = {
            id: this.id,
            approvalStatus: status,
            approvalRemark: this.form.approval_remark,
            approvalInvalidCol: this.checkboxList.filter(item => !['businessLicenseOCR', 'legalPersonOCR','personOCR','bankOCR'].includes(item)),
          }
         
          let res = await getMerchApproval(parems)
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '成功',
            })
            this.checkboxList = []
            this.getMerchDetail()

            // if (this.status == 2) {
            //   this.close()
            // }
          }else{
            this.$message({
              type: 'error',
              message: res.msg,
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消审核',
          })
        })
    },
    saveUserInfo(){
        this.$confirm('确定保存信息？','提示',{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(async()=>{
            let res=await updateUserInfo(this.form);
            if(res&&res.status==200){
              this.$message({
              type: 'success',
              message: '保存成功',
            })
            }else{
              this.$message({
              type: 'error',
              message: '保存失败',
            })
            }
        })
    },
    getCreateByFile() {
      this.$confirm('此操作将签署合同, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          let parems = {
            mchMobile: this.form.login_mobile,
          }
          let res = await getCreateByFile(parems)
          if (res && res.status == 200) {
            this.$message({
              type: 'success',
              message: '签署成功',
            })

            await this.getMerchDetail()
            // this.close()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消签署',
          })
        })
    },
    async getCheckContractFile() {
      let params = {
        mchMobile: this.form.login_mobile,
      }
      let res = await getCheckContractFile(params)
      if (res && res.status == 200) {
        
      }
    },
    approvalStatusClass(status){
      
      const found = this.approvalStatus.find(item => item.key == status);
      return found ? found.color : '#000';

    },
    close() {
      this.$emit('close')
    },
    handlecheckbox(e) {
  
      // 企业身份证驳回 <!-- 身份证号码，身份证正面图片，身份证反面图片--!>
      if(e.includes('legalPersonOCR') && !this.checkboxList.some(item => item === 'legal_person_id_number')){

        let arr = [
        'legal_person_id_number',
        'legal_person_id_images',
        'legal_person_id_images2',
        'legal_person_id_addr',
        'legal_person_id_period_begin',
        'legal_person_id_period_end'
        ]

        this.checkboxList = [...arr,...this.checkboxList ]
      }
      // 个人身份证驳回 <!-- 身份证号码，身份证正面图片，身份证反面图片--!>
      if(e.includes('personOCR')&& !this.checkboxList.some(item => item === 'individual_id_number')){

        let arr = [
          'individual_id_number',
          'individual_id_name',
          'individual_id_addr',
          'individual_id_images',
          'individual_id_images2',
          'individual_id_period_begin',
          'individual_id_period_end'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }
      //银行卡驳回 <!-- 银行卡上传图片,开户名称，银行卡号，开户银行 --!>
      if(e.includes('bankOCR')&& !this.checkboxList.some(item => item === 'bankcard_item')){

        let arr = [
          'bankcard_item',
          'account_holder_name',
          'account_number',
          'bank_name'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }
      // 企业营业执照驳回
      if(e.includes('businessLicenseOCR')&& !this.checkboxList.some(item => item === 'biz_license_image')){

        let arr = [
          'biz_license_image',
          'biz_license_company',
          'legal_person_name',
          'biz_license_content',
          'biz_license_number',
          'legal_person_mobile'
        ]

        this.checkboxList = [...arr,...this.checkboxList]
      }

      if(e.includes("mapAddress") && !this.checkboxList.some(item => item === 'store_address')){
        this.checkboxList = ['store_address',...this.checkboxList];
      }
      
      console.log(this.checkboxList)
    },
    handleCheckAllChange(val) {
      if (this.form.entity_type == 1) {
        this.checkboxList = val
          ? this.formConfig.enterpriseCheckBoxList.map((item) => {
              return item.key
            })
          : []
      } else {
        this.checkboxList = val
          ? this.formConfig.personCheckBoxList.map((item) => {
              return item.key
            })
          : []
      }

      if (val) {
        this.checkboxList.unshift('all')
      } else {
        let index = this.checkboxList.indexOf('all')
        if (index !== -1) {
          this.checkboxList.splice(index, 1)
        }
      }

      this.isIndeterminate = false
    },
    formatApprovalStatus(status){

      const found = this.approvalStatus.find(item => item.key == status);
      return found ? found.value : 'Unknown Status';
    },
    async createSubAccount(){
      let res  = await createSubAccount({merCupNo:this.form.lkl_mer_cup_no})
      if(res && res.status == 200){
        this.$message({
          type: 'success',
          message: '分账业务申请成功',
        })
      }else{
        this.$message({
          type: 'error',
          message: res.msg ? res.msg : "分账业务申请失败",
        })
      }
      this.getMerchDetail();
    },
    async createShop(){
      let res  = await createShop({mchId:this.form.mchId})
      if(res && res.status == 200){
        this.$message({
          type: 'success',
          message: '店铺创建成功',
        })
      }else{
        this.$message({
          type: 'error',
          message: res.msg ? res.msg : "店铺创建失败",
        })
      }
      this.getMerchDetail();
    },
    async handlerCheckShowName(){
      let parems = {
        storeName:this.form.store_name
      }

      let res = await checkShopName(parems)
      if(res.status == 200){

        if(res.data.flag == 1){
          this.$message({
            type: 'success',
            message: res.msg,
          })
        this.isShopNamePass = true
        }else{
          this.$message({
            type: 'error',
            message: res.msg,
          })
         this.isShopNamePass = false
        }
      }
    },
    handerChangeArea(e){
      this.areaCode = e;
      this.cityCode = '';
      this.provinceCode = ''
      this.cityData = [];
      this.provinceData = [];
      this.form.store_address = "";
      this.form.store_longitude = "";
      this.form.store_latitude = "";

      const areaData = this.areaData.find((item)=>{
        if(item.id == this.areaCode){
          return item
        }
        })
        if(areaData && areaData.citys){
          this.cityData = areaData.citys
          this.form.province_nmae = areaData.name
        
          console.log(this.form.province_nmae)
        }
    },
    handerChangeCity(e){
      this.provinceData = [];
      this.provinceCode = ""
      this.form.store_address = "";
      this.form.store_longitude = "";
      this.form.store_latitude = "";
      this.cityCode = e
      const cityData = this.cityData.find(item=>{
        if(item.id == this.cityCode){
          return item
        }
      })

      if(cityData && cityData.districts){
        this.provinceData = cityData.districts
        this.form.city_name = cityData.name

        console.log( this.form.city_name)
      }
    },
    handerChangeProvince(e){
      this.provinceCode = e;
      this.form.store_address = "";
      this.form.store_longitude = "";
      this.form.store_latitude = "";
       const districtsItem = this.provinceData.find(item=>{
        if(item.id == this.provinceCode){
          return item
        }
        })
       if(districtsItem){
        this.county_name = districtsItem.name
       }
    },
    handerGetBaiduSuggestion(e){
      if(e == ""){
        return
      }

      this.loadingBaiduSuggestion = true
      let params = {
        query:e,
        region:this.form.city_name,
        city_limit:true,
        ret_coordtype: "gcj02ll",
      }
      clearTimeout(this.time);
       this.time = setTimeout(async () => {
        let res = await getBaiduSuggestion(params);
        if (res && res.status == 0) {
          this.searchAddressList = res.result
            .filter((item) => "location" in item)
            .map((item) => {
              let obj = {
                ...item,
                name: item.name,
                detailedInformation: item.address
                  ? item.address.replace(/-/g, "")
                  : item.name,
              };
              return obj;
            });

        }
        this.loadingBaiduSuggestion = false;
      }, 600);

    
    },
    handerChangeStoreAddress(e,index){
      this.form.store_address = this.form.province_nmae + this.form.city_name + this.form.county_name +  e.name ;
      this.form.store_longitude = e.location.lng;
      this.form.store_latitude = e.location.lat;
    },
    beforeUpload(file){
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
          ElMessage.error('上传的图片必须是JPG或PNG格式！');
          // this.orcLoading.close()
          return false;
      }
      if (!isLt2M) {
          ElMessage.error('上传的图片大小不能超过2MB！');
          return false;
      }
      return true;
    },
    progressUpload(){
      this.orcLoading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    async handleAvatarSuccess(response, file, fileList, type){
    
      if (response && response.status === 200 && response.code === 0) {
        if (response.data && response.data.media_url) {
           if(type != 'license_image'){
            this.form[type] = response.data.media_url
           }else{
             this.form[type].push(response.data.media_url)
           }
            switch (type) {
              case 'front_facade_image':
                this.srcList1 = [response.data.media_url];
                break;
              case 'environment_image':
                this.srcList2 = [response.data.media_url];
                break;
              case 'biz_license_image':
                this.srcList3 = [response.data.media_url];
                var res = await this.getBatchNo(file.raw, orcImgTypeConf.BUSINESS_LICENCE);
                if(res){
                  this.handleOcrText(res.batchNo, type);
                }
                break;
              case 'license_image':
                this.form.other_license_list_2.push({
                  name:response.data.media_url,
                  url:response.data.media_url
                })

                this.form.other_license_list.push({
                  type:1,
                  number:"",
                  img:response.data.media_url
                })

                console.log(this.form.other_license_list)

                // debugger;
                // const imrArr = []
                // imrArr.push(response.data.media_url)
                // imrArr = [...this.form.license_image,...imrArr]
                // this.form.license_image = imrArr.map((item)=>{
                //   return {
                //     name:item,
                //     url:item
                //   }
                // })
                // this.dialogImageUrlList = imrArr;
                // console.log(this.form.license_image)

                break;
              case 'legal_person_id_images':
                this.srcList5 = [response.data.media_url];
                var res = await this.getBatchNo(file.raw, orcImgTypeConf.FR_ID_CARD_FRONT);
                this.handleOcrText(res.batchNo, type);
                break;
              case 'legal_person_id_images2':
                this.srcList6 = [response.data.media_url];
                 var res = await this.getBatchNo(
                  file.raw,
                  orcImgTypeConf.FR_ID_CARD_BEHIND
                );
              
                this.handleOcrText(res.batchNo, type);
                break;
              case 'front_facade_image':
                this.srcList7 = [response.data.media_url];
                break;
              case 'front_facade_image':
                this.srcList8 = [response.data.media_url];
                break;
            }
          }
        }
       
    },
    async getBatchNo(file, type){
      
      file = await compressImage(file);
      const rsp = await batchNoApi(file, type).then((res) => {
        return res;
      });
    
      if (rsp  && rsp.status == 200) {
        return rsp?.data;
      } else {
        return null;
      }
    },
    async handleOcrText (batchNo, imgType) {
      switch (imgType) {
        case "biz_license_image":
          var res = await this.getOcrText(
            batchNo,
            orcImgTypeConf.BUSINESS_LICENCE
          );
          console.log("biz_license_image", res);
          this.form.biz_license_company = res.bizLicenseCompanyName;
          this.form.legal_person_name = res.bizLicenseOwnerName;
          this.form.biz_license_number = res.bizLicenseCreditCode;
          this.form.account_holder_name = res.bizLicenseCompanyName;
          this.form.biz_license_content = res.bizLicenseScope;
          break;
        case "legal_person_id_images":
          var res = await this.getOcrText(
            batchNo,
            orcImgTypeConf.FR_ID_CARD_FRONT
          );

          console.log("legal_person_id_images", res);
          this.form.legal_person_id_number = res.idNumber;
          this.form.legal_person_id_addr = res.address;
          break;
        case "legal_person_id_images2":
          var res = await this.getOcrText(
            batchNo,
            orcImgTypeConf.FR_ID_CARD_BEHIND
          );
          var validity = res.validity.split("-");

          console.log("legal_person_id_images2", res);
          this.form.legal_person_id_period_begin = validity[0];

          if (validity[1] != "长期") {
            this.form.legal_person_id_period_end = validity[1];
          } else {
            this.form.legal_person_id_period_end = "9999-12-31";
          }
          break;
        case "individual_id_images":
          var res = await this.getOcrText(
            batchNo,
            orcImgTypeConf.ID_CARD_FRONT
          );

          console.log("individual_id_images", res);
          this.form.individual_id_name = res.name;
          this.form.account_holder_name = res.name;
          this.form.individual_id_number = res.idNumber;
          this.form.individual_id_addr = res.address;
          break;
        case "individual_id_images2":
          var res = await this.getOcrText(
            batchNo,
            orcImgTypeConf.ID_CARD_BEHIND
          );

          var validity = res.validity.split("-");

          console.log("individual_id_images2", res);
          this.form.individual_id_period_begin = validity[0];

          if (validity[1] != "长期") {
            this.form.individual_id_period_end = validity[1];
          } else {
            this.form.individual_id_period_end = "9999-12-31";
          }
          break;
        case "bank_image":
          var res = await this.getOcrText(batchNo, orcImgTypeConf.BANK_CARD);
          console.log("bank_image", res);
          this.form.account_number = res.card_number;
          break;
      }
      this.orcLoading.close()
    },
    async getOcrText(batchNo, type){
      return new Promise(async (resolve, reject) => {
        let formData = new FormData();

        formData.append("batchNo", batchNo);
        formData.append("imgType", type);
        clearTimeout(this.orcTimeout);

        this.orcTimeout = setTimeout(async () => {
          const imgOcrRes = await imgOcrResultApi(formData);
          formData = null;
          clearTimeout(this.orcTimeout);

          if (imgOcrRes.status != 200) {
            reject(imgOcrRes?.data);
          } else {
            resolve(imgOcrRes?.data);
          }
        }, 2000);
      });
    },
    handleUploadChange(file, fileList){
      // this.form.license_image = fileList;

      // console.log(this.form.license_image)
    },
    handerRemoveUpload(file, fileList){
      this.form.other_license_list_2 = fileList;
      this.form.other_license_list = this.form.other_license_list.filter(item => item.img != file.url);
    },
    handleExceed(){
      this.$message.error('许可证图片数量最多为5张');
    },
    handlePictureCardPreview(file){
      this.dialogImageUrl = file.url || file.raw?.url || file.response?.data?.media_url;
      if (!this.dialogImageUrl) {
        console.error('无法获取图片URL');
        return;
      }
        this.dialogVisible = true;
    }
  },
}
</script>

<style lang="scss">
.shopAuditDetails-container {
  .item-content {
    .item-title {
      padding: 20px 0;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px solid #dcdfe6;
      color: #000;
    }
    .item-info {
      display: flex;
      margin: 20px 0;

      .item-block {
        display: flex;
        align-items: center;

        .item-lable {
          min-width: 100px;
          margin-right: 20px;
        }

        .item-input {
          width: 200px;
          margin-right: 60px;
        }
      }

      .item-block-2 {
        align-items: initial;
        flex-flow: column;

        .check-item {
          margin: 0 24px;

          .check-title {
            margin: 10px 0px;
            font-weight: bold;
            color: #000;
          }
        }
      }

      .check-certificate {
        .el-checkbox__label {
          min-width: 108px;
        }
      }
    }

    .approval-status {
      font-weight: bold;
      font-size: 20px;
    }
  }

  .el-dialog__header {
    position: sticky;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
    z-index: 1;

    .el-dialog__title {
      font-weight: bold;
      color: #000;
    }

    .el-dialog__close {
      font-size: 22px;
      font-weight: bold;
    }
  }

  .btn-content {
    text-align: center;

    .btn {
      width: 100px;
      height: 40px;
    }
  }

  .btn-hetong:hover {
    content: '需要通过审核才可以点击此按钮';
  }

  .audit-steps{
    margin: 100px auto;
  }

  .upload-btn{
    margin: 10px 20px;
    // margin-right: 20px;
    text-align: right;
  }

   .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
     width: 178px;
    height: 178px;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .el-upload-list__item{
    width: 178px;
    height: 178px;
  }

  .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;
  }

  .other_license_list{
    display: flex;
  }

  .other_license_list_item{
    display: flex;
    flex-flow: column;
    width: 187px;
  }
}
</style>