
<template>
  <div class="jeepay-m-center" :style="isMobile?'margin-top: 50px !important; margin-left: 20px; ':'margin-top: 5px; margin-left: 20px; '">
    <a-steps v-show="(vdata.showStyle == showStyleEnum.step) && !isMobile" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="主体信息" />
      <a-step title="经营信息" />
      <a-step title="结算信息" />
      <a-step title="费率配置" />
    </a-steps>
    <a-divider v-show="!isMobile" />
    <a-divider v-show="isMobile" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;"><span style="color: #2980FD;">{{ vdata.currentStep }}</span>/{{ vdata.steps.length }} {{ vdata.steps[vdata.currentStep - 1] }}</a-divider>
    <!-- 1. 主体信息  -->
    <a-form
        v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 1"
        ref="stepForm1Ref"
        style="margin-top: 20px;"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="vdata.step1Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础项</a-divider>
      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" defaultValue="3" @change="funMchTypeInfo(applymentDetailInfo.merchantType)">
          <a-radio :value="1">小微</a-radio>
          <a-radio :value="3">个体/企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>

        <a-form-item label="营业执照照片" name="licenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
        </a-form-item>

        <a-form-item label="营业执照名称" name="mchFullName" v-if="applymentDetailInfo.merchantType == 3">
          <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
        </a-form-item>

        <a-form-item label="营业执照编号" name="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </a-form-item>

        <a-form-item label="经营内容" name="licenseBusiness">
          <a-input v-model:value.trim="applymentDetailInfo.licenseBusiness" />
        </a-form-item>

        <a-form-item label="营业执照起始有效期" name="licenseEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.licenseEffectBegin"  placeholder="示例：2023-10-10"/>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>

        <a-form-item class="jeepay-valid" label="营业执照有效期截止" name="licenseEffectEnd">
          <div>
            <a-input v-model:value.trim="applymentDetailInfo.licenseEffectEnd" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;"  placeholder="示例：2023-10-10"/>
            <a-checkbox :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>

          </div>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>
      </div>


      <div >
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">法定代表人证件</a-divider>

        <a-form-item label="法人身份证人像面照片" name="idcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="法人身份证国徽面照片" name="idcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>
        <a-form-item
            label="法人手持身份证照片"
            name="idcardInHandImg"
            v-if="applymentDetailInfo.merchantType !== 3"
        >
          <JeepayUpload
              v-model:src="applymentDetailInfo.idcardInHandImg"
              :imgSize="2"
              bizType="applyment"
          />
        </a-form-item>

        <a-form-item label="法人身份证姓名" name="idcardName">
          <a-input v-model:value.trim="applymentDetailInfo.idcardName"  @change="getIdcardName"/>
        </a-form-item>

        <a-form-item label="法人手机号" name="idCardPhone">
          <a-input v-model:value.trim="applymentDetailInfo.idCardPhone" />
        </a-form-item>

        <a-form-item label="法人邮箱" name="idCardEmail">
          <a-input v-model:value.trim="applymentDetailInfo.idCardEmail" />
        </a-form-item>

        <a-form-item label="法人身份证号" name="idcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
        </a-form-item>

        <a-form-item label="法人身份证居住地址" name="idcardAddress">
          <a-input v-model:value.trim="applymentDetailInfo.idcardAddress" />
        </a-form-item>

        <a-form-item label="法人身份证起始有效期" name="idcardEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.idcardEffectBegin"  placeholder="示例：2023-10-10"/>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>

        <a-form-item class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
          <div>
            <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;"  placeholder="示例：2023-10-10"/>
            <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>

          </div>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>
      </div>
    </a-form>

    <!-- 2. 经营信息  -->
    <a-form
        v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 2"
        ref="stepForm2Ref"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="vdata.step2Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">基础信息</a-divider>
      <a-form-item label="商户简称" name="mchShortName" @change="getMchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" placeholder="填写门店或品牌名称，支付时或小票页展示"/>
      </a-form-item>

      <a-form-item label="商户英文名称" name="merEnName">
        <a-input v-model:value.trim="applymentDetailInfo.merEnName" />
      </a-form-item>
      <a-form-item v-if="mchApplymentData.ifCode" label="经营类目" name="mccCode">
        <JeepayMccSelect v-model:value="applymentDetailInfo.mccCode" />
      </a-form-item>
      <a-form-item label="银联商户类别" name="unionMchType">
        <JeepayDgUnionMccSelect v-model:value="applymentDetailInfo.unionMchType" />
      </a-form-item>
      <a-form-item v-if=" mchApplymentData.ifCode" label="经营类型" name="busiType">
        <a-select v-model:value="applymentDetailInfo.busiType" placeholder="经营类型" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)">
          <a-select-option value="1">实体</a-select-option>
          <a-select-option value="2">虚拟</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-if="mchApplymentData.ifCode" label="小票名称" name="receiptName">
        <a-input v-model:value.trim="applymentDetailInfo.receiptName" />
        <span class="jeepay-tip-text">(传统POS的小票最多支持20个汉字)</span>
      </a-form-item>
      <div>
        <a-form-item v-if=" applymentDetailInfo.merchantType !=1 && mchApplymentData.ifCode" label="公司类型" name="entType">
          <a-select v-model:value="applymentDetailInfo.entType" placeholder="公司类型" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)">
            <!-- <a-select-option value="1">政府机构</a-select-option> -->
            <!-- <a-select-option value="2">国营企业</a-select-option> -->
            <a-select-option value="3">私营企业</a-select-option>
            <!-- <a-select-option value="4">外资企业</a-select-option> -->
            <a-select-option value="5">个体工商户</a-select-option>
            <!-- <a-select-option value="6">其它组织</a-select-option> -->
            <!-- <a-select-option value="7">事业单位</a-select-option> -->
          </a-select>
        </a-form-item>
        <a-form-item v-if="applymentDetailInfo.entType == '3'" label="注册资本" name="regCapital">
          <a-input v-model:value="applymentDetailInfo.regCapital" style="width: 100%;"  />
          <!--          <a-input-number v-model:value="applymentDetailInfo.regCapital" style="width: 100%;" :min="100" :precision="2" />-->
          <span class="jeepay-tip-text">(注册金额，保留两位小数；示例值：1000000.00)</span>
        </a-form-item>



        <a-form-item v-if="mchApplymentData.ifCode && applymentDetailInfo.merchantType != 1" label="客服电话" name="servicePhone">
          <a-input v-model:value.trim="applymentDetailInfo.servicePhone" />
        </a-form-item>

        <a-form-item label="用户名称" name="mchFullName" v-if="applymentDetailInfo.merchantType == 1">
          <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
        </a-form-item>

        <a-form-item v-if="mchApplymentData.ifCode" label="汇付管理员账号（登录名）" name="loginUserName">
          <a-input v-model:value.trim="applymentDetailInfo.loginUserName" />
          <span class="jeepay-tip-text" style="color:red;font-weight: 600">(重要提示：该账号不可重复，每次提交请重新修改。用于汇付斗拱商户平台登录，支持英文、数字、下划线，区分大小写，不要填写特殊字符如 @ #等)</span>
        </a-form-item>
      </div>

      <!--      <div v-if="applymentDetailInfo.merchantType == 1">-->

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>
      <!--        <a-form-item label="联系人身份证人像面照片" name="contactIdcard1Img">-->
      <!--          <JeepayUpload v-model:src="applymentDetailInfo.contactIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanContactFunc" />-->
      <!--          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>-->
      <!--        </a-form-item>-->

      <a-form-item label="是否为法人（自动补全）" name="isLegalInfo">
        <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo"
                       @change="funLegalInfo(applymentDetailInfo.isLegalInfo)">
          <a-radio value="1">是</a-radio>
          <a-radio value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="商户联系人姓名" name="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" />
      </a-form-item>

      <a-form-item label="商户联系人手机号" name="contactPhone">
        <a-input v-model:value.trim="applymentDetailInfo.contactPhone" />
      </a-form-item>

      <a-form-item label="商户联系人身份证号" name="contactIdcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.contactIdcardNo" />
      </a-form-item>

      <a-form-item label="商户联系人邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>
      <a-form-item label="商户经营市" name="areaCode" >
        <JeepayAreaSelectDg v-model:value="applymentDetailInfo.areaCode" @change="changeMchAreaFunc"/>
      </a-form-item>


      <a-form-item label="商户经营地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.mchAddress" :addon-before="applymentDetailInfo.mchAddressCodeName"  @change="changeMchAddressFunc"/>
        <span class="jeepay-tip-text" v-if="applymentDetailInfo.address">请输入详细经营地址,需要精确到门牌号</span>
      </a-form-item>
      <!--      </div>-->
      <!--      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">业务开通材料</a-divider>-->
      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="收银台照" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" />
      </a-form-item>

      <a-form-item label="结算人在收银台内合影" name="cashierWithSettlerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.cashierWithSettlerImg" bizType="applyment" />
        <span class="jeepay-tip-text">(请提供结算人站在收银台内的照片<a href="javascript:void(0)" class="jeepay-tip-bos-img" @click="lookUp(2)"><b>《查看示例》</b></a>  )</span>
      </a-form-item>
      <!--      <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">-->
      <!--        <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />-->
      <!--      </a-form-item>-->


      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">店铺地址信息【必填项】</a-divider>
      <!-- 引入地图组件  -->
      <a-row v-if="!isMobile">
        <a-col :span="2" />
        <a-col :span="20"><JeepayAmap ref="jeepayAmapRef" /></a-col>
        <a-col :span="2" />
      </a-row>
      <JeepayAmap v-else ref="jeepayAmapRef" />
    </a-form>

    <!-- 3. 结算账户  -->
    <a-form
        v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 3"
        ref="stepForm3Ref"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="vdata.step3Rules"
    >
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">账户信息</a-divider>
      <a-form-item label="结算账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="getSettlementAccountType" >
          <a-radio value="C">对私法人</a-radio>
          <a-radio value="D"  v-if="applymentDetailInfo.merchantType !=1">对私非法人</a-radio>
          <a-radio value="B" v-if="applymentDetailInfo.merchantType !=1">对公</a-radio>
        </a-radio-group>
      </a-form-item>


      <div v-if="applymentDetailInfo.settAccountType == 'D'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人证件信息</a-divider>

        <!--        <a-form-item v-if="applymentDetailInfo.merchantType != 1" label="是否为法人（自动补全）" name="isLegalInfo">-->
        <!--          <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo" @change="funLegalInfo(applymentDetailInfo.isLegalInfo)">-->
        <!--            <a-radio value="1">是</a-radio>-->
        <!--            <a-radio value="0">否</a-radio>-->
        <!--          </a-radio-group>-->
        <!--        </a-form-item>-->

        <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScan2Func" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="结算人身份证国徽面照片" name="settAccountIdcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScan2Func" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>

        <a-form-item label="结算卡开户名" name="settAccountName">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-if="applymentDetailInfo.merchantType == 1" disabled />
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'C'" disabled />
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else-if="applymentDetailInfo.merchantType != 1  && applymentDetailInfo.settAccountType == 'D'"  />
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'B'"    />
          <span class="jeepay-tip-text" v-if="applymentDetailInfo.merchantType == 1">（小微商户结算卡必须为法人本人结算卡）</span>
        </a-form-item>
        <a-form-item label="结算人身份证号" name="settAccountIdcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardNo" />
        </a-form-item>

        <a-form-item label="结算人身份证起始有效期" name="settAccountIdcardEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectBegin"  placeholder="示例：2023-10-10"/>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>

        <a-form-item class="jeepay-valid" label="结算人身份证结束有效期" name="settAccountIdcardEffectEnd">
          <div>
            <a-input v-model:value.trim="applymentDetailInfo.settAccountIdcardEffectEnd" :disabled="applymentDetailInfo.settAccountIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;"  placeholder="示例：2023-10-10"/>
            <a-checkbox :checked="applymentDetailInfo.settAccountIdcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>

          </div>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </a-form-item>

      </div>

      <a-divider v-if="applymentDetailInfo.settAccountType == 'D'" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人账户信息</a-divider>
      <div v-if="applymentDetailInfo.settAccountType != 'B'">
        <a-form-item label="结算卡数字面" name="settAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanSttFunc" />
        </a-form-item>

        <!--        <a-form-item label="结算卡反面" name="settBankCardBackImg">-->
        <!--          <JeepayUpload v-model:src="applymentDetailInfo.settBankCardBackImg" bizType="applyment" />-->
        <!--        </a-form-item>-->
      </div>
      <div v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'B'">
        <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" :imgSize="2"/>
        </a-form-item>
      </div>
      <a-form-item label="结算卡开户名" name="settAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-if="applymentDetailInfo.merchantType == 1" disabled />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'C'" disabled />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else-if="applymentDetailInfo.merchantType != 1  && applymentDetailInfo.settAccountType == 'D'"  />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-else="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'B'"  disabled />
        <span class="jeepay-tip-text" v-if="applymentDetailInfo.merchantType == 1">（小微商户结算卡必须为法人本人结算卡）</span>
      </a-form-item>



      <a-form-item label="结算银行卡账号" name="settAccountNo">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountNo" />
      </a-form-item>

      <a-form-item label="开户行省市县" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode"  @change="changeBankAreaFunc"/>
      </a-form-item>

      <a-form-item label="开户支行" name="settAccountBankBranchName">
        <a-select
            v-model:value="applymentDetailInfo.settAccountBankBranchName"
            placeholder="选择支行"
            show-search
            label-in-value
            :filter-option="false"
            @change="handleBankChange"
            @search="handleBankSearch"
            :getPopupContainer="(triggerNode) => triggerNode.parentNode"
        >
          <a-select-option v-for="(item, index) in vdata.filteredBankInfoList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>


      <a-form-item label="结算人手机号" v-if="applymentDetailInfo.settAccountType == 'D'"  name="settAccountBindPhone">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountBindPhone" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.settAccountType == 'D'" label="非法人结算授权函" name="settleAuthLetterPhoto">
        <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterPhoto" bizType="applyment" :imgSize="2"/>
        <span class="jeepay-tip-text">
        <p>1.当结算人与法人不是同一人时必需上传非法人授权函图片 <a href="javascript:void(0)" class="jeepay-tip-bos-img" @click="lookUp(1)">《查看示例》</a>  <a href="javascript:void(0)" class="jeepay-tip-bos-img" @click="download">《下载斗拱非法人授权函》</a></p>
        <p>2.若商户为个体商户，仅需法人和被授权人签字+按手印</p>
        <p>3.若商户为企业商户，法人需要签字+按手印+盖公章</p>
        <p>4.底部日期填写填写表单日期即可</p>
        </span>
      </a-form-item>

<!--      <a-form-item v-if="applymentDetailInfo.settAccountType == 'D'" label="法人手持非法人结算授权函" name="settleAuthLetterHandlePhoto">-->
<!--        <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterHandlePhoto" bizType="applyment" :imgSize="2"/>-->
<!--        <span class="jeepay-tip-text">-->
<!--        <p>1.当结算人与法人不是同一人时必需上传法人手持授权函和身份证拍照 <a href="javascript:void(0)" class="jeepay-tip-bos-img" @click="lookUp(2)">《查看示例》</a></p>-->
<!--        <p>2.若法人不方便拍照则可以上传法人和结算人身份证原件于非法人授权函上照片</p>-->
<!--        </span>-->
<!--      </a-form-item>-->
<!--      <a-form-item v-if="applymentDetailInfo.settAccountType == 'B'" label="银行编码" name="bankCode">-->
<!--        <a-input v-model:value.trim="applymentDetailInfo.bankCode" />-->
<!--        <span><a href="https://paas.huifu.com/partners/api/#/csfl/api_csfl_yhzhbm" target="_blank">银行编码及支行行号名称查询</a></span>-->
<!--      </a-form-item>-->

<!--      <a-form-item v-if="applymentDetailInfo.settAccountType == 'B'" label="联行行号" name="branchCode">-->
<!--        <a-input v-model:value.trim="applymentDetailInfo.branchCode" />-->
<!--      </a-form-item>-->

<!--      <a-form-item v-if="applymentDetailInfo.settAccountType == 'B'" label="支行名称" name="branchName">-->
<!--        <a-input v-model:value.trim="applymentDetailInfo.branchName" />-->
<!--      </a-form-item>-->

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算类型

        <a-popover placement="top" style="background: #0c2640 !important;">
          <template #content  style="background: #ff0 !important;">
            <p>T1：工作日次日到账，交易资金于周末和法定节假日次日的6点-12点自动结算至银行卡</p>
            <p>D1：自然日次日到账，全年365天（不分节假日）的交易资金于自然日的次日6点-12点自动结算至银行卡</p>
            <p>D0：实时到账，全年365天24小时（不分节假日）的交易资金笔笔实时秒到至银行卡，更放心更快捷</p>
          </template>
          <question-circle-outlined />
        </a-popover>
      </a-divider>
      <a-form-item label="结算类型" name="settleCycle" >
        <div style="display: grid">
          <a-radio-group v-model:value="applymentDetailInfo.settleCycle">
            <a-radio value="T1"  v-if="vdata.settlementMethod.indexOf('T1') !== -1">T1-工作日次日到账</a-radio>
            <a-radio value="D1"  v-if="vdata.settlementMethod.indexOf('D1') !== -1">D1-次日到账</a-radio>
            <a-radio value="D0"  v-if="vdata.settlementMethod.indexOf('D0') !== -1">D0-实时到账</a-radio>
          </a-radio-group>
          <div class="jeepay-tip-text jeepay-tip-span" v-if="applymentDetailInfo.settleCycle == 'D0'">(注意：D0实时到账会有额外的秒到手续费，详见下一步费率信息)</div>
          <div class="jeepay-tip-text jeepay-tip-span" v-if="applymentDetailInfo.settleCycle == 'D1'">(注意：D1次日到账会有额外的垫资手续费，仅在节假日结算时收取，详见下一步费率信息)</div>
        </div>
      </a-form-item>
    </a-form>

    <!-- 4. 材料信息  -->
    <a-form
        v-show="vdata.showStyle == showStyleEnum.block || vdata.currentStep == 4"
        ref="stepForm4Ref"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="vdata.step4Rules"
    >
      <!-- 企业材料 -->
      <div v-if="applymentDetailInfo.merchantType == 6 && mchApplymentData.ifCode">

        <div v-if="applymentDetailInfo.merchantType == 1 && mchApplymentData.ifCode">
          <a-form-item label="D1结算协议图片" name="settleAgreePic">
            <JeepayUpload v-model:src="applymentDetailInfo.settleAgreePic" bizType="applyment" />
          </a-form-item>
        </div>

        <div v-if="applymentDetailInfo.settAccountType == 'D' && mchApplymentData.ifCode">
          <a-form-item label="授权委托书" name="authEnturstPic">
            <JeepayUpload v-model:src="applymentDetailInfo.authEnturstPic" bizType="applyment" />
            <a href="https://cloudpnrcdn.oss-cn-shanghai.aliyuncs.com/opps/api/prod/download_file/kyc/12%E3%80%90%E5%95%86%E6%88%B7%E3%80%91%E6%8E%88%E6%9D%83%E7%BB%93%E7%AE%97%E5%A7%94%E6%89%98%E4%B9%A6%EF%BC%88%E5%AF%B9%E7%A7%81%E7%BB%93%E7%AE%97%EF%BC%89%EF%BC%88%E7%BA%B8%E8%B4%A8%E5%90%88%E5%90%8C%E7%89%88%EF%BC%89.docx">
              下载地址
            </a>
          </a-form-item>
        </div>

        <div v-if="applymentDetailInfo.merchantType == '3' && mchApplymentData.ifCode">
          <a-form-item label="商务协议">
            <JeepayUpload v-model:src="applymentDetailInfo.bankPic" bizType="applyment" />
          </a-form-item>
        </div>
        <div v-if="mchApplymentData.ifCode">
          <a-form-item label="综合支付服务协议">
            <JeepayUpload v-model:src="applymentDetailInfo.serviceAgreement" bizType="applyment" />
            <span class="jeepay-tip-text">斗拱平台综合支付服务协议（纸质合同版）</span>
          </a-form-item>
        </div>
        <div v-if="mchApplymentData.ifCode">
          <a-form-item label="价格确认表">
            <JeepayUpload v-model:src="applymentDetailInfo.priceConfirmation" bizType="applyment" />
            <span class="jeepay-tip-text">综合支付服务功能及价格确认表（纸质合同版）</span>
          </a-form-item>
        </div>
        <div v-if="mchApplymentData.ifCode">
          <a-form-item label="签约人法人授权书">
            <JeepayUpload v-model:src="applymentDetailInfo.signAuthFileId" bizType="applyment" />
            <span class="jeepay-tip-text">(非法人结算必填)</span>
          </a-form-item>
        </div>
      </div>

      <a-alert v-if="!mchApplymentData.ifCode" message="当前已满足发起条件" type="success" />

      <div v-if="mchApplymentData.ifCode">
        <!--        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">产品费率</a-divider>-->



        <div label="配置费率" name="fee" style="width:100%;">
          <!--          <JeepayPaywayRatePanel -->
          <!--            ref="jeepayPaywayRatePanelRef" -->
          <!--            :configMode="configMode"-->
          <!--            :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" -->
          <!--            :selectIfCode="mchApplymentData.ifCode" -->
          <!--            onlyRate="true"-->
          <!--            :channelStatus="'2'"-->
          <!--            :channelNo="mchApplymentData.isvNo"-->
          <!--            :channelRange="mchApplymentData.range"-->
          <!--            :channelAppId="mchApplymentData.autoConfigMchAppId"-->
          <!--          />-->
          <JeepayPaywayRateUserOfflinePanel
              v-if="mchApplymentData.range == 0"
              ref="jeepayPaywayRateUserOfflinePanelRef"
              :configMode="configMode"
              :infoId="
            (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo
          "
              :selectIfCode="mchApplymentData.ifCode"
              onlyRate="true"
              :channelNo="mchApplymentData.isvNo"
              :channelRange="mchApplymentData.range"
              :channelAppId="mchApplymentData.autoConfigMchAppId"
              :settlementMethod="vdata.settlementMethod"
          />
          <JeepayPaywayRateUserOnlinePanel
              v-if="mchApplymentData.range == 1"
              ref="jeepayPaywayRateUserOnlinePanelRef"
              :configMode="configMode"
              :infoId="
            (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo
          "
              :selectIfCode="mchApplymentData.ifCode"
              onlyRate="true"
              :channelNo="mchApplymentData.isvNo"
              :channelRange="mchApplymentData.range"
              :channelAppId="mchApplymentData.autoConfigMchAppId"
              :settlementMethod="vdata.settlementMethod"
          />
        </div>
      </div>
    </a-form>
    <a-divider />

    <div class="jeepay-btn-box jeepay-m-btn-box" style="margin-top: 50px; margin-bottom: 50px;text-align: center;">
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep > 1" class="jeepay-m-btn" data-type="inline" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      <a-button v-show="vdata.showStyle == showStyleEnum.step && vdata.currentStep < 4" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {watch,reactive, getCurrentInstance, defineEmits, inject, ref, nextTick} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import {SelectProps} from "ant-design-vue";
import {debounce} from "lodash-es";
import {$bankBranchList, $getSettType} from '@/api/manage'
import fileDownload from 'js-file-download'

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox,$viewerApi } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()
const jeepayPaywayRateUserOfflinePanelRef = ref()
const jeepayPaywayRateUserOnlinePanelRef = ref()
const jeepayAmapRef = ref()

// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// emit： 向父组件进行通讯。
const emit = defineEmits(['itemRender'])

// 参数注入： 是否手机端
let isMobile : any = inject('isMobile')

// 响应式数据
const vdata : any = reactive({
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示
  steps: ['主体信息', '经营信息', '结算信息', '费率配置'],
  isTempData: false, // 是否保存草稿
  payWayFee : '未设置',
  currentStep: 1,
  settlementMethod:[] as any,
  bankInfoList: [],
  filteredBankInfoList: [],
  standByBankInfoList: [],
  filteredStandByBankInfoList: [],
  step1Rules: {
    merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
    licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
    mchFullName: [ ruleGenerator.requiredUpload('营业执照名称') ],
    idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面照片') ],
    idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面照片') ],
    idcardInHandImg: [ruleGenerator.requiredUpload("法人手持身份证照片")],
    licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
    licenseBusiness: [ ruleGenerator.requiredInput('经营内容') ],
    licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照起始有限期'), ruleGenerator.dateOrForever ],
    licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照截止有限期'), ruleGenerator.dateOrForever ],
    mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
    idcardName: [ ruleGenerator.requiredInput('法人身份证姓名') ],
    idcardNo: [ ruleGenerator.requiredInput('法人身份证号') ],
    idCardPhone: [ ruleGenerator.requiredInput('法人手机号') ],
    idcardAddress: [ ruleGenerator.requiredInput('法人身份证居住地址') ],
    idCardEmail: [ ruleGenerator.requiredInput('法人邮箱') ],
    idcardEffectBegin: [ ruleGenerator.requiredInput('法人身份证起始有效期'), ruleGenerator.date ],
    idcardEffectEnd: [ ruleGenerator.requiredInput('法人身份证有效期截止日期'), ruleGenerator.dateOrForever ],
  },
  step2Rules: {
    loginUserName: [ ruleGenerator.requiredInput('管理员账号') ],
    mchFullName: [ ruleGenerator.requiredInput('用户名称') ],
    merEnName: [ ruleGenerator.requiredInput('商户英文名称') ],
    mccCode: [ ruleGenerator.requiredSelect('行业') ],
    unionMchType: [ ruleGenerator.requiredSelect('银联商户类别') ],
    entType: [ ruleGenerator.requiredSelect('公司类型') ],
    busiType: [ ruleGenerator.requiredSelect('经营类型') ],
    mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
    receiptName: [ ruleGenerator.requiredInput('小票名称') ],
    // contactIdcard1Img: [ ruleGenerator.requiredInput('联系人身份证人像面照片') ],
    contactIdcardNo: [ ruleGenerator.requiredInput('联系人身份证号') ],
    contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
    contactPhone: [ ruleGenerator.requiredInput('联系人电话') ],
    contactEmail: [ ruleGenerator.requiredInput('联系人邮箱'), ruleGenerator.emall ],
    storeOuterImg: [ ruleGenerator.requiredInput('门头照') ],
    storeInnerImg: [ ruleGenerator.requiredInput('店内环境照') ],
    storeCashierImg: [ ruleGenerator.requiredInput('收银台照') ],
    cashierWithSettlerImg: [ ruleGenerator.requiredInput('请提供结算人站在收银台内的照片') ],
    areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],

    // regCapital: [ ruleGenerator.requiredInput('注册资本', 'number') ],
    regCapital: [ ruleGenerator.requiredInput('注册资本') ],
    address: [ ruleGenerator.requiredInput('经营地址') ],
    servicePhone: [ ruleGenerator.requiredInput('客服电话') ],
  },
  step3Rules: {
    settAccountNo: [ ruleGenerator.requiredInput('银行帐号') ],
    settAccountLicenseImg: [ ruleGenerator.requiredInput('结算卡数字面') ],
    settAccountName: [ ruleGenerator.requiredInput('开户名') ],
    companyAccountLicenseImg: [ ruleGenerator.requiredInput('开户许可证照片') ],
    settAccountIdcardNo: [ ruleGenerator.requiredInput('身份证号') ],
    settAccountIdcardEffectBegin: [ ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date ],
    settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],
    settAccountBindPhone: [ ruleGenerator.requiredInput('手机号') ],
    settleAuthLetterPhoto: [ ruleGenerator.requiredInput('非法人结算授权函') ],
    // settleAuthLetterHandlePhoto: [ ruleGenerator.requiredInput('法人手持非法人结算授权函') ],
    settAccountType: [ ruleGenerator.requiredSelect('结算账号类型', 'string') ],
    // bankCode: [ ruleGenerator.requiredInput('银行编码') ],
    // branchCode: [ ruleGenerator.requiredInput('联行号') ],
    // branchName: [ ruleGenerator.requiredInput('支行名称') ],
    settAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('支行地区', 'array') ],
    settAccountBankBranchName: [ ruleGenerator.requiredInput('开户支行') ],
    settleCycle: [ ruleGenerator.requiredInput('结算类型') ],

  },
  step4Rules: {
    storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
    storeInnerImg: [ ruleGenerator.requiredUpload('内景照') ],
    aliFeeMcc: [ ruleGenerator.requiredSelect('经营类目', 'string') ],
  },

})

