
<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-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">
          <a-radio :value="0">聚合(默认)</a-radio>
          <a-radio :value="1">pos+聚合</a-radio>
        </a-radio-group>
      </a-form-item> -->
      
      <!-- <div v-if="applymentDetailInfo.merchantType == 0">
        <a-form-item label="入网方式" name="accessMode">
          <a-radio-group v-model:value="applymentDetailInfo.accessMode">
            <a-radio value="1">普通</a-radio>
            <a-radio value="2">先进后审</a-radio>
          </a-radio-group>
        </a-form-item>
      </div> -->

      <a-form-item label="商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType">
          <a-radio :value="1">个人</a-radio>
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="商户全称" name="mchFullName">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" />
      </a-form-item>

      <a-form-item label="商户简称" name="mchShortName">
        <a-input v-model:value.trim="applymentDetailInfo.mchShortName" />
        <span class="jeepay-tip-text">(请填写与经营内容相符的名称。ps：微信商户简称)</span>
      </a-form-item>

      <div v-if="applymentDetailInfo.merchantType != '1'">
        <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="licenseNo">
          <a-input v-model:value.trim="applymentDetailInfo.licenseNo" />
        </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-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="ocrScanByAccountFunc" />
        <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="ocrScanByAccountFunc" />
        <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" bizType="applyment" />
      </a-form-item>
      
      <a-form-item label="法人姓名" name="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
        <span class="jeepay-tip-text">(要与营业执照上的法人姓名相同)</span>
      </a-form-item>

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

      <a-form-item v-if="applymentDetailInfo.merchantType != '1'" 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" />
      </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-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">门店信息</a-divider>

      <a-form-item label="商户类别(行业)" name="mccCode">
        <JeepayYsfMccSelect v-model:value="applymentDetailInfo.mccCode" />
      </a-form-item>

      <a-form-item label="商户经营地省市县" name="areaCode">
        <JeepayAreaSelectYsf v-model:value="applymentDetailInfo.areaCode" @change="searchAreaFunc" />
      </a-form-item>

      <a-form-item label="商户经营详细地址" name="address">
        <a-input v-model:value.trim="applymentDetailInfo.address" />
        <span class="jeepay-tip-text">(请严格按照此格式填写：省-市-区县-详细地址)</span>
      </a-form-item>

      <!-- <a-form-item label="公司注册(开户)详细地址" name="regAddr">
        <a-input v-model:value.trim="applymentDetailInfo.regAddr" />
      </a-form-item> -->

      <a-form-item label="经营范围" name="manaScop">
        <a-textarea v-model:value="applymentDetailInfo.manaScop" />
      </a-form-item>

      <a-form-item label="经营类型" name="microBizType">
        <a-radio-group v-model:value="applymentDetailInfo.microBizType">
          <a-radio value="1">门店场所</a-radio>
          <a-radio value="2">流动经营/便民服务</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.mccCode == '8211' || applymentDetailInfo.mccCode == '8351'" label="承办性质" name="wxlm">
        <a-radio-group v-model:value="applymentDetailInfo.wxlm">
          <a-radio value="765">公立</a-radio>
          <a-radio value="767">民办</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="营业场所照片" name="businessScenePhoto1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.businessScenePhoto1Img" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == '1'" label="第二张营业场所照片" name="businessScenePhoto2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.businessScenePhoto2Img" bizType="applyment" />
      </a-form-item>

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

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

      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">联系人信息</a-divider>
      <!-- 联系人 针对非小微的改造1 start -->
      <div v-if="applymentDetailInfo.merchantType != '1'">
        <a-form-item label="联系人是否同法人（自动补全）" name="contactSameToLegal">
          <a-radio-group v-model:value="applymentDetailInfo.contactSameToLegal" @change="funLegalInfo('contact', applymentDetailInfo.contactSameToLegal)">
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="联系人身份证人像面照片" name="contactIdcard1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.contactIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanByContactFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

        <a-form-item label="联系人身份证国徽面照片" name="contactIdcard2Img">
          <JeepayUpload v-model:src="applymentDetailInfo.contactIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanByContactFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
        </a-form-item>
      </div>
      <!-- 联系人 针对非小微的改造1 end --> 
      <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>
      <!-- 联系人 针对非小微的改造2 start -->
      <div v-if="applymentDetailInfo.merchantType != '1'">
        <a-form-item label="联系人身份证号" name="contactIdcardNo">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdcardNo" />
        </a-form-item>

        <a-form-item label="联系人身份证有效期开始日期" name="contactIdcardEffectBegin">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdcardEffectBegin" />
        </a-form-item>
        
        <a-form-item class="jeepay-valid" label="联系人身份证有效期结束日期" name="contactIdcardEffectEnd">
          <a-input v-model:value.trim="applymentDetailInfo.contactIdcardEffectEnd" :disabled="applymentDetailInfo.contactIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.contactIdcardEffectEnd == '长期' " @change="(e) => applymentDetailInfo.contactIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>
      <!-- 联系人 针对非小微的改造2 end -->
    </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>
      
      <div v-if="applymentDetailInfo.merchantType != '1'">
        <a-form-item label="账户性质" name="settAccountType">
          <a-radio-group v-model:value="applymentDetailInfo.settAccountType">
            <a-radio value="B">对公</a-radio>
            <a-radio value="C">对私</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item v-if="applymentDetailInfo.settAccountType == 'C'" label="结算类型" name="settleType">
          <a-radio-group v-model:value="applymentDetailInfo.settleType">
            <a-radio value="1">法人</a-radio>
            <a-radio value="2">非法人</a-radio>
          </a-radio-group>
        </a-form-item>  
      </div>

      <a-form-item label="结算方式" name="settType">
        <a-radio-group v-model:value="applymentDetailInfo.settType" @change="() => emit('itemRender')">
          <a-radio value="01">T1</a-radio>
          <!-- <a-radio value="02">S0</a-radio> -->
          <a-radio value="03">D1</a-radio>
          <!-- <a-radio value="04">D1+</a-radio> -->
        </a-radio-group>
      </a-form-item>

      <a-form-item label="开户地址省市县" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelectYsf v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" />
      </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 v-if="applymentDetailInfo.settAccountType != 'B' || applymentDetailInfo.merchantType != '3'" label="银行卡正面照" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType != '1' && applymentDetailInfo.settleType == '2'" label="授权书照片" name="settleAuthLetterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settleAuthLetterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType == '3' && applymentDetailInfo.settAccountType == 'B'" label="开户许可证照片" name="companyAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
      </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="headBankNo">
        <JeepayRuipayBankCodeSelect v-model:value="applymentDetailInfo.headBankNo" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.headBankNo != null" label="支行关键字" name="queryBranchBank">
        <a-row>
          <a-col :span="14"><a-input v-model:value.trim="applymentDetailInfo.queryBranchBank" /></a-col>
          <a-col :span="2" />
          <a-col :span="8">
            <a-button type="primary" @click="getRuiBranchBankList()"><template #icon><SearchOutlined /></template>查询支行</a-button>
          </a-col>
        </a-row>
        <span class="jeepay-tip-text">(填入支行关键字，点击查询支行，会更新支行信息列表)</span>
      </a-form-item>

      <a-form-item label="支行信息" name="openBankMsg">
        <a-select
          v-model:value="applymentDetailInfo.openBankMsg"
          show-search
          :options="vdata.branchBankList"
          placeholder="选择支行"
          @change="changeBankFunc"
        />
      </a-form-item>
      
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>

      <a-form-item label="是否为法人（自动补全）" name="isLegalInfo">
        <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo" @change="funLegalInfo('settle', 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="ocrScanBySettAccountFunc" />
        <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="ocrScanBySettAccountFunc" />
        <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>
      
      <!-- 受益人信息20230316 start -->
      <div v-if="applymentDetailInfo.merchantType != '1'">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">受益人信息</a-divider>
        <a-form-item label="受益人是否同法人（自动补全）" name="ifBenefit">
          <a-radio-group v-model:value="applymentDetailInfo.ifBenefit" @change="funLegalInfo('benefit', applymentDetailInfo.ifBenefit)">
            <a-radio value="0">是</a-radio>
            <a-radio value="1">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="受益人身份证人像面照片" name="benefitCred1Img">
          <JeepayUpload v-model:src="applymentDetailInfo.benefitCred1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanByBenefitFunc" />
          <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
        </a-form-item>

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

        <a-form-item label="受益人姓名" name="benefitCredPeople">
          <a-input v-model:value.trim="applymentDetailInfo.benefitCredPeople" />
        </a-form-item>

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

        <a-form-item label="受益人地址" name="benefitOperateAddr">
          <a-input v-model:value.trim="applymentDetailInfo.benefitOperateAddr" />
        </a-form-item>

        <a-form-item label="受益人身份证有效期开始日期" name="benefitCredStartTime">
          <a-input v-model:value.trim="applymentDetailInfo.benefitCredStartTime" />
        </a-form-item>
        
        <a-form-item class="jeepay-valid" label="受益人身份证有效期结束日期" name="benefitCredTime">
          <a-input v-model:value.trim="applymentDetailInfo.benefitCredTime" :disabled="applymentDetailInfo.benefitCredTime == '长期'" style="width: 150px;margin-right: 10px;" />
          <a-checkbox :checked="applymentDetailInfo.benefitCredTime == '长期' " @change="(e) => applymentDetailInfo.benefitCredTime = e.target.checked ? '长期' : '' ">长期</a-checkbox>
        </a-form-item>
      </div>
      <!-- 受益人信息20230316 end -->
      <!-- 补充资料 -->
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">补充资料</a-divider>
      
      <a-form-item label="商户协议类型" name="pactType">
        <a-radio-group v-model:value="applymentDetailInfo.pactType">
          <a-radio value="0">纸质协议（默认）</a-radio>
          <a-radio value="1">电子协议（需要开通权限）</a-radio>
        </a-radio-group>
        <span class="jeepay-tip-text">(商户为“企业”时不支持电子协议)</span>
      </a-form-item>
      <div v-if="applymentDetailInfo.pactType == '0'">
        <a-form-item label="商户协议照片" name="protocolPhoto">
          <JeepayUpload v-model:src="applymentDetailInfo.protocolPhoto" bizType="applyment" />
        </a-form-item>
        <a-form-item label="商户附属协议照片" name="mchAffiliateAgreementImg">
          <JeepayUpload v-model:src="applymentDetailInfo.mchAffiliateAgreementImg" bizType="applyment" />
        </a-form-item>
      </div>
      <!-- <div v-if="applymentDetailInfo.pactType == '1'">
        <a-form-item label="协议接收人" name="agreementName">
          <a-input v-model:value.trim="applymentDetailInfo.agreementName" />
        </a-form-item>
        <a-form-item label="协议接收人电话" name="agreementPhone">
          <a-input v-model:value.trim="applymentDetailInfo.agreementPhone" />
        </a-form-item>
      </div> -->
      
      <!-- 产品费率 -->
      <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"
        />
      </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 < 3" class="jeepay-m-btn" data-type="inline" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">

import {reactive, getCurrentInstance, defineEmits, inject, ref} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import { $ruipayGetBankList } from '@/api/manage'

const jeepayPaywayRatePanelRef = ref()

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

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


// 显示类型枚举值
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, // 是否保存草稿
  isvDefaultPaywayFee: {} as any, // 服务商默认费率
  currentStep: 1,
  receiverTableData: [] as any,
  branchBankList:[] as any, // 支行列表
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                accessMode: [ ruleGenerator.requiredSelect('入网方式', 'string') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                mchFullName: [ ruleGenerator.requiredInput('商户全称') ],
                mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
                licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照有效期开始日期') ],
                licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照有效期结束日期') ],
                idcard1Img: [ ruleGenerator.requiredUpload('法人身份证人像面') ],
                idcard2Img: [ ruleGenerator.requiredUpload('法人身份证国徽面') ],
                idcardName: [ ruleGenerator.requiredInput('法人姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('法人身份证号') ],
                idcardAddress: [ ruleGenerator.requiredInput('法人证件居住地址') ],
                idcardInHandImg: [ ruleGenerator.requiredUpload('手持身份证照片') ],
                idcardEffectBegin: [ ruleGenerator.requiredInput('法人身份证有效期开始日期') ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('法人身份证有效期结束日期') ]
              },
  step2Rules: {
                areaCode: [ ruleGenerator.requiredSelect('商户经营地省市县', 'array') ],
                address: [ ruleGenerator.requiredInput('商户经营详细地址') ],
                regAddr: [ ruleGenerator.requiredInput('公司注册(开户)详细地址') ],
                manaScop: [ ruleGenerator.requiredInput('经营范围') ],
                contactSameToLegal: [ ruleGenerator.requiredSelect('是否为法人', 'string') ],
                contactIdcard1Img: [ ruleGenerator.requiredInput('联系人身份证人像面') ],
                contactIdcard2Img: [ ruleGenerator.requiredInput('联系人身份证国徽面') ],
                contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
                contactPhone: [ ruleGenerator.requiredInput('联系人手机号') ],
                contactIdcardNo: [ ruleGenerator.requiredInput('联系人身份证号') ],
                contactIdcardEffectBegin: [ ruleGenerator.requiredInput('联系人身份证有效期开始日期') ],
                contactIdcardEffectEnd: [ ruleGenerator.requiredInput('联系人身份证有效期结束日期') ],
                mccCode: [ ruleGenerator.requiredSelect('行业') ],
                wxlm: [ ruleGenerator.requiredSelect('承办性质', 'string') ],
                businessScenePhoto1Img: [ ruleGenerator.requiredUpload('营业场所照片') ],
                businessScenePhoto2Img: [ ruleGenerator.requiredUpload('第二张营业场所照片') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('门头照片') ],
                storeCashierImg: [ ruleGenerator.requiredUpload('收银台照片') ],
                microBizType: [ ruleGenerator.requiredSelect('经营类型', 'string') ],
  },
  step3Rules: {
                settAccountLicenseImg: [ ruleGenerator.requiredUpload('银行卡正面照') ],
                settAccountName: [ ruleGenerator.requiredInput('开户名') ],
                settAccountNo: [ ruleGenerator.requiredInput('银行账号') ],
                settAccountBankBranchAreaCode: [ ruleGenerator.requiredSelect('开户地址省市县', 'array') ],
                settAccountType: [ ruleGenerator.requiredSelect('账户性质', 'string') ],
                settleType: [ ruleGenerator.requiredSelect('结算类型', 'string') ],
                settAccountIdcard1Img: [ ruleGenerator.requiredUpload('结算人身份证人像面照片') ],
                settAccountIdcard2Img: [ ruleGenerator.requiredUpload('结算人身份证国徽面照片') ],
                settAccountIdcardNo: [ ruleGenerator.requiredInput('结算人身份证号码') ],
                settAccountIdcardEffectBegin: [ ruleGenerator.requiredInput('结算人身份证有效期开始日期') ],
                settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('结算人身份证有效期结束日期') ],
                ifBenefit:[ ruleGenerator.requiredSelect('受益人是否同法人', 'string') ],
                benefitCred1Img: [ ruleGenerator.requiredUpload('受益人身份证人像面照片') ],
                benefitCred2Img: [ ruleGenerator.requiredUpload('受益人身份证国徽面照片') ],
                benefitCredPeople: [ ruleGenerator.requiredInput('受益人姓名') ],
                benefitCredNo: [ ruleGenerator.requiredInput('受益人身份证号码') ],
                benefitOperateAddr: [ ruleGenerator.requiredInput('受益人地址') ],
                benefitCredStartTime: [ ruleGenerator.requiredInput('受益人身份证有效期开始日期') ],
                benefitCredTime: [ ruleGenerator.requiredInput('受益人身份证有效期结束日期') ],
                headBankNo: [ ruleGenerator.requiredSelect('开户行', 'string') ],
                openBankMsg: [ ruleGenerator.requiredSelect('支行信息', 'string') ],
                serviceType: [ ruleGenerator.requiredSelect('结算业务类型', 'string') ],
                contactIdcardNo: [ ruleGenerator.requiredInput('联系人身份证号') ],
                regAddress: [ ruleGenerator.requiredInput('店铺注册地址') ],
                agreementName: [ ruleGenerator.requiredInput('协议接收人') ],
                agreementPhone: [ ruleGenerator.requiredInput('协议接收人电话') ],
                protocolPhoto: [ ruleGenerator.requiredUpload('商户协议照片') ],
                mchAffiliateAgreementImg: [ ruleGenerator.requiredUpload('商户附属协议照片') ],
                settleAuthLetterImg: [ ruleGenerator.requiredUpload('授权书照片') ],
                companyAccountLicenseImg: [ ruleGenerator.requiredUpload('开户许可证照片') ],
                pactType:[ ruleGenerator.requiredSelect('商户协议类型', 'string') ],
                settType:[ ruleGenerator.requiredSelect('结算方式', 'string') ],
  }
})

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

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

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


// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
      vdata.currentStep ++
  })
}

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

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

if(applymentDetailInfo.feeData) {
  vdata.receiverTableData = applymentDetailInfo.feeData
}

// 图片识别的回调函数  营业执照
function ocrScanFunc(orcObject){
  if(orcObject){
    if(orcObject.licensePerson){
      applymentDetailInfo.idcardName = orcObject.licensePerson
    }
    if(orcObject.licenseNo){
      applymentDetailInfo.licenseNo = orcObject.licenseNo
    }
    if(orcObject.mchFullName){
      applymentDetailInfo.mchFullName = orcObject.mchFullName
    }
    if(orcObject.licenseEffectBegin){
      applymentDetailInfo.licenseEffectBegin = orcObject.licenseEffectBegin
    }
    if(orcObject.licenseEffectEnd){
      applymentDetailInfo.licenseEffectEnd = orcObject.licenseEffectEnd
    }
    if(orcObject.licenseBusiness){
      applymentDetailInfo.manaScop = orcObject.licenseBusiness
    }
      
  }
}

// 识别银行卡信息 
function ocrScanBySettAccountBankCardFunc(orcObject){
  if(orcObject){
     if(orcObject.settAccountNo){
      applymentDetailInfo.settAccountNo = orcObject.settAccountNo
    }
  }
}

