<template>
  <div class="jeepay-m-center" :style="isMobile?'margin-top: 50px !important; margin-left: 20px; overflow: auto;':'margin-top: 5px; margin-left: 20px; overflow: auto;'">

    <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" @change="changeMerchantType">
          <a-radio :value="1">小微商户</a-radio>
          <a-radio :value="2">个体商户</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" :imgSize="2" bizType="applyment" ocrType="license"
                        @ocrScan="ocrScanFunc"/>
          <span class="jeepay-tip-text">(上传图片自动识别 营业执照编号)</span>
        </a-form-item>
        <a-form-item :label="applymentDetailInfo.merchantType === 1?'用户名称':'营业执照名称'" name="mchFullName">
          <a-input v-model:value.trim="applymentDetailInfo.mchFullName" @change="getDiySettAccountName"/>
        </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="licenseAddress">-->
        <!--          <a-input v-model:value.trim="applymentDetailInfo.licenseAddress"/>-->
        <!--        </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>

      <!-- <a-form-item :label="applymentDetailInfo.merchantType === 1?'用户名称':'营业执照名称'" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName"/>
      </a-form-item> -->

      <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" :imgSize="2" 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" :imgSize="2" bizType="applyment" ocrType="idCard"
                      @ocrScan="ocrScanFunc"/>
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1" label="法人手持身份证照片" name="idcardInHandImg">
        <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="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="legalPersonPhone">
        <a-input v-model:value.trim="applymentDetailInfo.legalPersonPhone"/>
      </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>
    </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-form-item :label="'商户全称'" name="mchFullName">-->
      <!--        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" :disabled="true" placeholder="填写商户简称和经营城市后自动补全"/>-->
      <!--      </a-form-item>-->
      <!--      <a-form-item label="商户简称" name="mchShortName">-->
      <!--        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" @change="getMchFullName"  placeholder="填写门店或品牌名称，支付时或小票页展示"/>-->
      <!--      </a-form-item>-->
      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" placeholder="填写门店或品牌名称，支付时或小票页展示"/>
      </a-form-item>

      <a-form-item label="经营类型" name="microBizType" v-if="applymentDetailInfo.merchantType == 1">
        <a-select v-model:value="applymentDetailInfo.microBizType" 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 label="经营类目（MCC）" name="mccCode">
        <JeepayRyxMccSelect v-model:value="applymentDetailInfo.mccCode" :operationalType="applymentDetailInfo.merchantType" @change="changeMccFunc" />
        <!--        <a-select-->
        <!--            ref="select"-->
        <!--            v-model:value="applymentDetailInfo.mccCode"-->
        <!--            :options="mccRyxJSON"-->
        <!--            style="width: 100%"-->
        <!--            placeholder="请选择省"-->
        <!--            @change="cityHandleChange(cityOptions.city)"-->
        <!--        >-->
        <!--        </a-select>-->
      </a-form-item>

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">经营信息</a-divider>
      <!-- <a-form-item v-if="applymentDetailInfo.merchantType !== 1" label="实际控制人姓名" name="actualManager">
        <a-input v-model:value.trim="applymentDetailInfo.actualManager" />
      </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="contactIdcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.contactIdcardNo"/>
      </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="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail"/>
      </a-form-item>
      <a-form-item label="商户联系人身份证起始有效期" name="contactIdcardEffectBegin">
        <a-input v-model:value.trim="applymentDetailInfo.contactIdcardEffectBegin"  placeholder="示例：2023-10-10"/>
        <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
      </a-form-item>

      <a-form-item class="jeepay-valid" label="商户联系人身份证结束有效期" name="contactIdcardEffectEnd">
        <div>
          <a-input v-model:value.trim="applymentDetailInfo.contactIdcardEffectEnd"
                   :disabled="applymentDetailInfo.contactIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;"  placeholder="示例：2023-10-10"/>
          <a-checkbox :checked="applymentDetailInfo.contactIdcardEffectEnd == '长期' "
                      @change="(e) => applymentDetailInfo.contactIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期
          </a-checkbox>
        </div>
        <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
      </a-form-item>


      <!-- PC 城市样式 -->
      <!-- <a-form-item label="商户经营省市县" name="areaCode" v-if="!isMobile">
        <JeepayAreaSelectYs v-model:value="applymentDetailInfo.areaCode" @change="changeMchAreaFunc"/>
      </a-form-item> -->

      <!-- web城市样式 -->
      <a-form-item label="商户经营省" required v-if="isMobile">
        <a-select
            ref="select"
            v-model:value="cityOptions.city"
            :options="areacodeRyx"
            style="width: 100%"
            placeholder="请选择省"
            @change="cityHandleChange(cityOptions.city)"
        >
        </a-select>
      </a-form-item>

      <a-form-item label="商户经营省市区" required v-if="isMobile">
        <a-select
            ref="select"
            v-model:value="cityOptions.county"
            :options="countyList.list"
            placeholder="请选择市"
            style="width: 100%"
            @change="countyHandleChange(cityOptions.county)"
        >
        </a-select>
      </a-form-item>

      <a-form-item label="商户经营区" required v-if="isMobile">
        <a-select
            ref="select"
            placeholder="请选择区"
            v-model:value="cityOptions.district"
            :options="districtList.list"
            style="width: 100%"
            @change="districtHandleChange(cityOptions.district)"
        >
        </a-select>
      </a-form-item>

      <a-form-item label="商户经营市" name="areaCode" v-if="!isMobile">
        <JeepayAreaSelectRyx v-model:value="applymentDetailInfo.areaCode" @change="changeMchAreaFunc"/>
      </a-form-item>


      <a-form-item label="商户经营地址" name="mchAddress">
        <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>

      <a-form-item label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" :imgSize="2"/>
      </a-form-item>

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

      <a-form-item label="收银台照" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" :imgSize="2"/>
      </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(3)"><b>《查看示例》</b></a>  )</span>
      </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">

        <!--        settAccountType   @change="() => emit('itemRender')" -->
        <a-radio-group v-model:value="applymentDetailInfo.settlementAccountType" @change="getSettlementAccountType">
          <a-radio value="1">法人对私</a-radio>
          <a-radio value="2" v-if="applymentDetailInfo.merchantType != 1">非法人对私</a-radio>
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="3">对公</a-radio>
          <!--          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B2">对公存折</a-radio>-->
          <!--          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="D">单位结算卡</a-radio>-->
        </a-radio-group>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType == 'C' && applymentDetailInfo.settlementAccountType == 2">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人证件信息</a-divider>
        <!--        <a-form-item label="是否法人结算" name="authSettle">-->
        <!--          <a-radio-group v-model:value="applymentDetailInfo.authSettle" @change="() => emit('itemRender')">-->
        <!--            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="Y">非法人</a-radio>-->
        <!--            <a-radio value="N">法人</a-radio>-->
        <!--          </a-radio-group>-->
        <!--        </a-form-item>-->
      </div>

      <!-- isUncrpSett 为银盛专用字段，这里提供新的公共字段使用 authSettle -->
      <div v-if="applymentDetailInfo.authSettle == 'Y'  && applymentDetailInfo.settlementAccountType == 2">
        <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" :imgSize="2"
                        ocrType="idCard" @ocrScan="ocrScanSettFunc"/>
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

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

        <a-form-item label="结算人开户名" name="settAccountName">
          <a-input v-model:value.trim="applymentDetailInfo.settAccountName"/>
          <span class="jeepay-tip-text">如：张三</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"/>
        </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;"/>
            <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>

        <!-- 不需要 -->
        <!--        <a-form-item label="结算人身份证地址" name="settleAuthAddress">-->
        <!--          <a-input v-model:value.trim="applymentDetailInfo.settleAuthAddress"/>-->
        <!--        </a-form-item>-->


      </div>


      <a-divider v-if="applymentDetailInfo.authSettle == 'Y' && applymentDetailInfo.settlementAccountType == 2" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人账户信息</a-divider>
      <div v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settAccountType != 'C'">
        <a-form-item label="开户许可证照片" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" :imgSize="2"/>
        </a-form-item>
      </div>


      <div v-else>
        <a-form-item label="结算卡数字面" name="settAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" :imgSize="2"
                        ocrType="bankCard" @ocrScan="ocrScanFunc"/>
          <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
        </a-form-item>

        <!-- <a-form-item label="结算银行卡反面照片" name="settAccountBankImg2">
          <JeepayUpload v-model:src="applymentDetailInfo.settAccountBankImg2" bizType="applyment" :imgSize="2"/>
        </a-form-item> -->
      </div>

      <!-- settAccountName为结算账户名的公共字段，不再使用 diySettAccountName -->
      <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-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settlementAccountType == 1 && applymentDetailInfo.settAccountType == 'C'" disabled />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-if="applymentDetailInfo.merchantType != 1 && applymentDetailInfo.settlementAccountType == 2 && applymentDetailInfo.settAccountType == 'C'"  />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName"  v-if="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">
        <JeepayAreaSelectRyx
            v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode"
            @change="changeBankAreaFunc"/>
      </a-form-item>

      <!--      <a-form-item label="开户银行" name="settAccountBankName">-->
      <!--        <a-input v-model:value.trim="applymentDetailInfo.settAccountBankName"/>-->
      <!--      </a-form-item>-->

      <!-- 开户支行联行号使用公共字段 settAccountBankBranchCode -->
      <a-form-item label="开户支行" name="settAccountBankBranchName">
        <a-select
            v-model:value="applymentDetailInfo.settAccountBankBranchName"
            placeholder="选择支行"
            show-search
            label-in-value
            :filter-option="false"
            @search="handleBankSearch"
            @change="handleBankChange"
            :getPopupContainer="(triggerNode) => triggerNode.parentElement"
        >
          <a-select-option v-for="(item, index) in vdata.filteredBankInfoList" :key="index" :value="item.value">
            {{ item.label }}
          </a-select-option>
        </a-select>
        <span class="jeepay-tip-text">(填写银行卡号并且选择开户行省市县后将展开支行列表)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.authSettle == 'Y'  && applymentDetailInfo.settlementAccountType == 2" label="银行卡预留手机号" name="bankMobile">
        <a-input v-model:value.trim="applymentDetailInfo.bankMobile"/>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.authSettle == 'Y'  && applymentDetailInfo.settlementAccountType == 2" label="非法人结算授权函" name="letterOfAuthPic">
        <JeepayUpload v-model:src="applymentDetailInfo.letterOfAuthPic" 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>



      <!-- 不需要  -->
      <!--      <div v-if="applymentDetailInfo.authSettle == 'Y'  && applymentDetailInfo.settlementAccountType == 2">-->
      <!--        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">备用结算信息</a-divider>-->
      <!--        &lt;!&ndash;        <a-form-item label="备用结算账户类型" name="standByStlAccType">&ndash;&gt;-->
      <!--        &lt;!&ndash;          <a-radio-group v-model:value="applymentDetailInfo.standByStlAccType" @change="() => emit('itemRender')">&ndash;&gt;-->
      <!--        &lt;!&ndash;            <a-radio value="C">对私</a-radio>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B">对公</a-radio>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B2">对公存折</a-radio>&ndash;&gt;-->
      <!--        &lt;!&ndash;            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="D">单位结算卡</a-radio>&ndash;&gt;-->
      <!--        &lt;!&ndash;          </a-radio-group>&ndash;&gt;-->
      <!--        &lt;!&ndash;        </a-form-item>&ndash;&gt;-->

      <!--        <a-form-item label="法人银行卡数字面" name="standByStlAccCardImg">-->
      <!--          <JeepayUpload v-model:src="applymentDetailInfo.standByStlAccCardImg" bizType="applyment" :imgSize="2"-->
      <!--                        ocrType="bankCard" @ocrScan="ocrStandByStlAccCardImgFunc"/>-->
      <!--          <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>-->
      <!--        </a-form-item>-->

      <!--        <a-form-item label="法人银行卡开户名" name="standByStlAccNm">-->
      <!--          <a-input v-model:value.trim="applymentDetailInfo.standByStlAccNm" placeholder="请输入法人银行卡开户名" disabled/>-->
      <!--        </a-form-item>-->

      <!--        <a-form-item label="法人银行卡账号" name="standByStlAccNo">-->
      <!--          <a-input v-model:value.trim="applymentDetailInfo.standByStlAccNo" placeholder="请输入法人银行卡账号"/>-->
      <!--        </a-form-item>-->

      <!--        <a-form-item label="法人开户银行省市县" name="standByAccountBankBranchAreaCode">-->
      <!--          <JeepayAreaSelectYs v-model:value="applymentDetailInfo.standByAccountBankBranchAreaCode"-->
      <!--                              @change="changeStandByAccountBankBranchAreaCodeFunc"/>-->
      <!--        </a-form-item>-->

      <!--        <a-form-item label="法人账户开户银行" name="standByAccountBankName">-->
      <!--          <a-input v-model:value.trim="applymentDetailInfo.standByAccountBankName"/>-->
      <!--        </a-form-item>-->
      <!--        -->
      <!--        <a-form-item label="开户支行" name="standByBankSubCode">-->
      <!--          <a-select-->
      <!--              v-model:value="applymentDetailInfo.standByBankSubCode"-->
      <!--              placeholder="选择支行"-->
      <!--              show-search-->
      <!--              :filter-option="false"-->
      <!--              @search="handleStandByBankSearch"-->
      <!--              @change="handleStandByBankChange">-->
      <!--            <a-select-option v-for="(item, index) in vdata.filteredStandByBankInfoList" :key="index"-->
      <!--                             :value="item.value">-->
      <!--              {{ item.label }}-->
      <!--            </a-select-option>-->
      <!--          </a-select>-->
      <!--          <span class="jeepay-tip-text">(填写银行卡号并且选择开户行省市县后将展开支行列表)</span>-->
      <!--        </a-form-item>-->
      <!--      </div>-->


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

      </a-divider>


      <a-form-item  label="结算类型" name="settlementType" >
        <div style="display: grid">
          <a-radio-group v-model:value="applymentDetailInfo.settlementType">
            <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.settAccountCut == 'D0'">(注意：D0实时到账会有额外的秒到手续费，详见下一步费率信息)</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: 16 }"
        :rules="vdata.step4Rules"
    >
      <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"-->
        <!--            :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>
    </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 {$bankBranchList,$getSettType} from '@/api/manage'