// 接收进件参数（包含 用户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value
console.log(mchApplymentData,'mchApplymentData')


// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value
console.log(applymentDetailInfo,'applymentDetailInfoapplymentDetailInfo')
getSettType()
// getRegCapital()
// 参数注入： 配置方式
let configMode : any = inject('configMode')
watch(() => applymentDetailInfo.settAccountBankName, (newValue, oldValue) => {
  if (newValue != oldValue) {
    changeBankAreaFunc()
  }
});
// 开户行所在省市区
const changeBankAreaFunc:any = debounce((value) => {
  console.log(value,'changeBankAreaFuncchangeBankAreaFuncchangeBankAreaFunc')
  // 区编码
  if (applymentDetailInfo?.settAccountBankBranchAreaCode?.[1]) {
    applymentDetailInfo.openAccCity = applymentDetailInfo?.settAccountBankBranchAreaCode?.[1];
    applymentDetailInfo.openAccCityName = value[1].label;

    // 区编码
    if (applymentDetailInfo?.openAccCity) {
      vdata.bankInfoList = []
      vdata.filteredBankInfoList = []

      const param = {
        cityCode: applymentDetailInfo.openAccCityName,
        branchName: applymentDetailInfo.settAccountBankName,
      };
      console.log(mchApplymentData,'mchApplymentData')
      $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, param,mchApplymentData.isvNo).then((res) => {
        if (res?.length) {
          res.forEach(element => {
            const item = {
              label: element.branchName,
              value: element.branchNo,
              bankName: element.bankName,
              bankCode: element.bankCodeDg,
            };
            vdata.bankInfoList.push(item);
            vdata.filteredBankInfoList.push(item);
          })
        } else {
          $infoBox.message.error('该地区下未找到对应银行列表')
        }
      })
    } else {
      $infoBox.message.warn('请先选择地区')
    }
  }
}, 300)
// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
    vdata.currentStep ++
  })
  mapInit()
}

