<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">
          <!--  1-个人, 2-个体工商户, 3-企业, 4-党政、机关及事业单位, 5-其他组织 -->
          <a-radio :value="1">小微商户</a-radio>
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
          <a-radio :value="4">事业单位</a-radio>
        </a-radio-group>
      </a-form-item>
      

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

      <div v-if="applymentDetailInfo.merchantType == 1">
        <a-form-item label="租赁协议" name="leaseAgreement">
          <JeepayUpload v-model:src="applymentDetailInfo.leaseAgreement" bizType="applyment" />
        </a-form-item>
      </div>

      <div v-if="applymentDetailInfo.merchantType == 2 || applymentDetailInfo.merchantType == 3 || applymentDetailInfo.merchantType == 4">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">营业执照</a-divider>
        <a-form-item label="营业执照类型" name="businessLicenseType">
          <a-radio-group v-model:value="applymentDetailInfo.businessLicenseType">
            <a-radio value="02">营业执照（多证合一）</a-radio>
            <a-radio value="01">营业执照</a-radio>
            <a-radio value="03">事业单位 法人证书</a-radio>
          </a-radio-group>
        </a-form-item>

        <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>
        </a-form-item>

        <a-form-item label="公司规模" name="employeeNum">
          <a-radio-group v-model:value="applymentDetailInfo.employeeNum">
            <a-radio value="1">0-50人</a-radio>
            <a-radio value="2">50-100人</a-radio>
            <a-radio value="3">100 以上</a-radio>
          </a-radio-group>
        </a-form-item>


        <a-form-item label="注册资本(单位-万元)" name="capital">
          <a-input v-model:value.trim="applymentDetailInfo.capital" />
        </a-form-item>

        <a-form-item label="组织机构代码照" name="picInstitutional">
          <JeepayUpload v-model:src="applymentDetailInfo.picInstitutional" bizType="applyment" />
        </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="idcardName">
        <a-input v-model:value.trim="applymentDetailInfo.idcardName" />
      </a-form-item>

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

      <a-form-item label="法人身份证号" name="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="standardFlag">
        <a-radio-group v-model:value="applymentDetailInfo.standardFlag" placeholder="行业大类">
          <a-radio value="0">标准(默认上送项)</a-radio>
          <a-radio value="1">优惠</a-radio>
          <a-radio value="2">减免</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="商户经营类型" name="busiLicMain">
        <a-radio-group v-model:value="applymentDetailInfo.busiLicMain" placeholder="商户经营类型">
          <a-radio value="1">现实(默认上送项)</a-radio>
          <a-radio value="2">虚拟</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营形态" name="businForm">
        <a-radio-group v-model:value="applymentDetailInfo.businForm" placeholder="商户经营类型">
          <a-radio value="01">连锁店</a-radio>
          <a-radio value="02">普通店(默认上送项)</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="经营类目" name="mccCode">
        <JeepaykdbpayMccSelect v-model:value="applymentDetailInfo.mccCode" />
      </a-form-item>
      
      <a-form-item label="商户经营省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" @change="searchAreaFunc" />
      </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="contactName">
        <a-input v-model:value.trim="applymentDetailInfo.contactName" />
      </a-form-item>

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

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

      <a-form-item label="商户负责人起始有效期" name="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>
        
      <a-form-item label="商户邮箱" name="contactEmail">
        <a-input v-model:value.trim="applymentDetailInfo.contactEmail" />
      </a-form-item>
      <a-form-item label="商户客服电话" name="merHotline">
        <a-input v-model:value.trim="applymentDetailInfo.merHotline" />
        <span class="jeepay-tip-text">(不填写会按【商户负责人手机号】上送)</span>
      </a-form-item>

      <a-button shape="round" style="margin-left: 40%; margin-bottom:10px " type="primary" @click="isLegal('controler')">
        <arrow-right-outlined />
        点此使用法人作为商户负责人
      </a-button>

      <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-form-item label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </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;">
        <span v-if="applymentDetailInfo.settAccountType == 'C'">(对私)</span>
        账户信息
      </a-divider>

      <a-form-item label="账户类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" @change="() => emit('itemRender')">
          <a-radio :disabled="applymentDetailInfo.merchantType == 1" value="B">对公</a-radio>
          <a-radio value="C">对私</a-radio>
        </a-radio-group>
      </a-form-item>
      

      <a-form-item label="结算类型" name="settleWay">
        <a-radio-group v-model:value="applymentDetailInfo.settleWay" defaultValue="D1" @change="() => emit('itemRender')">
          <a-radio value="DEF">使用服务商默认配置</a-radio>
          <a-radio value="D0">D0</a-radio>
          <a-radio value="D1">D1</a-radio>
        </a-radio-group>
      </a-form-item>


      <a-form-item label="银行" name="bankNo">
        <a-select v-model:value="applymentDetailInfo.bankNo" placeholder="银行">
          <a-select-option value="1">工商银行</a-select-option>
          <a-select-option value="2">中国银行</a-select-option>
          <a-select-option value="3">中国建设银行</a-select-option>
          <a-select-option value="4">中国农业银行</a-select-option>
          <a-select-option value="5">招商银行</a-select-option>
          <a-select-option value="6">中国邮政储蓄银行</a-select-option>
          <a-select-option value="7">中国光大银行</a-select-option>
          <a-select-option value="8">浦发银行</a-select-option>
          <a-select-option value="10">兴业银行</a-select-option>
          <a-select-option value="11">平安银行</a-select-option>
          <a-select-option value="12">广发银行</a-select-option>
          <a-select-option value="13">中信银行</a-select-option>
          <a-select-option value="14">交通银行</a-select-option>
          <a-select-option value="15">中国民生银行</a-select-option>
          <a-select-option value="10000197">中国人民银行</a-select-option>
          <a-select-option value="42">杭州银行</a-select-option>
          <a-select-option value="43">东莞农村商业银行</a-select-option>
          <a-select-option value="45">农村商业银行</a-select-option>
          <a-select-option value="46">华夏银行</a-select-option>
          <a-select-option value="61">贵阳银行</a-select-option>
          <a-select-option value="81">上海农商银行</a-select-option>
          <a-select-option value="104">焦作中旅银行</a-select-option>
          <a-select-option value="141">上海银行</a-select-option>
          <a-select-option value="142">徽商银行</a-select-option>
          <a-select-option value="162">农村合作信用社</a-select-option>
          <a-select-option value="221">渤海银行</a-select-option>
          <a-select-option value="241">江苏银行</a-select-option>
          <a-select-option value="262">洛阳银行</a-select-option>
          <a-select-option value="281">青岛银行</a-select-option>
          <a-select-option value="321">包商银行</a-select-option>
          <a-select-option value="341">村镇银行</a-select-option>
          <a-select-option value="422">中原银行</a-select-option>
          <a-select-option value="441">郑州银行</a-select-option>
          <a-select-option value="524">东亚银行</a-select-option>
          <a-select-option value="525">城市商业银行</a-select-option>
          <a-select-option value="561">恒丰银行</a-select-option>
          <a-select-option value="10000001">芜湖津盛农村商业银行股份有限公司</a-select-option>
          <a-select-option value="10000196">平顶山银行</a-select-option>
          <a-select-option value="10000021">浙商银行</a-select-option>
          <a-select-option value="10000198">新韩银行(中国)有限公司</a-select-option>
          <a-select-option value="10000199">中国农业发展银行</a-select-option>
          <a-select-option value="10000120">中国进出口银行</a-select-option>
          <a-select-option value="10000122">城市信用社</a-select-option>
          <a-select-option value="10000121">重庆三峡银行股份有限公司</a-select-option>
          <a-select-option value="10000123">韩亚银行(中国)有限公司</a-select-option>
          <a-select-option value="10000125">财务公司</a-select-option>
          <a-select-option value="10000124">农村合作银行</a-select-option>
          <a-select-option value="10000126">三井住友银行</a-select-option>
          <a-select-option value="10000127">三菱日联银行 - 电子商业汇票系统处理中心</a-select-option>
          <a-select-option value="10000128">中华人民共和国国家金库</a-select-option>
          <a-select-option value="10000129">其它银行</a-select-option>
          <a-select-option value="10000130">国家开发银行</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="开户人身份证正面照" name="settAccountIdcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanAccountFunc" />
      </a-form-item>

      <a-form-item label="开户人身份证反面照" name="settAccountIdcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" />
      </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="settAccountAdress">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountAdress" />
      </a-form-item>
      
      <div v-if="!(applymentDetailInfo.settAccountType == 'C' && applymentDetailInfo.merchantType == 3)">
        <a-form-item v-if="applymentDetailInfo.merchantType == 3 || applymentDetailInfo.merchantType == 4 || (applymentDetailInfo.merchantType == 2 && applymentDetailInfo.settAccountType == 'B') " label="开户许可证" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
        </a-form-item>
      </div>

      <a-form-item v-if="applymentDetailInfo.merchantType == 1 || applymentDetailInfo.merchantType == 2 || (applymentDetailInfo.merchantType == 3 && applymentDetailInfo.settAccountType == 'C')" label="银行卡照" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" ocrType="bankCard" bizType="applyment" @ocrScan="ocrScanFunc" />
      </a-form-item>

      <a-button shape="round" style="margin-left: 40%; margin-bottom:10px " type="primary" @click="isLegal('jiesuan')">
        <arrow-right-outlined />
        点此使用法人作为结算信息
      </a-button>

      <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="accountPhone">
        <a-input v-model:value.trim="applymentDetailInfo.accountPhone" />
      </a-form-item>

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

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

      <a-form-item label="联行号" name="bankLineNo">
        <a-input v-model:value.trim="applymentDetailInfo.bankLineNo" />
        <a href="https://www.cwjyz.com.cn/bank/index.html" target="_blank">点击查询联行号和支行名称</a>
      </a-form-item>

      <a-form-item label="支行名称" name="settAccountBankBranchName">
        <a-input v-model:value.trim="applymentDetailInfo.settAccountBankBranchName" />
      </a-form-item>

      <a-form-item v-if="applymentDetailInfo.merchantType !=1 && applymentDetailInfo.settAccountType == 'C'" label="清算授权书(对私)" name="picAuthorization">
        <JeepayUpload v-model:src="applymentDetailInfo.picAuthorization" bizType="applyment" />
      </a-form-item>
      

      <div v-if="applymentDetailInfo.settAccountType == 'C' && applymentDetailInfo.merchantType == 3">
        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">对公信息</a-divider>

        <a-form-item label="开户许可证" name="companyAccountLicenseImg">
          <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" ocrType="accountlicense" bizType="applyment" @ocrScan="ocrScanFunc" />
        </a-form-item>

        <a-form-item label="第二套账户名(对公)" name="settleAcctNmTwo">
          <a-input v-model:value.trim="applymentDetailInfo.settleAcctNmTwo" />
        </a-form-item>

        <a-form-item label="第二套账户号(对公)" name="settleAcctTwo">
          <a-input v-model:value.trim="applymentDetailInfo.settleAcctTwo" />
        </a-form-item>

        <a-form-item label="第二套银行预留手机号(对公)" name="faxTwo">
          <a-input v-model:value.trim="applymentDetailInfo.faxTwo" />
        </a-form-item>

        <a-form-item label="银行号(对公)" name="settleBankIdUpTwo">
          <a-select v-model:value="applymentDetailInfo.settleBankIdUpTwo" placeholder="银行">
            <a-select-option value="001">中国人民银行</a-select-option>
            <a-select-option value="102">中国工商银行</a-select-option>
            <a-select-option value="103">中国农业银行</a-select-option>
            <a-select-option value="104">中国银行</a-select-option>
            <a-select-option value="105">中国建设银行</a-select-option>
            <a-select-option value="201">国家开发银行</a-select-option>
            <a-select-option value="202">中国进出口银行</a-select-option>
            <a-select-option value="203">中国农业发展银行</a-select-option>
            <a-select-option value="301">交通银行</a-select-option>
            <a-select-option value="302">中信银行</a-select-option>
            <a-select-option value="303">中国光大银行</a-select-option>
            <a-select-option value="304">华夏银行</a-select-option>
            <a-select-option value="305">中国民生银行</a-select-option>
            <a-select-option value="306">广发银行</a-select-option>
            <a-select-option value="307">平安银行</a-select-option>
            <a-select-option value="308">招商银行</a-select-option>
            <a-select-option value="309">兴业银行</a-select-option>
            <a-select-option value="310">浦发银行</a-select-option>
            <a-select-option value="313">焦作中旅银行股份有限公司</a-select-option>
            <a-select-option value="314">农村商业银行</a-select-option>
            <a-select-option value="315">恒丰银行</a-select-option>
            <a-select-option value="316">浙商银行股份有限公司</a-select-option>
            <a-select-option value="317">农村合作银行</a-select-option>
            <a-select-option value="318">渤海银行股份有限公司</a-select-option>
            <a-select-option value="319">徽商银行股份有限公司</a-select-option>
            <a-select-option value="320">村镇银行</a-select-option>
            <a-select-option value="321">重庆三峡银行股份有限公司</a-select-option>
            <a-select-option value="322">上海农商银行</a-select-option>
            <a-select-option value="325">上海银行股份有限公司</a-select-option>
            <a-select-option value="401">城市信用社</a-select-option>
            <a-select-option value="402">农村合作信用社</a-select-option>
            <a-select-option value="403">中国邮政储蓄银行</a-select-option>
            <a-select-option value="502">东亚银行（中国）有限公司</a-select-option>
            <a-select-option value="514">中信银行国际（中国）有限公司</a-select-option>
            <a-select-option value="561">三菱日联银行（中国）有限公司</a-select-option>
            <a-select-option value="563">三井住友银行（中国）有限公司</a-select-option>
            <a-select-option value="595">新韩银行(中国)有限公司</a-select-option>
            <a-select-option value="597">韩亚银行(中国)有限公司</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="联行号(对公)" name="openStlnoTwo">
          <a-input v-model:value.trim="applymentDetailInfo.openStlnoTwo" />
        </a-form-item>

        <a-form-item label="支行名称(对公)" name="settleBankNmTwo">
          <a-input v-model:value.trim="applymentDetailInfo.settleBankNmTwo" />
        </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"
    >
      <a-form-item label="协议" name="agreementImg">
        <JeepayUploadBatch v-model:fileList="applymentDetailInfo.agreementImg" bizType="applyment" listType="picture-card" />
      </a-form-item>

      <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 < 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, ref } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'

