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

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

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

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

        <a-form-item label="营业执照名称" name="mchFullName">
          <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="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>
          <span class="jeepay-tip-text">(示例：2023-10-10，中间用 - 分隔)</span>
        </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="ocrScanFunc"
        />
        <span class="jeepay-tip-text"
        >(上传图片自动识别 身份证名称 身份证号)</span
        >
      </a-form-item>

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

      <a-form-item
          label="法人手持身份证照片"
          name="idcardInHandImg"
          v-if="applymentDetailInfo.merchantType !== 3"
      >
        <JeepayUpload
            v-model:src="applymentDetailInfo.idcardInHandImg"
            :imgSize="2"
            bizType="applyment"
        />
      </a-form-item>

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

      <a-form-item label="法人身份证号" name="idcardNo">
        <a-input v-model:value.trim="applymentDetailInfo.idcardNo" />
      </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="merRegName" v-if="applymentDetailInfo.merchantType == 3 && applymentDetailInfo.mchFullName && applymentDetailInfo.mchFullName.length > 20">
        <a-input v-model:value.trim="applymentDetailInfo.merRegName"  />
      </a-form-item>
      <a-form-item label="商户全称2" name="mchFullName" v-if="applymentDetailInfo.merchantType == 1">
        <a-input v-model:value.trim="applymentDetailInfo.mchFullName" disabled />

      </a-form-item>
      <a-form-item label="商户简称" name="mchShortName">
        <a-input
            v-model:value.trim="applymentDetailInfo.mchShortName"
            placeholder="填写门店或品牌名称，支付时或小票页展示"
        />
        <span class="jeepay-tip-text">(商户经营名称 不得少于7个字符)</span>
        <div v-if="applymentDetailInfo.mchShortName && applymentDetailInfo.mchShortName.length < 7" style="color:red">商户简称名称不得少于7个字符</div>
      </a-form-item>
      <a-form-item label="经营类目" name="mccCode">
        <!-- <JeepayLklpayMccSelect v-model:value="applymentDetailInfo.mccCode" @change="changeMccFunc" /> -->
        <!--        <JeepayLklspayMchMccSelect v-model:value="applymentDetailInfo.mccCode" @change="changeMccFunc"/>-->

        <JeepayLklspayEntMccSelect
            v-model:value="applymentDetailInfo.mccCode"
            @change="changeMccFunc"
        />
      </a-form-item>
      <a-form-item label="经营内容" name="licenseBusiness">
        <!-- <a-input v-model:value.trim="applymentDetailInfo.licenseBusiness" /> -->
        <a-select
            v-model:value="applymentDetailInfo.licenseBusiness"
            @change="changeLicenseBusiness"
            :getPopupContainer="(triggerNode) => (triggerNode.parentElement)"
        >
          <a-select-option
              v-for="item in optionList"
              :key="item"
              :value="item"
          ></a-select-option>
        </a-select>
      </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(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="mchAreaCode">
        <JeepayAreaSelectLkl v-model:value="applymentDetailInfo.mchAreaCode" @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"
        />
      </a-form-item>

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

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

      <a-form-item label="结算人在收银台内合影" name="cashierWithSettlerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.cashierWithSettlerImg" bizType="applyment" />
        <span class="jeepay-tip-text">(请提供结算人站在收银台内的照片<a href="javascript:void(0)" class="jeepay-tip-bos-img" @click="lookUp(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">
        <!--          @change="() => emit('itemRender')"-->
        <a-radio-group
            v-model:value="applymentDetailInfo.settlementAccountType"
            @change="getSettlementAccountType"
        >
          <!--          <a-radio value="C">法人对私</a-radio>-->
          <!--          <a-radio value="B" v-if="applymentDetailInfo.merchantType == 3"-->
          <!--            >对公</a-radio-->
          <!--          >-->
          <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-group>
      </a-form-item>


      <!--      <a-form-item-->
      <!--        label="结算人是否为法人"-->
      <!--        name="isLegalInfo"-->
      <!--        v-if="applymentDetailInfo.merchantType != 1"-->
      <!--      >-->
      <!--        <a-radio-group v-model:value="applymentDetailInfo.isLegalInfo">-->
      <!--          <a-radio value="1">法人</a-radio>-->
      <!--          <a-radio value="0">非法人</a-radio>-->
      <!--        </a-radio-group>-->
      <!--      </a-form-item>-->
      <a-divider class="jeepay-m-divider"  orientation="left"  style="color: #1a66ff"  v-if="applymentDetailInfo.settlementAccountType == 2" >结算人证件信息</a-divider >


      <div v-if="applymentDetailInfo.settlementAccountType == 2">
        <a-form-item
            label="结算人身份证人像面照片"
            name="settAccountIdcard1Img"
        >
          <JeepayUpload
              v-model:src="applymentDetailInfo.settAccountIdcard1Img"
              bizType="applyment"
              ocrType="idCard"
              @ocrScan="ocrSettScanFunc"
          />
          <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="ocrSettScanFunc"
          />
          <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>



      </div>
      <a-divider v-if="applymentDetailInfo.settlementAccountType == 2" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人账户信息</a-divider>

      <a-form-item
          label="结算卡数字面"
          name="settAccountLicenseImg"
          v-show="applymentDetailInfo.settlementAccountType < 3"
      >
        <JeepayUpload
            v-model:src="applymentDetailInfo.settAccountLicenseImg"
            bizType="applyment"
            ocrType="bankCard"
            @ocrScan="ocrScanFunc"
        />
      </a-form-item>

      <a-form-item
          label="开户许可证照片"
          name="openingPermitImg"
          v-show="applymentDetailInfo.settAccountType === 'B'"
      >
        <JeepayUpload
            v-model:src="applymentDetailInfo.openingPermitImg"
            bizType="applyment"
        />
      </a-form-item>

      <a-form-item label="结算卡开户名" name="settAccountName" >
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" v-if="applymentDetailInfo.settlementAccountType == 1 || applymentDetailInfo.settlementAccountType == 3" disabled />
        <a-input v-model:value.trim="applymentDetailInfo.settAccountName" v-if="applymentDetailInfo.settlementAccountType == 2"  />
        <span
            class="jeepay-tip-text"
            v-if="applymentDetailInfo.settlementAccountType == 1"
        >（小微商户结算卡必须为法人本人结算卡）</span
        >
        <span
            class="jeepay-tip-text"
            v-if="applymentDetailInfo.settlementAccountType == 3"
        >（对公账户结算卡开户名必须为本公司营业执照名称）</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">
        <JeepayBankAreaSelectLkl
            v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode"
            @change="branchAreaChange"
        />
        <span class="jeepay-tip-text"
        >先选择银行查询地址，开户支行处输入支行名称可进行模糊搜索</span
        >
      </a-form-item>
      <!--      <a-form-item label="开户银行" name="settOpenAccountBankName">-->
      <!--        <a-input v-model:value.trim="applymentDetailInfo.settOpenAccountBankName" @change="getSettAccountBankName"/>-->
      <!--      </a-form-item>-->

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

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

      <a-form-item label="联行行号" name="openningBankCode" hidden>
        <a-input v-model:value.trim="applymentDetailInfo.openningBankCode" />
      </a-form-item>

      <a-form-item label="清算行号" name="clearingBankCode" hidden>
        <a-input v-model:value.trim="applymentDetailInfo.clearingBankCode" />
      </a-form-item>
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算类型

        <a-popover placement="top" style="background: #0c2640 !important;">
          <template #content  style="background: #ff0 !important;">
            <p>T1：工作日次日到账，交易资金于周末和法定节假日次日的6点-12点自动结算至银行卡</p>
            <p>D1：自然日次日到账，全年365天（不分节假日）的交易资金于自然日的次日6点-12点自动结算至银行卡</p>
            <p>D0：实时到账，全年365天24小时（不分节假日）的交易资金笔笔实时秒到至银行卡，更放心更快捷</p>
          </template>
          <question-circle-outlined />
        </a-popover>
      </a-divider>

      <a-form-item label="结算类型" name="settleType" >
        <div style="display: grid">
          <a-radio-group v-model:value="applymentDetailInfo.settleType">
            <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.settleType == '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"
    >
      <!--      <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"-->
        <!--          :channelNo="mchApplymentData.isvNo"-->
        <!--          :channelRange="mchApplymentData.range"-->
        <!--          :channelAppId="mchApplymentData.autoConfigMchAppId"-->
        <!--        />-->

        <JeepayPaywayRateUserOfflinePanel
            v-if="mchApplymentData.range == 0"
            ref="jeepayPaywayRateUserOfflinePanelRef"
            :configMode="configMode"
            :infoId="
            (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo
          "
            :selectIfCode="mchApplymentData.ifCode"
            onlyRate="true"
            :channelNo="mchApplymentData.isvNo"
            :channelRange="mchApplymentData.range"
            :channelAppId="mchApplymentData.autoConfigMchAppId"
            :settlementMethod="vdata.settlementMethod"
        />
        <JeepayPaywayRateUserOnlinePanel
            v-if="mchApplymentData.range == 1"
            ref="jeepayPaywayRateUserOnlinePanelRef"
            :configMode="configMode"
            :infoId="
            (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo
          "
            :selectIfCode="mchApplymentData.ifCode"
            onlyRate="true"
            :channelNo="mchApplymentData.isvNo"
            :channelRange="mchApplymentData.range"
            :channelAppId="mchApplymentData.autoConfigMchAppId"
            :settlementMethod="vdata.settlementMethod"
        />
      </div>
    </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 {
  reactive,
  getCurrentInstance,
  defineEmits,
  inject,
  nextTick,
  ref,
  defineProps,
  computed,
  watch,
} from "vue";
import {$getSettType, $lklGetBankList} from "@/api/manage";
import { debounce } from "lodash-es";
import ruleGenerator from "@/utils/ruleGenerator";
import fileDownload from 'js-file-download'

let optionList = [
  "百货、中介、培训、景区门票等",
  "交通运输售票",
  "电气缴费",
  "政府类",
  "便民类",
  "公立医院、公立学校、慈善",
  "宾馆餐饮娱乐类",
  "房产汽车类",
  "批发类",
  "超市加油类",
  "一般类商户",
  "三农商户",
];

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

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

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

const jeepayAmapRef = ref();
const typeFlag = ref();

// 定义组件的传入参数
const props = defineProps({
  value: { type: String, default: "" },
});

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

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

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

const branchAreaChange = (selectedOptions) => {
  applymentDetailInfo.settAccountBankBranchAreaName = [];
  applymentDetailInfo.settAccountBankBranchAreaName[0] =
      selectedOptions[0].label;
  applymentDetailInfo.settAccountBankBranchAreaName[1] =
      selectedOptions[1].label;
  getSettAccountBankName()
};
// function checkSettAccountLicenseImg(rule, value, callback) {
//   //满足这个条件下才进行表单验证
//   if (typeFlag === 1) {
//     if (!value) {
//       callback(new Error('请输入域名'));
//     } else {
//       callback()
//     }
//   } else {
//     callback()
//   }
// }

// function checkOpeningPermitImg(rule, value, callback) {
//   //满足这个条件下才进行表单验证
//   if (typeFlag === 1) {
//     if (!value) {
//       callback(new Error('请输入域名'));
//     } else {
//       callback()
//     }
//   } else {
//     callback()
//   }
// }

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

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

  if(applymentDetailInfo.merchantType == 1){
    applymentDetailInfo.diySettAccountName = applymentDetailInfo.idcardName
  }else{
    applymentDetailInfo.diySettAccountName = applymentDetailInfo.mchFullName
  }
}
// 没有支行号，将支行名称重置
if (applymentDetailInfo.openningBankCode == null || applymentDetailInfo.openningBankCode == '') {
  applymentDetailInfo.settAccountBankName = null;
}
// setInterval(function () {
//   getMchFullName()
// },2000)


getSettType()
// 响应式数据
const vdata: any = reactive({
  showStyle: "step", // 显示类型： step-分步,  block-整页显示
  steps: ["主体信息", "经营信息", "结算信息", "费率信息"],
  isTempData: false, // 是否保存草稿
  payWayFee: "未设置",
  currentStep: 1,
  settlementMethod:[] as any,
  bankInfoList: [],
  filteredBankInfoList: [],
  initBankInfoList: [],
  step1Rules: {
    merchantType: [ruleGenerator.requiredSelect("商户类型", "number")],
    licenseImg: [ruleGenerator.requiredUpload("营业执照照片")],
    licenseNo: [ruleGenerator.requiredInput("营业执照编号")],
    licenseEffectBegin: [
      ruleGenerator.requiredInput("营业执照起始有限期"),
      ruleGenerator.dateOrForever,
    ],
    licenseEffectEnd: [
      ruleGenerator.requiredInput("营业执照截止有限期"),
      ruleGenerator.dateOrForever,
    ],
    mchFullName: [ruleGenerator.requiredInput("商户全称")],
    // merRegName: [ruleGenerator.requiredInput("商户全称")],
    idcardName: [ruleGenerator.requiredInput("身份证中的姓名")],
    idcardNo: [ruleGenerator.requiredInput("身份证号")],
    idcard1Img: [ruleGenerator.requiredUpload("法人身份证人像面照片")],
    idcard2Img: [ruleGenerator.requiredUpload("法人身份证国徽面照片")],
    idcardInHandImg: [ruleGenerator.requiredUpload("法人手持身份证照片")],
    idcardEffectBegin: [
      ruleGenerator.requiredInput("身份证起始有效期"),
      ruleGenerator.date,
    ],
    idcardEffectEnd: [
      ruleGenerator.requiredInput("身份证有效期截止日期"),
      ruleGenerator.dateOrForever,
    ],
  },
  step2Rules: {
    merRegName: [ruleGenerator.requiredInput("商户全称")],
    mchFullName: [ruleGenerator.requiredInput("商户全称名称")],
    mchShortName: [ruleGenerator.requiredInput("商户经营名称")],
    mccCode: [ruleGenerator.requiredSelect("行业")],
    contactName: [ruleGenerator.requiredInput("联系人姓名")],
    contactPhone: [ruleGenerator.requiredInput("联系人电话")],
    contactEmail: [ruleGenerator.requiredInput("联系人邮箱")],
    mchAreaCode: [ruleGenerator.requiredSelect("位置编码", "array")],
    licenseBusiness: [ruleGenerator.requiredSelect("经营内容", "string")],
    // merBusiContent: [ruleGenerator.requiredSelect("经营内容")],
    storeOuterImg: [ruleGenerator.requiredUpload("门头照")],
    storeInnerImg: [ruleGenerator.requiredUpload("店内环境照")],
    storeCashierImg: [ruleGenerator.requiredUpload("收银台照")],
    cashierWithSettlerImg: [ ruleGenerator.requiredInput('请提供结算人站在收银台内的照片') ],
  },
  step3Rules: {
    bankMobile: [ruleGenerator.requiredSelect("银行卡预留手机号")],
    // settAccountLicenseImg: [ruleGenerator.requiredSelect("结算卡数字面")],
    settAccountType: [ruleGenerator.requiredSelect("账户类型")],
    settleAuthAddress: [ruleGenerator.requiredSelect("结算人身份证地址")],
    isLegalInfo: [ruleGenerator.requiredSelect("结算人类型")],
    settleType: [ruleGenerator.requiredSelect("结算方式")],
    settAccountNo: [ruleGenerator.requiredInput("结算银行卡账号")],
    settAccountName: [ruleGenerator.requiredInput("结算卡开户名")],
    // settAccountLicenseImg: [],
    // openingPermitImg: [],
    settAccountBankName: [ruleGenerator.requiredInput("银行名称")],
    accountInstId: [ruleGenerator.requiredInput("银行简称")],
    settAccountBankBranchAreaCode: [
      ruleGenerator.requiredSelect("支行地区", "array"),
    ],
    settAccountBankBranchName: [ruleGenerator.requiredInput("开户支行名称")],
    // alipayLogonId: [ruleGenerator.requiredInput('结算支付宝账号')],
    openningBankCode: [ruleGenerator.requiredInput('联行行号')],
    clearingBankCode: [ruleGenerator.requiredInput('清算行号')],
    // settlePeriod: [ruleGenerator.requiredSelect('结算周期')],
    settAccountIdcard1Img: [
      ruleGenerator.requiredUpload("结算人身份证人像面照片"),
    ],
    settAccountIdcard2Img: [
      ruleGenerator.requiredUpload("结算人身份证国徽面照片"),
    ],
    settAccountIdcardNo: [ruleGenerator.requiredInput("结算身份证号")],
    settAccountIdcardEffectBegin: [
      ruleGenerator.requiredInput("结算身份证有效期开始时间"),
    ],
    settAccountIdcardEffectEnd: [
      ruleGenerator.requiredInput("结算身份证有效期截止时间"),
    ],
    letterOfAuthorizationImg: [
      ruleGenerator.requiredUpload("非法人结算授权函"),
    ],
  },
  step4Rules: {},
});

watch(
    () => applymentDetailInfo.settAccountType,
    (newSettAccountType) => {
      // vdata.step3Rules.settAccountLicenseImg = [
      //   ruleGenerator.requiredUpload(
      //       "结算卡数字面",
      //       "string",
      //       newSettAccountType === "C"
      //   ),
      // ];
      // vdata.step3Rules.openingPermitImg = [
      //   ruleGenerator.requiredUpload(
      //       "开户许可证照片",
      //       "string",
      //       newSettAccountType === "B"
      //   ),
      // ];
    }
);

watch(
    () => applymentDetailInfo.isLegalInfo,
    (newIsLegalInfo) => {
      vdata.step3Rules.settAccountIdcard1Img = [
        ruleGenerator.requiredUpload(
            "结算人身份证人像面照片",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
      vdata.step3Rules.settAccountIdcard2Img = [
        ruleGenerator.requiredUpload(
            "结算人身份证国徽面照片",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
      vdata.step3Rules.settAccountIdcardNo = [
        ruleGenerator.requiredInput(
            "结算身份证号",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
      vdata.step3Rules.settAccountIdcardEffectBegin = [
        ruleGenerator.requiredInput(
            "结算身份证有效期开始时间",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
      vdata.step3Rules.settAccountIdcardEffectEnd = [
        ruleGenerator.requiredInput(
            "结算身份证有效期截止时间",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
      vdata.step3Rules.letterOfAuthorizationImg = [
        ruleGenerator.requiredUpload(
            "非法人结算授权函",
            "string",
            newIsLegalInfo === "0"
        ),
      ];
    }
);

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

// 下一步
function toNextStep() {
  // 验证是否通过
  proxy.$refs["stepForm" + vdata.currentStep + "Ref"].validate().then(() => {
    vdata.currentStep++;
  });
  if (vdata.currentStep == 2 || vdata.currentStep == 1) {
    mapInit();
  }
  applymentDetailInfo.merRegName = applymentDetailInfo.mchFullName;
}

// 上一步
function toPrevStep() {
  vdata.currentStep--;
  if (vdata.currentStep == 2) {
    mapInit();
  }
}

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

function mapInit() {
  let mapData = jeepayAmapRef.value.getMapData();
  console.log(mapData,'mapDatamapData')
  if (mapData.address) {
    // applymentDetailInfo.areaCode = mapData.areacode;
    applymentDetailInfo.mchareaCode = 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];
  }

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

// 图片识别的回调函数
function ocrScanFunc(orcObject: any) {
  if (orcObject) {
    console.log(orcObject,'orcObject')
    // 银行名称不变更
    if (orcObject.settAccountBankName) {
      applymentDetailInfo.settAccountBankName =  orcObject.settAccountBankName;
      getSettAccountBankName()
    }
    Object.assign(applymentDetailInfo, orcObject);
  }
  getIdcardName()
}

function getSettAccountBankName(){
  searchBranchBank(applymentDetailInfo.settAccountBankName)
}

// 图片识别的回调函数
function ocrSettScanFunc(orcObject: any) {
  if (orcObject) {
    if (orcObject.idcardNo) {
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo;
    }
    if (orcObject.idcardAddress) {
      applymentDetailInfo.settleAuthAddress = orcObject.idcardAddress;
    }

    if (orcObject.idcardEffectBegin) {
      applymentDetailInfo.settAccountIdcardEffectBegin =
          orcObject.idcardEffectBegin;
    }

    if (orcObject.idcardEffectEnd) {
      applymentDetailInfo.settAccountIdcardEffectEnd =
          orcObject.idcardEffectEnd;
    }
  }
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp) {
  let mapData = jeepayAmapRef.value.getMapData();
  if (mapData.address) {
    // applymentDetailInfo.areaCode = mapData.areacode;
    applymentDetailInfo.mchareaCode = 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];
  }

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

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


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

  // 验证所有表单
  return validateAllForm(1)
      .then(() => {
        return Promise.resolve();
      })
      .catch((params: any) => {
        $infoBox.message.error("数据填写不完整， 请检查后提交");
        return Promise.reject();
      });
}
function 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.areaName.push(value[0].label)
  applymentDetailInfo.areaName.push(value[1].label)
  applymentDetailInfo.areaName.push(value[2].label)

  applymentDetailInfo.areaCode.push(value[0].value)
  applymentDetailInfo.areaCode.push(value[1].value)
  applymentDetailInfo.areaCode.push(value[2].value)

  applymentDetailInfo.areaCodeName=areaCodeName
  applymentDetailInfo.mchAddressCodeName=areaCodeName


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

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

// 行业编码选择
function changeMccFunc(value) {}

function changeLicenseBusiness(value) {
  // console.log(value);
  // console.log(
  //   applymentDetailInfo.licenseBusiness,
  //   "applymentDetailInfo.licenseBusinessapplymentDetailInfo.licenseBusiness"
  // );
  // applymentDetailInfo.licenseBusiness = value;
}
// 变更商户类型
function mchTypeChange() {
  applymentDetailInfo.mccCode = "";
  getMchFullName()
}

const searchBranchBank = debounce((value: any) => {
  // 区编码
  if (
      applymentDetailInfo.settAccountBankBranchAreaCode?.[1] &&
      value.length > 0
  ) {
    let areaCode = applymentDetailInfo.settAccountBankBranchAreaCode?.[1];

    $lklGetBankList(areaCode, value)
        .then((res) => {
          vdata.bankInfoList = [];
          vdata.filteredBankInfoList = [];
          if (res?.length > 0) {
            vdata.initBankInfoList = JSON.parse(res);
            console.log(vdata.initBankInfoList,'resresres')
            vdata.initBankInfoList.forEach((element) => {
              vdata.bankInfoList.push({
                label: element.branchBankName,
                value: element.id,
                bankNo: element.bankNo,
                branchBankNo: element.branchBankNo,
                clearNo: element.clearNo,
                areaCode: element.areaCode,
              });
            });
            vdata.filteredBankInfoList = vdata.bankInfoList
          } else {
            $infoBox.message.error("该支行名称未搜索到或该地区没有对应的银行列表");
          }
        })
        .catch((error) => {
          console.log(error);
        });
  }
}, 300);
function handleBankSearch(value) {
  // getSettAccountBankName(value)
  // vdata.filteredBankInfoList = [];
  // console.log(vdata.bankInfoList,'handleBankSearchhandleBankSearchhandleBankSearch')
  // vdata.bankInfoList.forEach((item: { label: string | any[]; }) => {
  //   if (item.label.includes(value)) {
  //     vdata.filteredBankInfoList.push(item);
  //   }
  // });
}
// function changeBankFunc(value) {
//   if (vdata.initBankInfoList) {
//     vdata.bankInfoList.forEach((element) => {
//       if (element.id == value) {
//         applymentDetailInfo.settAccountBankName = element.branchBankName;
//         applymentDetailInfo.bankSubCode = element.branchBankNo;
//         applymentDetailInfo.openningBankCode = element.branchBankNo;
//         applymentDetailInfo.clearingBankCode = element.clearNo;
//       }
//     });
//   }
// }

const changeBankFunc = (value) => {
  vdata.filteredBankInfoList = [];
  vdata.bankInfoList.forEach((item) => {
    if (item.value == value.value) {
      console.log(item,'item')
      applymentDetailInfo.settAccountBankBranchName = item.label;
      applymentDetailInfo.openningBankCode = item.branchBankNo;
      applymentDetailInfo.clearingBankCode = item.clearNo;
    }
  });
  console.log(applymentDetailInfo,'applymentDetailInfoapplymentDetailInfo')
};
function funLegalInfo(value) {
  if (value == "1") {
    // 联系人姓名
    applymentDetailInfo.contactName = applymentDetailInfo.idcardName;
    // 联系人手机号
    applymentDetailInfo.contactPhone = applymentDetailInfo.legalPersonPhone;
  } else {
    // 联系人姓名
    applymentDetailInfo.contactName = "";
    // 联系人手机号
    applymentDetailInfo.contactPhone = "";
  }
}
function getSettlementAccountType() {
  if(applymentDetailInfo.settlementAccountType == 1){
    applymentDetailInfo.settAccountType = "C"
    applymentDetailInfo.isLegalInfo = 1
  }
  if(applymentDetailInfo.settlementAccountType == 2){
    applymentDetailInfo.settAccountType = "C"
    applymentDetailInfo.isLegalInfo = 0
  }

  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/lalletterOfAuthorizationImg.png';
  if(type == 2){
    images = "https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/yssettleAuthLetterHandlePhoto.png";
  }else  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/lalletterOfAuthorizationImg.png';
  }
  $viewerApi({images: [images]})
}
function download(){
  let fileUrl = 'https://syb-manage.oss-cn-hangzhou.aliyuncs.com/shouyinbei/lalletterOfAuthorizationImg.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 getIdcardName() {
  if(applymentDetailInfo.settlementAccountType == 3){
    applymentDetailInfo.diySettAccountName =   applymentDetailInfo.mchFullName
    applymentDetailInfo.settAccountName =   applymentDetailInfo.mchFullName
  }else{
    applymentDetailInfo.diySettAccountName =   applymentDetailInfo.idcardName;
    applymentDetailInfo.settAccountName =   applymentDetailInfo.idcardName
  }
  applymentDetailInfo.standByStlAccNm =   applymentDetailInfo.idcardName;

  getMchFullName()
}
function getDiySettAccountName() {
  applymentDetailInfo.diySettAccountName =   applymentDetailInfo.mchFullName;
}

function getSettType() {
  $getSettType( mchApplymentData.ifCode,mchApplymentData.isvNo).then((res) => {
    vdata.settlementMethod = res
  })
}
function getMchFullName() {
  if(applymentDetailInfo.merchantType == 1){
    if(applymentDetailInfo.idcardName != 'undefined' && applymentDetailInfo.idcardName != ''){
      applymentDetailInfo.mchFullName = ""
    }else{
      applymentDetailInfo.mchFullName = "商户_"+applymentDetailInfo.idcardName
    }
    applymentDetailInfo.mchFullName = applymentDetailInfo.mchShortName

    console.log(applymentDetailInfo.mchFullName,'applymentDetailInfo.mchFullName')
  }else if(applymentDetailInfo.merchantType == 2){
    console.log(applymentDetailInfo.idcardName ,'applymentDetailInfo.idcardName ')
      if(applymentDetailInfo.idcardName !='' || applymentDetailInfo.idcardName == undefined){
        applymentDetailInfo.idcardName = ''
      }
  }
}
defineExpose({ saveDataPreCallback });
</script>

<style lang="less" scoped>
.jeepay-tip-text {
  font-size: 10px;
  color: rebeccapurple;
}

.option-left {
  width: 50%;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}

.option-right {
  color: rgb(153, 153, 153);
}

.option-bottom {
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
  color: rgb(153, 153, 153);
}

.jeepay-btn-box {
  margin: 15px -12px !important;
}

.jeepay-btn-box .ant-btn {
  margin: 0 10px;
}
:deep(.jeepay-valid .ant-form-item-control-input-content){
  display: block !important;
}
.jeepay-tip-span::before{
  display: none !important;
}
</style>
