<template>
  <div class="jeepay-m-center" style="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" @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"/>
        </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"/>
        </a-form-item>

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

      <a-form-item class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value.trim="applymentDetailInfo.idcardEffectEnd"
                 :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;"/>
        <a-checkbox :checked="applymentDetailInfo.idcardEffectEnd == '长期' "
                    @change="(e) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期
        </a-checkbox>
      </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="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName"  placeholder="填写门店或品牌名称，支付时或小票页展示"/>
      </a-form-item>

      <a-form-item label="经营类目（MCC）" name="mccCode">
        <JeepayYspayMccSelect v-model:merchant-type="applymentDetailInfo.merchantType" v-model:value="applymentDetailInfo.mccCode" @change="changeMccFunc"/>
      </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="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="areaCode">
        <JeepayAreaSelectYs v-model:value="applymentDetailInfo.areaCode" @change="changeMchAreaFunc"/>
      </a-form-item>

      <a-form-item label="商户经营地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address"/>
      </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>

    <!-- 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="() => emit('itemRender')">
          <a-radio value="C">对私</a-radio>
          <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B">对公</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'">
        <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>

      <a-form-item v-if="applymentDetailInfo.settAccountType != 'C'" label="结算开户名" name="diySettAccountName">
        <a-input v-model:value.trim="applymentDetailInfo.diySettAccountName"/>
        <span class="jeepay-tip-text">（对公或非结算人结算开户名，不为空时结算户名以此为准）</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">
        <JeepayAreaSelectYs
            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>

      <a-form-item label="开户支行" name="bankSubCode">
        <a-select
            v-model:value="applymentDetailInfo.bankSubCode"
            placeholder="选择支行"
            show-search
            label-in-value
            :filter-option="false"
            @search="handleBankSearch"
            @change="handleBankChange">
          <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>

      <div v-if="applymentDetailInfo.merchantType != 1">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>
        <a-form-item label="是否法人结算" name="isUncrpSett">
          <a-radio-group v-model:value="applymentDetailInfo.isUncrpSett" @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>

      <div v-if="applymentDetailInfo.isUncrpSett == 'Y'">
        <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"/>
        </a-form-item>

        <a-form-item class="jeepay-valid" label="结算人身份证结束有效期" name="settAccountIdcardEffectEnd">
          <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>
        </a-form-item>

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

        <a-form-item label="结算授权书" name="settleAuthLetterPhoto">
          <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterPhoto" bizType="applyment" :imgSize="2"/>
          <span class="jeepay-tip-text">(上传图片)</span>
        </a-form-item>

        <a-form-item label="法人手持结算授权书" name="settleAuthLetterHandlePhoto">
          <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterHandlePhoto" bizType="applyment" :imgSize="2"/>
        </a-form-item>
      </div>

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

      <div v-if="applymentDetailInfo.isUncrpSett == 'Y'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">备用结算信息</a-divider>
        <a-form-item label="备用结算账户类型" name="standByStlAccType">
          <a-radio-group v-model:value="applymentDetailInfo.standByStlAccType" @change="() => emit('itemRender')">
            <a-radio value="C">对私</a-radio>
            <a-radio v-if="applymentDetailInfo.merchantType != 1" value="B">对公</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>

        <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="请输入"/>
        </a-form-item>

        <a-form-item label="备用结算账号" name="standByStlAccNo">
          <a-input v-model:value.trim="applymentDetailInfo.standByStlAccNo"/>
        </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-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"
        />
      </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} from 'vue'
import {$bankBranchList} from '@/api/manage'
import ruleGenerator from '@/utils/ruleGenerator'
import {debounce} from "lodash-es";
import {SelectProps} from "ant-design-vue";

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

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