// 上一步
function toPrevStep(){
  mapInit()
  vdata.currentStep --
}

function validateAllForm(step: number){
  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
    if(step >= 4){
      return Promise.resolve()
    }
    return validateAllForm(++step)

  })
}

// 图片识别的回调函数
function ocrScanFunc(orcObject: any){
  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)
    getIdcardName()

  }
}

// 图片识别的回调函数
function ocrScanSttFunc(orcObject: any){
  if(orcObject){
    orcObject.settAccountBankBranchName = orcObject.settAccountBankName
    Object.assign(applymentDetailInfo, orcObject)
    addCity(orcObject.settAccountBankName)
    getIdcardName()
  }
}

// 图片识别的回调函数
function ocrScanContactFunc(orcObject: any){
  if(orcObject){
    // Object.assign(applymentDetailInfo, orcObject)
    if(orcObject.idcardName){
      applymentDetailInfo.contactName = orcObject.idcardName
      applymentDetailInfo.contactIdcardNo = orcObject.idcardNo
    }
  }
}

// 图片识别的回调函数
function ocrScan2Func(orcObject: any){
  if(orcObject){
    // Object.assign(applymentDetailInfo, orcObject)
    // 自动填入 结算卡名称
    if(orcObject.idcardName){
      applymentDetailInfo.settAccountName = orcObject.idcardName
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin) {
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  let mapData = jeepayAmapRef.value.getMapData()
  if(mapData.address) {
    // applymentDetailInfo.areaCode = mapData.areacode
    // applymentDetailInfo.address = mapData.address
  }

  if(mapData.lnglat && mapData.lnglat.indexOf(',') > 0){
    applymentDetailInfo.longtude = mapData.lnglat.split(',')[0]
    applymentDetailInfo.latitude = mapData.lnglat.split(',')[1]
  }

  // 放置费率配置项
  // if(jeepayPaywayRatePanelRef.value) {
  //   let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  //   if(typeof(paywayFeeList) != 'object'){
  //       return Promise.reject()
  //   }
  //   // 赋值到对象中
  //   applymentDetailInfo.paywayFeeList = paywayFeeList
  // }

  if(mchApplymentData.range == 0 && jeepayPaywayRateUserOfflinePanelRef.value){
    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRateUserOfflinePanelRef.value.getReqMchRatePaywayFeeList();
    if (typeof paywayFeeList != "object") {
      return Promise.reject();
    }
    // 赋值到对象中
    applymentDetailInfo.paywayFeeList = paywayFeeList;
  }

  if(mchApplymentData.range == 1 && jeepayPaywayRateUserOnlinePanelRef.value){
    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRateUserOnlinePanelRef.value.getReqMchRatePaywayFeeList();
    if (typeof paywayFeeList != "object") {
      return Promise.reject();
    }
    // 赋值到对象中
    applymentDetailInfo.paywayFeeList = paywayFeeList;
  }

  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1).then(() => {
    return Promise.resolve()
  }).catch((params: any) => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })
}