import ruleGenerator from '@/utils/ruleGenerator'
import {debounce} from "lodash-es";
import {SelectProps} from "ant-design-vue";
import areacodeRyx from "../../../JeepayAreaSelect/areacodeRyx.json";
import mccRyxJSON from "../../../JeepayMccSelect/mccRyx.json";
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 cityOptions:any=reactive({
  city:'',
  county:'',
  district:'',
  cityLable:'',
  countyLable:'',
  districtLable:'',
})
const countyList :any =reactive({
  list:[]
})
const districtList :any=reactive({
  list:[]
})


const cityHandleChange=(e)=>{
  cityOptions.county=''
  cityOptions.district=''
  areacodeRyx.map((item)=>{
    if(item.value===e){
      countyList.list=item.children
      cityOptions.cityLable=item.label
    }
  })
}

const countyHandleChange=(e)=>{
  cityOptions.district=''
  countyList.list.map((item)=>{
    if(item.value===e){
      districtList.list=item.children
      cityOptions.countyLable=item.label
    }
  })
}

const districtHandleChange=(e)=>{
  districtList.list.map((item)=>{
    if(item.value===e){
      cityOptions.districtLable=item.label
    }
  })
  vdata.city = cityOptions.countyLable;
  applymentDetailInfo.areaCode = [] as any;
  applymentDetailInfo.areaName = [] as any;
  applymentDetailInfo.areaCodeName = cityOptions.cityLable + '-' + cityOptions.countyLable + '-' + cityOptions.districtLable + ''
  applymentDetailInfo.mchAddressCodeName = cityOptions.cityLable + '-' + cityOptions.countyLable + '-' + cityOptions.districtLable + ''

  // applymentDetailInfo.areaCode = [cityOptions.city , cityOptions.county , cityOptions.district]
  applymentDetailInfo.areaCode.push(cityOptions.city)
  applymentDetailInfo.areaCode.push(cityOptions.county)
  applymentDetailInfo.areaCode.push(cityOptions.district)
  applymentDetailInfo.areaName.push(cityOptions.cityLable)
  applymentDetailInfo.areaName.push(cityOptions.countyLable)
  applymentDetailInfo.areaName.push(cityOptions.districtLable)


  applymentDetailInfo.address = cityOptions.cityLable + '' + cityOptions.countyLable + '' + cityOptions.districtLable + ''

  // if (applymentDetailInfo.address) {
  //   applymentDetailInfo.address = ''
  // }
  // vdata.city = value[1].label;
  // const areaCodeName = value[0].label + '' + value[1].label + '' + value[2]?.label + ''
  // applymentDetailInfo.areaCodeName=areaCodeName
  // console.log(applymentDetailInfo.areaCodeName);

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

  // applymentDetailInfo.areaCodeName = value[0].label + '/' + value[1].label + '/' + value[2]?.label + ''
  getMchFullName()
  console.log(e);
}
// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}
const props : any = defineProps({
  channelAppId: { type: String, default: '' },
  channelIsvNo: { type: String, default: '' },
})

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