// 图片识别的回调函数  法人身份证
function ocrScanByAccountFunc(orcObject){
  if(orcObject){
    if(orcObject.idcardName){
      applymentDetailInfo.idcardName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.idcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.idcardEffectBegin = orcObject.idcardEffectBegin
    }
    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.idcardEffectEnd = orcObject.idcardEffectEnd
    }
    if(orcObject.idcardAddress){
      applymentDetailInfo.idcardAddress = orcObject.idcardAddress
    }
  }
}

// 图片识别的回调函数  联系人身份证
function ocrScanByContactFunc(orcObject){
  if(orcObject){
    if(orcObject.idcardName){
      applymentDetailInfo.contactName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.contactIdcardNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.contactIdcardEffectBegin = orcObject.idcardEffectBegin
    }
    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.contactIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }
}

// 图片识别的回调函数  结算人身份证
function ocrScanBySettAccountFunc(orcObject){

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

// 图片识别的回调函数  受益人身份证
function ocrScanByBenefitFunc(orcObject){
  if(orcObject){
    if(orcObject.idcardName){
      applymentDetailInfo.benefitCredPeople = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.benefitCredNo = orcObject.idcardNo
    }
    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.benefitCredStartTime = orcObject.idcardEffectBegin
    }
    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.benefitCredTime = orcObject.idcardEffectEnd
    }
    if(orcObject.idcardAddress){
      applymentDetailInfo.benefitOperateAddr = orcObject.idcardAddress
    }
  }
}

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

  // 放置费率配置项
  let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
  if(typeof(paywayFeeList) != 'object'){
      return Promise.reject()
  }

  // 赋值到对象中
  applymentDetailInfo.paywayFeeList = paywayFeeList


  // 站点信息
  applymentDetailInfo.feeData = vdata.receiverTableData
  // 保存草稿只校验当前步骤数据
  if (isTemp) {
    return Promise.resolve()
  }

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