function funLegalInfo(value) {
  if(value == '1'){
    // 联系人身份证
    applymentDetailInfo.settAccountIdcard1Img = applymentDetailInfo.idcard1Img
    applymentDetailInfo.settAccountIdcard2Img = applymentDetailInfo.idcard2Img
    applymentDetailInfo.settAccountIdcardNo = applymentDetailInfo.idcardNo
    applymentDetailInfo.contactIdcardNo = applymentDetailInfo.idcardNo
    applymentDetailInfo.contactName = applymentDetailInfo.idcardName
    applymentDetailInfo.contactPhone = applymentDetailInfo.idCardPhone
    applymentDetailInfo.contactEmail = applymentDetailInfo.idCardEmail
    // applymentDetailInfo.mchAddress = applymentDetailInfo.idcardAddress

    applymentDetailInfo.settAccountIdcardEffectBegin = applymentDetailInfo.idcardEffectBegin
    applymentDetailInfo.settAccountIdcardEffectEnd = applymentDetailInfo.idcardEffectEnd
    applymentDetailInfo.settAccountBindPhone = applymentDetailInfo.contactPhone

  }else {
    applymentDetailInfo.settAccountIdcard1Img = ''
    applymentDetailInfo.settAccountIdcard2Img = ''
    applymentDetailInfo.settAccountIdcardNo = ''
    applymentDetailInfo.settAccountIdcardEffectBegin = ''
    applymentDetailInfo.settAccountIdcardEffectEnd = ''
    applymentDetailInfo.settAccountBindPhone = ''
  }
}