// 参数注入： 是否手机端
let isMobile: any = inject('isMobile')
const value1:any= reactive({})
// 响应式数据
const vdata: any = reactive({
  city:"",
  showStyle: 'step', // 显示类型： step-分步,  block-整页显示
  steps: ['主体信息', '经营信息', '结算信息', '费率配置'],
  isTempData: false, // 是否保存草稿
  payWayFee: '未设置',
  settlementMethod:[] as any,
  currentStep: 1,
  bankInfoList: [],
  filteredBankInfoList: [],
  standByBankInfoList: [],
  filteredStandByBankInfoList: [],
  step1Rules: {
    merchantType: [ruleGenerator.requiredSelect('商户类型', 'number')],
    licenseImg: [ruleGenerator.requiredUpload('营业执照照片')],
    licenseNo: [ruleGenerator.requiredInput('营业执照编号')],
    licenseEffectBegin: [ruleGenerator.requiredInput('营业执照起始有限期'), ruleGenerator.dateOrForever],
    licenseEffectEnd: [ruleGenerator.requiredInput('营业执照截止有限期'), ruleGenerator.dateOrForever],
    mchFullName: [ruleGenerator.requiredInput('用户名称')],
    idcardName: [ruleGenerator.requiredInput('身份证中的姓名')],
    idcardNo: [ruleGenerator.requiredInput('身份证号')],
    idcardAddress: [ruleGenerator.requiredInput('法人地址')],
    legalPersonPhone: [ruleGenerator.requiredInput('法人电话')],
    idcardEffectBegin: [ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date],
    idcardEffectEnd: [ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever],
    idcard1Img: [ruleGenerator.requiredUpload('法人身份证人像面照片')],
    idcard2Img: [ruleGenerator.requiredUpload('法人身份证国徽面照片')],
    licenseAddress: [ruleGenerator.requiredInput('营业执照注册地址')],
    idcardInHandImg: [ruleGenerator.requiredUpload('法人手持身份证照片')],
  },
  step2Rules: {
    mccCode: [ruleGenerator.requiredSelect('行业')],
    microBizType: [ruleGenerator.requiredSelect('经营类型')],
    mchShortName: [ruleGenerator.requiredInput('商户简称')],
    contactName: [ruleGenerator.requiredInput('联系人姓名')],
    contactPhone: [ruleGenerator.requiredInput('联系人电话')],
    contactEmail: [ruleGenerator.requiredInput('联系人邮箱')],
    contactIdcardNo: [ruleGenerator.requiredInput('联系人身份证号码')],
    contactIdcardEffectBegin: [ruleGenerator.requiredInput('联系人身份证有效期开始时间')],
    contactIdcardEffectEnd: [ruleGenerator.requiredInput('联系人身份证有效期截止时间')],
    areaCode: [ruleGenerator.requiredSelect('位置编码', 'array')],
    mchAddress: [ruleGenerator.requiredInput('经营地址')],
    merBusiContent: [ruleGenerator.requiredSelect('经营内容')],
    storeOuterImg: [ruleGenerator.requiredUpload('门头照')],
    storeInnerImg: [ruleGenerator.requiredUpload('店内环境照')],
    storeCashierImg: [ruleGenerator.requiredUpload('收银台照')],
    cashierWithSettlerImg: [ ruleGenerator.requiredInput('请提供结算人站在收银台内的照片') ],
    // mchFullName: [ruleGenerator.requiredInput('营业执照名称')],
  },
  step3Rules: {
    mchFullName: [ruleGenerator.requiredInput('营业执照名称')],
    authSettle: [ruleGenerator.requiredSelect('是否法人结算')],
    settAccountType: [ruleGenerator.requiredSelect('结算账户类型')],
    settType: [ruleGenerator.requiredSelect('账户方式')],
    settAccountNo: [ruleGenerator.requiredInput('银行帐号')],
    settAccountName: [ruleGenerator.requiredInput('开户名')],
    settAccountBankName: [ruleGenerator.requiredInput('银行名称')],
    bankType: [ruleGenerator.requiredInput('开户行编号')],
    openAccBanktype: [ruleGenerator.requiredInput('开户行行号')],
    bankMobile: [ruleGenerator.requiredInput('预留手机号')],
    settAccountBankBranchAreaCode: [ruleGenerator.requiredSelect('支行地区', 'array')],
    settAccountBankBranchName: [ruleGenerator.requiredInput('开户支行名称')],
    settAccountBankBranchCode: [ruleGenerator.requiredSelect('开户支行')],

    settAccountIdcard1Img: [ruleGenerator.requiredUpload('结算人身份证人像面照片')],
    settAccountIdcard2Img: [ruleGenerator.requiredUpload('结算人身份证国徽面照片')],
    letterOfAuthPic: [ruleGenerator.requiredUpload('结算授权书')],
    settAccountIdcardNo: [ruleGenerator.requiredInput('结算人身份证号')],
    settleAuthAddress: [ruleGenerator.requiredInput('结算人身份证地址')],
    settAccountIdcardEffectBegin: [ruleGenerator.requiredInput('结算人身份证有效期开始时间')],
    settAccountIdcardEffectEnd: [ruleGenerator.requiredInput('结算人身份证有效期截止时间')],
    settAccountLicenseImg: [ruleGenerator.requiredUpload('银行卡正面照')],
    // settAccountBankImg2: [ruleGenerator.requiredUpload('银行卡反面照')],
    companyAccountLicenseImg: [ruleGenerator.requiredUpload('开户许可证照片')],
    settlementType: [ruleGenerator.requiredUpload('结算类型')],

    // isOtherAccountInfo: [ruleGenerator.requiredSelect('是否添加备用结算账户')],
    // standByStlAccType: [ruleGenerator.requiredSelect('备用结算账户类型')],
    // standByAccountBankName: [ruleGenerator.requiredInput('银行名称')],
    // standByBankType: [ruleGenerator.requiredInput('开户行编号')],
    // standByStlAccCardImg: [ruleGenerator.requiredUpload('法人银行卡数字面')],
    // standByStlAccNm: [ruleGenerator.requiredInput('法人银行卡开户名')],
    // standByStlAccNo: [ruleGenerator.requiredInput('法人银行卡账号')],
    // standByAccountBankBranchAreaCode: [ruleGenerator.requiredSelect('法人开户银行省市县', 'array')],
    // standByBankSubCode: [ruleGenerator.requiredSelect('开户支行')],
    // standBankSubCode: [ruleGenerator.requiredInput('开户支行名称')],
  },

})

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