// 获取当前实例的代理对象
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({
    isshow: false,
    showStyle: 'step', // 显示类型： step-分步,  block-整页显示 
    steps: ['主体信息', '经营信息', '结算账户', '签约信息'],
    isTempData: false, // 是否保存草稿
    payWayFee: '未设置',
    currentStep: 1,
    step1Rules: {
        capital: [ruleGenerator.requiredSelect('注册资本')],
        employeeNum: [ruleGenerator.requiredSelect('公司规模')],
        businessLicenseType: [ruleGenerator.requiredSelect('营业执照类型')],
        merchantType: [ruleGenerator.requiredSelect('商户类型', 'number')],
        leaseAgreement: [ruleGenerator.requiredUpload('租赁协议')],
        idcard1Img: [ruleGenerator.requiredUpload('法人身份证正面')],
        idcard2Img: [ruleGenerator.requiredUpload('法人身份证反面')],
        licenseImg: [ruleGenerator.requiredUpload('营业执照照片')],
        licenseNo: [ruleGenerator.requiredInput('营业执照编号')],
        idcardPhone: [ruleGenerator.requiredInput('法人手机号')],
        licenseEffectBegin: [ruleGenerator.requiredInput('营业执照起始有限期'), ruleGenerator.dateOrForever],
        licenseEffectEnd: [ruleGenerator.requiredInput('营业执照截止有限期'), ruleGenerator.dateOrForever],
        mchFullName: [ruleGenerator.requiredInput('用户名称')],
        mchShortName: [ ruleGenerator.requiredInput('商户简称') ],
        idcardName: [ruleGenerator.requiredInput('法人身份证姓名')],
        idcardNo: [ruleGenerator.requiredInput('法人身份证号')],
        idcardEffectBegin: [ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date],
        idcardEffectEnd: [ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever],
    },
    step2Rules: {
        mccCode: [ruleGenerator.requiredSelect('经营类目')],
        isJoinAct:[ruleGenerator.requiredSelect('是否参加活动')],
        contactName: [ruleGenerator.requiredInput('联系人姓名')],
        contactPhone: [ruleGenerator.requiredInput('联系人电话')],
        areaCode: [ruleGenerator.requiredSelect('位置编码', 'array')],
        address: [ruleGenerator.requiredInput('经营地址')],
        storeOuterImg: [ruleGenerator.requiredInput('门头照')],
        contactEmail: [ruleGenerator.requiredInput('商户邮箱')],
        contactIdcardNo: [ruleGenerator.requiredInput('商户联系人身份证号')],
        contactIdcardEffectBegin: [ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date],
        contactIdcardEffectEnd: [ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever],
        storeCashierImg: [ruleGenerator.requiredInput('收银台')],
        storeInnerImg: [ruleGenerator.requiredInput('店内环境照')],
    },
    step3Rules: {
        settleWay: [ruleGenerator.requiredSelect('结算类型')],
        bankNo: [ruleGenerator.requiredInput('银行号')],
        settAccountIdcard1Img: [ruleGenerator.requiredUpload('开户人身份证正面照')],
        settAccountIdcard2Img: [ruleGenerator.requiredUpload('开户人身份证反面照')],
        accountPhone: [ruleGenerator.requiredInput('预留电话')],
        settAccountBankBranchAreaCode: [ruleGenerator.requiredSelect('开户行省市县','array')],
        bankLineNo: [ruleGenerator.requiredInput('联行号')],
        settAccountLicenseImg: [ruleGenerator.requiredInput('银行卡/开户许可证照片')],
        settAccountType: [ruleGenerator.requiredSelect('账户类型')],
        settAccountNo: [ruleGenerator.requiredInput('银行帐号')],
        settAccountName: [ruleGenerator.requiredInput('银行开户名')],
        settAccountBankBranchName: [ruleGenerator.requiredInput('开户行名称')],
        companyAccountLicenseImg: [ruleGenerator.requiredUpload('开户许可证')],
        settAccountIdcardNo: [ruleGenerator.requiredUpload('开户人证件照')],
        picAuthorization:[ruleGenerator.requiredUpload('清算授权书(对私)')],
        settAccountAdress: [ruleGenerator.requiredUpload('开户人地址')],
    },
    step4Rules: {
    }
})

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

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