function mapInit() {
  let mapData = jeepayAmapRef.value.getMapData()
  if(mapData.address) {
    // applymentDetailInfo.areaCode = mapData.areacode
    // applymentDetailInfo.address = mapData.address
  }
  if(!applymentDetailInfo.mchFullName) {
    applymentDetailInfo.mchFullName = applymentDetailInfo.mchShortName
  }

  if(mapData.lnglat && mapData.lnglat.indexOf(',') > 0){
    applymentDetailInfo.longtude = mapData.lnglat.split(',')[0]
    applymentDetailInfo.latitude = mapData.lnglat.split(',')[1]
  }

  // 地图加载
  let initMapData : any = {}
  // 门店包含了区域编码
  if(applymentDetailInfo.areaCode && applymentDetailInfo.areaCode.length){
    // initMapData.areacode = applymentDetailInfo.areaCode
    initMapData.lnglat = applymentDetailInfo.longtude + ',' + applymentDetailInfo.latitude
    initMapData.address = applymentDetailInfo.address
  }
  // 显示地图信息
  nextTick(() => jeepayAmapRef.value.init(initMapData))
}

function funMchTypeInfo(value) {
  if(value == '1'){
    applymentDetailInfo.settAccountType = 'C'
  }else {
    applymentDetailInfo.settAccountType = ''
  }
}