function funLegalInfo(type, value) {
  if (type == 'settle') {
    // 结算人信息
      if(value == '1'){
      applymentDetailInfo.settAccountIdcard1Img = applymentDetailInfo.idcard1Img
      applymentDetailInfo.settAccountIdcard2Img = applymentDetailInfo.idcard2Img
      applymentDetailInfo.settAccountIdcardNo = applymentDetailInfo.idcardNo
      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 = ''
    }
  } else if (type == 'contact') {
    // 联系人信息
    if (value == '1') {  
      applymentDetailInfo.contactName = applymentDetailInfo.idcardName
      applymentDetailInfo.contactIdcard1Img = applymentDetailInfo.idcard1Img
      applymentDetailInfo.contactIdcard2Img = applymentDetailInfo.idcard2Img
      applymentDetailInfo.contactIdcardNo = applymentDetailInfo.idcardNo
      applymentDetailInfo.contactIdcardEffectBegin = applymentDetailInfo.idcardEffectBegin
      applymentDetailInfo.contactIdcardEffectEnd = applymentDetailInfo.idcardEffectEnd
    } else {
      applymentDetailInfo.contactName = ''
      applymentDetailInfo.contactIdcard1Img = ''
      applymentDetailInfo.contactIdcard2Img = ''
      applymentDetailInfo.contactIdcardNo = ''
      applymentDetailInfo.contactIdcardEffectBegin = ''
      applymentDetailInfo.contactIdcardEffectEnd = ''
    }
  } else if (type == 'benefit') {
    // 受益人信息 特殊：0:是  1：否
    if (value == '0') {  
      applymentDetailInfo.benefitCredPeople = applymentDetailInfo.idcardName
      applymentDetailInfo.benefitCred1Img = applymentDetailInfo.idcard1Img
      applymentDetailInfo.benefitCred2Img = applymentDetailInfo.idcard2Img
      applymentDetailInfo.benefitCredNo = applymentDetailInfo.idcardNo
      applymentDetailInfo.benefitOperateAddr = applymentDetailInfo.idcardAddress
      applymentDetailInfo.benefitCredStartTime = applymentDetailInfo.idcardEffectBegin
      applymentDetailInfo.benefitCredTime = applymentDetailInfo.idcardEffectEnd
    } else {
      applymentDetailInfo.benefitCredPeople = ''
      applymentDetailInfo.benefitCred1Img = ''
      applymentDetailInfo.benefitCred2Img = ''
      applymentDetailInfo.benefitCredNo = ''
      applymentDetailInfo.benefitOperateAddr = ''
      applymentDetailInfo.benefitCredStartTime = ''
      applymentDetailInfo.benefitCredTime = ''
    }
  }
}

// 经营地 省市区选择回调
function searchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  applymentDetailInfo.address = value[0].label + '-' + value[1].label + '-' + value[2].label + '-'
}

defineExpose({ saveDataPreCallback })

// 瑞银信获取银行开户支行信息列表
function getRuiBranchBankList() {
  if (applymentDetailInfo.queryBranchBank == null) {
    $infoBox.message.error('请输入支行关键字后再进行查询')
  }else{
  $ruipayGetBankList(mchApplymentData.ifCode, applymentDetailInfo.headBankNo, mchApplymentData.mchNo, applymentDetailInfo.queryBranchBank).then((res) => {
     vdata.branchBankList = []
      if(res && res.records.length) {
          res.records.forEach(element => {
            vdata.branchBankList.push({
              label: element.bankName,
              value: element.bankValue
            })
          })
      }else{
        $infoBox.message.error('该银行下未找到对应支行列表')
      }
    }).catch(() => {})
  }
}

// 瑞银信获取银行开户支行信息 回调
function changeBankFunc(value) {
  applymentDetailInfo.openBankName = value
}

</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>