// 接收父组件的进件详细参数
let applymentDetailInfoInject: any = inject('applymentDetailInfo')
let applymentDetailInfo: any = applymentDetailInfoInject.value
applymentDetailInfo.mchAddress = applymentDetailInfo.mchAddress
console.log(applymentDetailInfo,'applymentDetailInfo')
if(applymentDetailInfo.areaCodeName){

  vdata.city = applymentDetailInfo.areaCodeName.split('-')[1]
}
if(!applymentDetailInfo.settAccountName){

  if(applymentDetailInfo.merchantType == 1){
    applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
  }else{
    applymentDetailInfo.settAccountName = applymentDetailInfo.mchFullName
  }
}
applymentDetailInfo.standByStlAccType = "C"
if(!applymentDetailInfo.standByStlAccNm){
  applymentDetailInfo.standByStlAccNm = applymentDetailInfo.idcardName
}

console.log(applymentDetailInfo,'applymentDetailInfoapplymentDetailInfoapplymentDetailInfo')
getSettType()
watch(() => applymentDetailInfo.settAccountBankName, (newValue, oldValue) => {

  if (newValue != oldValue) {
    changeBankAreaFunc()
  }
});

// watch(() => applymentDetailInfo.standByAccountBankName, (newValue, oldValue) => {
//   if (newValue != oldValue) {
//     changeStandByAccountBankBranchAreaCodeFunc()
//   }
// });