if(!applymentDetailInfo.businessLicenseType){ //
  applymentDetailInfo.businessLicenseType = '02'
}
if(!applymentDetailInfo.employeeNum){
  applymentDetailInfo.employeeNum = '1'
}
if (!applymentDetailInfo.standardFlag) {
  applymentDetailInfo.standardFlag = '0'
}
if (!applymentDetailInfo.busiLicMain) {
  applymentDetailInfo.busiLicMain = '1'
}
if (!applymentDetailInfo.businForm) {
  applymentDetailInfo.businForm = '02'
}
if(!applymentDetailInfo.settleWay){
  applymentDetailInfo.settleWay = 'DEF'
}
// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 下一步
function toNextStep() {

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

}

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


function isLegal(type) {
    if ('controler' == type) {
        if (applymentDetailInfo.idcardName) {
            applymentDetailInfo.contactName = applymentDetailInfo.idcardName
        }
        if (applymentDetailInfo.idcardPhone) {
            applymentDetailInfo.contactPhone = applymentDetailInfo.idcardPhone
        }
        if (applymentDetailInfo.idcardNo) {
            applymentDetailInfo.contactIdcardNo = applymentDetailInfo.idcardNo
        }
        if (applymentDetailInfo.idcardEffectBegin) {
            applymentDetailInfo.contactIdcardEffectBegin = applymentDetailInfo.idcardEffectBegin
        }
        if (applymentDetailInfo.idcardEffectEnd) {
            applymentDetailInfo.contactIdcardEffectEnd = applymentDetailInfo.idcardEffectEnd
        }
    }
    if ('jiesuan' == type) {
        // 预留电话
        if (applymentDetailInfo.idcardPhone) {
            applymentDetailInfo.accountPhone = applymentDetailInfo.idcardPhone
        }

        // 银行开户名
        if (applymentDetailInfo.merchantType == '1') {
            if (applymentDetailInfo.idcardName) {
                applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
            }
        }else{
            if(applymentDetailInfo.settAccountType == 'C'){
                applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName
            }else{
                applymentDetailInfo.settAccountName = applymentDetailInfo.mchFullName
            }
        }

        // 开户人身份证正面照(对私)
        if (applymentDetailInfo.idcard1Img) {
            applymentDetailInfo.settAccountIdcard1Img = applymentDetailInfo.idcard1Img
        }

        // 开户人身份证反面照(对私)
        if (applymentDetailInfo.idcard2Img) {
            applymentDetailInfo.settAccountIdcard2Img = applymentDetailInfo.idcard2Img
        }

        if(applymentDetailInfo.idcardAddress){
            applymentDetailInfo.settAccountAdress = applymentDetailInfo.idcardAddress
        }

        if(applymentDetailInfo.idcardNo){
            applymentDetailInfo.settAccountIdcardNo = applymentDetailInfo.idcardNo
        }
    }
}

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

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