function getMchShortName() {
  applymentDetailInfo.receiptName = applymentDetailInfo.mchShortName
}

const handleBankSearch = (option) => {
  console.log("handBankSearch", option);
  if(!isChinese(option)){
    return false;
  }
  // vdata.filteredBankInfoList = [];
  // vdata.bankInfoList.forEach((item: { label: string | any[]; }) => {
  //   if (item.label.includes(value)) {
  //     vdata.filteredBankInfoList.push(item);
  //   }
  // });
  // applymentDetailInfo.settAccountBankBranchName = option
  addCity(option)
};
function isChinese(str) {
  var reg = /[\u4e00-\u9fa5]/; // Unicode范围内的汉字编码
  return reg.test(str);
}

const handleBankChange: SelectProps['onChange'] = (option :any) => {
  console.log("handleBankChange", option);
  applymentDetailInfo.bankSubCode = option;
  vdata.filteredBankInfoList.forEach(item => {
    if (item.value == option.value) {
      console.log(item,'itemitem')
      applymentDetailInfo.settAccountBankBranchName = item.label
      applymentDetailInfo.bankCode = item.bankCode
      applymentDetailInfo.branchCode   = item.value
      applymentDetailInfo.branchName = item.label
    }
  });
};

function addCity(value) {
  vdata.bankInfoList = []
  vdata.filteredBankInfoList = []
  const param = {
    cityCode: applymentDetailInfo.openAccCityName,
    branchName: value,
  };
  console.log(param,'mchApplymentData')
  $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, param,mchApplymentData.isvNo).then((res) => {
    if (res?.length) {
      res.forEach(element => {
        const item = {
          label: element.branchName,
          value: element.branchNo,
          bankName: element.bankName,
          bankCode: element.bankCodeDg,
        };
        vdata.bankInfoList.push(item);
        vdata.filteredBankInfoList.push(item);
      })
    } else {
      $infoBox.message.error('该支行名称未搜索到或该地区没有对应的银行列表')
    }
  })
}