applymentDetailInfo.openAccCity = applymentDetailInfo?.settAccountBankBranchAreaCode?.[1];
applymentDetailInfo.standByOpenAccCity = applymentDetailInfo?.standByAccountBankBranchAreaCode?.[1];

// 开户行所在省市区
const changeBankAreaFunc:any = debounce((value) => {
  // 区编码
  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,
              bankType: element.bankType,
              bankCode: element.bankCode,
            };
            vdata.bankInfoList.push(item);
            vdata.filteredBankInfoList.push(item);
          })
        } else {
          $infoBox.message.error('该支行名称未搜索到或该地区没有对应的银行列表')
        }
      })
    } else {
      $infoBox.message.warn('请先选择地区')
    }
  }
}, 300)

// // 备用结算账户 开户行所在省市区
// const changeStandByAccountBankBranchAreaCodeFunc = debounce(() => {
//   // 区编码
//   if (applymentDetailInfo?.standByAccountBankBranchAreaCode?.[1]) {
//     applymentDetailInfo.standByOpenAccCity = applymentDetailInfo?.standByAccountBankBranchAreaCode?.[1];
//     applymentDetailInfo.standByBankSubCode = null
//
//     // 区编码
//     if (applymentDetailInfo?.standByOpenAccCity) {
//
//       vdata.standByBankInfoList = []
//       vdata.filteredStandByBankInfoList = []
//       const param = {
//         cityCode: applymentDetailInfo.standByOpenAccCity,
//         bankName: applymentDetailInfo.standByAccountBankName,
//       };
//       $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, param,mchApplymentData.isvNo).then((res) => {
//         // $bankBranchList(mchApplymentData.mchNo, mchApplymentData.ifCode, param).then((res) => {
//         if (res?.length) {
//           res.forEach(element => {
//             const item = {
//               label: element.branchName,
//               value: element.branchNo,
//               bankType: element.bankType,
//             };
//             vdata.standByBankInfoList.push(item)
//             vdata.filteredStandByBankInfoList.push(item)
//           })
//         }
//       })
//     } else {
//       $infoBox.message.warn('请先选择地区')
//     }
//   }
// }, 300)