function ocrScanAccountFunc(orcObject : any) {
    applymentDetailInfo.settAccountIdcardNo=orcObject.idcardNo
    applymentDetailInfo.settAccountAdress = orcObject.idcardAddress
    if(applymentDetailInfo.settAccountType == 'C'){
        applymentDetailInfo.settAccountName = orcObject.idcardName
    }
}


// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp) {
  // 如果商户名称为空，填充商户简称（用于进件列表页【进件商户名】的展示
  if(!applymentDetailInfo.mchFullName){
    applymentDetailInfo.mchFullName = applymentDetailInfo.mchShortName
  }

  // 开户许可证有值 同步到银行卡字段
  if(applymentDetailInfo.merchantType != 1 && applymentDetailInfo.companyAccountLicenseImg){
      if(!applymentDetailInfo.settAccountLicenseImg){
          applymentDetailInfo.settAccountLicenseImg = applymentDetailInfo.companyAccountLicenseImg
      }
  }

  // 放置费率配置项
  if(jeepayPaywayRatePanelRef.value) {
    let paywayFeeList = jeepayPaywayRatePanelRef.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 searchAreaFunc(value) {
  if (applymentDetailInfo.address) {
    applymentDetailInfo.address = ''
  }
  if (value.length) {
    if (value.length == 2) {
      applymentDetailInfo.address = value[0].label + '' + value[1].label + ''
    } else if (value.length == 3) {
      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>