function getSettlementAccountType() {
  if(applymentDetailInfo.settAccountType == 'B'){//对公

  }
  if(applymentDetailInfo.settAccountType == 'C'){//对私法人
    applymentDetailInfo.isLegalInfo = 1
  }

  if(applymentDetailInfo.settAccountType == 'D'){//对私非法人
    applymentDetailInfo.isLegalInfo = 0
  }
  funLegalInfo(applymentDetailInfo.isLegalInfo)

  getIdcardName()
  emit('itemRender')
}
function getIdcardName() {
  if(applymentDetailInfo.settAccountType == 'B'){
    applymentDetailInfo.settAccountName =   applymentDetailInfo.mchFullName
  }else{
    applymentDetailInfo.settAccountName =   applymentDetailInfo.idcardName;
  }
}
function lookUp(type){
  let  images = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/dgsettleAuthLetterPic.png';
  if(type == 2){
     images = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/cashier_photo.jpg';
  }else if(type == 4){
    images = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/dgsettleAuthLetterPhoto.png';
  }
  $viewerApi({images: [images]})
}
function download(){
  let fileUrl = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/dgsettleAuthLetterPhoto.png';

  if(isMobile){
    lookUp(4)
    return false;
  }
  // 创建一个虚拟的 a 标签
  const link = document.createElement('a');
  link.href = fileUrl;
  link.target = '_blank'; // 在新窗口或标签页中打开
  link.download = 'filename'; // 下载的文件名，你可以根据需要更改

  // 将 a 标签添加到 DOM 中
  document.body.appendChild(link);

  // 模拟点击 a 标签，触发下载
  link.click();

  // 移除添加的 a 标签
  document.body.removeChild(link);
}
function getSettType() {
  $getSettType( mchApplymentData.ifCode,mchApplymentData.isvNo).then((res) => {
    vdata.settlementMethod = res
  })
}

function changeMchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  vdata.city = value[1].label;
  applymentDetailInfo.areaName = [] as any;
  const areaCodeName = value[0].label + '' + value[1].label + '' + value[2]?.label + ''
  applymentDetailInfo.areaCodeName=areaCodeName
  applymentDetailInfo.mchAddressCodeName=areaCodeName

  applymentDetailInfo.areaName.push(value[0].label)
  applymentDetailInfo.areaName.push(value[1].label)
  applymentDetailInfo.areaName.push(value[2].label)



  // applymentDetailInfo.address = value[0].label + '' + value[1].label + '' + value[2]?.label + ''
  applymentDetailInfo.address =( areaCodeName+applymentDetailInfo.mchAddress).replaceAll('undefined', '');

  applymentDetailInfo.areaCodeName = value[0].label + '/' + value[1].label + '/' + value[2]?.label + ''
}
function changeMchAddressFunc(){
  const areaCodeName =  applymentDetailInfo.areaCodeName.replaceAll('/', '');
  applymentDetailInfo.address = areaCodeName+(applymentDetailInfo.mchAddress??"")
}

// function getRegCapital() {
//   applymentDetailInfo.regCapital = applymentDetailInfo.regCapital
// }
defineExpose({ saveDataPreCallback })

</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
.option-left {
  width: 50%;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
.option-right {
  color: rgb(153, 153, 153);
}
.option-bottom {
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}
.jeepay-btn-box {
  margin: 15px -12px !important;
}
.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
:deep(.jeepay-valid .ant-form-item-control-input-content){
  display: block !important;
}
.jeepay-tip-span::before{
  display: none !important;
}
</style>