changeBankAreaFunc()
// changeStandByAccountBankBranchAreaCodeFunc()

// 参数注入： 配置方式
let configMode: any = inject('configMode')


// 获取地区信息
/* function changeAreaCodeFunc(e) {
  $getAreaCodeList(mchApplymentData.mchNo, mchApplymentData.ifCode, e ? { cityCode: e[1].value, bankAliasCode: applymentDetailInfo.bankAliasCode } : undefined).then((res) => {
    vdata.bankBranchList = res
    applymentDetailInfo.settAccountBankBranchName = ''
  })
} */
// changeAreaCodeFunc(undefined)

// 下一步
function toNextStep() {
  if(vdata.currentStep===2 && isMobile){
    if(!cityOptions.city){
      $infoBox.message.error('请选择商户经营省份')
      return false
    }
    if(!cityOptions.county){
      $infoBox.message.error('请选择商户经营城市')
      return false
    }
    if(!cityOptions.district){
      $infoBox.message.error('请选择商户经营区')
      return false
    }
  }
  // 验证是否通过
  proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].validate().then(() => {
    vdata.currentStep++
  })
  mapInit()
}

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

function mapInit() {
  let mapData = jeepayAmapRef.value.getMapData()
  if(mapData.address) {
    // applymentDetailInfo.areaCode = mapData.areacode
    // applymentDetailInfo.address = mapData.address
    // applymentDetailInfo.areaCode = mapData.areacode
    // applymentDetailInfo.areaName = mapData.areacodeNames
    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]
    applymentDetailInfo.longitude = mapData.lnglat.split(',')[0]
  }

  // 地图加载
  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))
}

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 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,
          bankCode: element.bankCode,
        };
        vdata.bankInfoList.push(item);
        vdata.filteredBankInfoList.push(item);
      })
    } else {
      $infoBox.message.error('该支行名称未搜索到或该地区没有对应的银行列表')
    }
  })
}
function isChinese(str) {
  var reg = /[\u4e00-\u9fa5]/; // Unicode范围内的汉字编码
  return reg.test(str);
}
const handleBankChange: SelectProps['onChange'] = (option :any) => {
  console.log("handleBankChange", option);
  applymentDetailInfo.settAccountBankBranchCode = option.value;
  vdata.filteredBankInfoList.forEach(item => {
    if (item.value == option.value) {
      console.log(item,'itemitem')
      applymentDetailInfo.settAccountBankBranchName = item.label
      applymentDetailInfo.settAccountBankBranchCode = item.value
      applymentDetailInfo.settAccountBankCode = item.bankCode

    }
  });
};