const jeepayPaywayRatePanelRef = 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,
  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('行业')],
    mchShortName: [ruleGenerator.requiredInput('商户简称')],
    contactName: [ruleGenerator.requiredInput('联系人姓名')],
    contactPhone: [ruleGenerator.requiredInput('联系人电话')],
    contactEmail: [ruleGenerator.requiredInput('联系人邮箱')],
    areaCode: [ruleGenerator.requiredSelect('位置编码', 'array')],
    address: [ruleGenerator.requiredInput('经营地址')],
    merBusiContent: [ruleGenerator.requiredSelect('经营内容')],
    storeOuterImg: [ruleGenerator.requiredUpload('门头照')],
    storeInnerImg: [ruleGenerator.requiredUpload('店内环境照')],
    storeCashierImg: [ruleGenerator.requiredUpload('收银台照')],
    mchFullName: [ruleGenerator.requiredInput('营业执照名称')],
  },
  step3Rules: {
    mchFullName: [ruleGenerator.requiredInput('营业执照名称')],
    isUncrpSett: [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('开户支行名称')],
    bankSubCode: [ruleGenerator.requiredSelect('开户支行')],

    settAccountIdcard1Img: [ruleGenerator.requiredUpload('结算人身份证人像面照片')],
    settAccountIdcard2Img: [ruleGenerator.requiredUpload('结算人身份证国徽面照片')],
    settleAuthLetterPhoto: [ruleGenerator.requiredUpload('结算授权书')],
    settleAuthLetterHandlePhoto: [ruleGenerator.requiredUpload('法人手持结算授权书')],
    settAccountIdcardNo: [ruleGenerator.requiredInput('结算人身份证号')],
    settleAuthAddress: [ruleGenerator.requiredInput('结算人身份证地址')],
    settAccountIdcardEffectBegin: [ruleGenerator.requiredInput('结算人身份证有效期开始时间')],
    settAccountIdcardEffectEnd: [ruleGenerator.requiredInput('结算人身份证有效期截止时间')],
    settAccountLicenseImg: [ruleGenerator.requiredUpload('银行卡正面照')],
    // settAccountBankImg2: [ruleGenerator.requiredUpload('银行卡反面照')],
    companyAccountLicenseImg: [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

// 接收父组件的进件详细参数
let applymentDetailInfoInject: any = inject('applymentDetailInfo')
let applymentDetailInfo: any = applymentDetailInfoInject.value

watch(() => applymentDetailInfo.settAccountBankName, (newValue, oldValue) => {
  console.log("settAccountBankName", newValue, oldValue);
  if (newValue != oldValue) {
    changeBankAreaFunc()
  }
});

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

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

// 开户行所在省市区
const changeBankAreaFunc = debounce(() => {
  // 区编码
  if (applymentDetailInfo?.settAccountBankBranchAreaCode?.[1]) {
    applymentDetailInfo.openAccCity = applymentDetailInfo?.settAccountBankBranchAreaCode?.[1];

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

      const param = {
        cityCode: applymentDetailInfo.openAccCity,
        bankName: applymentDetailInfo.settAccountBankName,
      };
      $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.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).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() {
  // 验证是否通过
  proxy.$refs['stepForm' + vdata.currentStep + 'Ref'].validate().then(() => {
    vdata.currentStep++
  })
}

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

const handleBankSearch = (value) => {
  console.log("handBankSearch", value);
  vdata.filteredBankInfoList = [];
  vdata.bankInfoList.forEach((item: { label: string | any[]; }) => {
    if (item.label.includes(value)) {
      vdata.filteredBankInfoList.push(item);
    }
  });
};

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

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.value;
  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() {
  if (applymentDetailInfo.merchantType == 1) {
    return
  }
}

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

// 结算人身份证  图片识别的回调函数
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
  }

  // 保存草稿只校验当前步骤数据
  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?.licenseCode) {
    applymentDetailInfo.industryQualificationType = value?.licenseCode
  } else {
    applymentDetailInfo.industryQualificationType = ''
  }
}

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

// 商户所在省市区
function changeMchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  applymentDetailInfo.address = value[0].label + '' + value[1].label + '' + value[2]?.label + ''
}




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;
}
</style>