const handleStandByBankSearch = (value) => {
  vdata.filteredStandByBankInfoList = [];
  vdata.standByBankInfoList.forEach((item: { label: string | any[]; }) => {
    if (item.label.includes(value)) {
      vdata.filteredStandByBankInfoList.push(item);
    }
  });
};

// const handleStandByBankChange: SelectProps['onChange'] = (option :any) => {
//   console.log("handleStandByBankChange", option);
//   applymentDetailInfo.standByBankSubCode = option;
//   vdata.filteredBankInfoList.forEach(item => {
//     if (item.value == option.value) {
//       applymentDetailInfo.standByBankType = item.bankType
//     }
//   });
// };

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

  })
}

// 切换商户类型
function changeMerchantType() {
  applymentDetailInfo.mccCode
  getDiySettAccountName();

  if (applymentDetailInfo.merchantType == 1) {
    return
  }
}

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

// 结算人身份证  图片识别的回调函数
function ocrScanSettFunc(orcObject: any) {
  if (orcObject?.idcardName) {
    applymentDetailInfo.settAccountName = orcObject.idcardName
    applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    applymentDetailInfo.settleAuthAddress = orcObject.idcardAddress

  }
  if (orcObject?.idcardEffectBegin) {
    applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
    applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
  }
}

// 备用结算银行卡  图片识别的回调函数
function ocrStandByStlAccCardImgFunc(orcObject: any) {
  if (orcObject) {
    applymentDetailInfo.standByAccountBankName = orcObject.settAccountBankName
    applymentDetailInfo.standByStlAccNo = orcObject.settAccountNo
  }
}

// 图片识别的回调函数
function ocrScanFuncByCompanyBeneficiary(orcObject, i) {
  if (orcObject) {
    Object.assign(applymentDetailInfo.companyBeneficiaryList[i], orcObject)
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp) {
  // 判断下： 是否包含该组件， 若没有该组件（比如分账模式下）， 则无需获取此费率数据
  // if (jeepayPaywayRatePanelRef.value) {
  //
  //   // 放置费率配置项
  //   let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  //   if (typeof (paywayFeeList) != 'object') {
  //     return Promise.reject()
  //   }
  //
  //   // 赋值到对象中
  //   applymentDetailInfo.reqPaywayFeeList = paywayFeeList
  // }

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

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


  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 changeMccFunc(value) {
  if(value[1]){
    const mccList =  mccRyxJSON[applymentDetailInfo.merchantType].children
    for (let i = 0;i<mccList.length;i++){
      if(value[0] == mccList[i].value){
        const children = mccList[i].children;
        for (let j= 0;j<children.length;j++){
          if(value[1] == children[j].value){
            applymentDetailInfo.mccName = children[j].label
          }
        }
      }
    }
  }
  if (value?.licenseCode) {
    applymentDetailInfo.industryQualificationType = value?.licenseCode
  } else {
    applymentDetailInfo.industryQualificationType = ''
  }
}

function funLegalInfo(value) {
  if (value == '1') {
    // 联系人姓名
    applymentDetailInfo.contactName = applymentDetailInfo.idcardName
    // 联系人手机号
    applymentDetailInfo.contactPhone = applymentDetailInfo.legalPersonPhone
    applymentDetailInfo.contactIdcardEffectBegin = applymentDetailInfo.idcardEffectBegin
    applymentDetailInfo.contactIdcardEffectEnd = applymentDetailInfo.idcardEffectEnd
    applymentDetailInfo.contactIdcardNo = applymentDetailInfo.idcardNo
  } else {
    // 联系人姓名
    applymentDetailInfo.contactName = ''
    // 联系人手机号
    applymentDetailInfo.contactPhone = ''
  }
}

function changeMchAddressFunc(){
  const areaCodeName =  applymentDetailInfo.areaCodeName.replaceAll('/', '');
  applymentDetailInfo.address = areaCodeName+(applymentDetailInfo.mchAddress??"")
}
// 商户所在省市区
function changeMchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  vdata.city = value[1].label;
  applymentDetailInfo.areaName = [] as any;
  applymentDetailInfo.areaCode = [] as any;
  const areaCodeName = value[0].label + '-' + value[1].label + '-' + value[2]?.label + ''
  applymentDetailInfo.areaCodeName=areaCodeName
  applymentDetailInfo.mchAddressCodeName=areaCodeName

  applymentDetailInfo.areaCode.push(value[0].value)
  applymentDetailInfo.areaCode.push(value[1].value)
  applymentDetailInfo.areaCode.push(value[2].value)
  applymentDetailInfo.areaName.push(value[0].label)
  applymentDetailInfo.areaName.push(value[1].label)
  applymentDetailInfo.areaName.push(value[2].label)
  console.log(applymentDetailInfo.areaCodeName);

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

  applymentDetailInfo.areaCodeName = value[0].label + '-' + value[1].label + '-' + value[2]?.label + ''
  getMchFullName()
}


function getMchFullName() {
  return false;
  if(applymentDetailInfo.merchantType == 1){
    applymentDetailInfo.mchFullName =  vdata.city+applymentDetailInfo.mchShortName
  }else{
    // applymentDetailInfo.mchFullName =  applymentDetailInfo.mchShortName
  }

}
function getIdcardName() {
  if(applymentDetailInfo.settlementAccountType == 3){
    applymentDetailInfo.settAccountName =   applymentDetailInfo.mchFullName
  }else{
    applymentDetailInfo.settAccountName =   applymentDetailInfo.idcardName;
  }
  applymentDetailInfo.standByStlAccNm =   applymentDetailInfo.idcardName;
}
function getDiySettAccountName() {
  console.log(applymentDetailInfo,'applymentDetailInfosettAccountType')
  applymentDetailInfo.settAccountName =   applymentDetailInfo.mchFullName;
}

function getSettlementAccountType() {
  if(applymentDetailInfo.settlementAccountType == '1'){
    applymentDetailInfo.settAccountType = "C"
    applymentDetailInfo.authSettle = "N"
  }
  if(applymentDetailInfo.settlementAccountType == '2'){
    applymentDetailInfo.settAccountType = "C"
    applymentDetailInfo.authSettle = "Y"
  }

  if(applymentDetailInfo.settlementAccountType == '3'){
    applymentDetailInfo.settAccountType = "B"
  }
  console.log(applymentDetailInfo.settAccountType,'applymentDetailInfosettAccountType')
  getIdcardName()
  emit('itemRender')
}
function lookUp(type){
  let  images = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/ryxletterOfAuthPic.png';
  if(type == 3){
    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/ryxletterOfAuthPhoto.png';
  }
  $viewerApi({images: [images]})
}
function download(){
  let fileUrl = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/ryxletterOfAuthPhoto.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
  })
}


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-bos-img{
  color: #1965FF !important;
}
.jeepay-tip-span::before{
  display: none !important;
}
</style>
