<template>
  <!--  <a-drawer-->
  <!--    v-model:visible="vdata.visible"-->
  <!--    :mask-closable="false"-->
  <!--    title="商户信息变更"-->
  <!--    :body-style="{ paddingBottom: '80px' }"-->
  <!--    width="80%"-->
  <!--    class="drawer-width"-->
  <!--    @close="vdata.visible = false"-->
  <!--  >-->
  <div style="background: #fff">

    <a-form layout="vertical">
      <a-row >
        <a-col :span="11">
              <a-form-item has-feedback label="变更类型" name="name">
                <a-select class="select_div" ref="select" v-model:value="vdata.mch.modifyApplyType" @change="selectTabs"
                          placeholder="请选择需要变更的类型">
                  <a-select-option value="1">基本信息变更</a-select-option>
                  <a-select-option value="2">结算信息变更</a-select-option>
                  <a-select-option value="6">结算类型变更</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
         </a-row>
    </a-form>
    <div class="div-type"></div>

    <div v-if="vdata.mch.modifyApplyType == 1" class="account-settings-info-view" >
      <a-form ref="stepForm1Ref"  layout="vertical"
              :rules="step1Rules" :model="vdata.mch">
        <a-row :gutter="8">
          <a-col :span="11">
            <a-form-item has-feedback label="商户简称" name="mchShortName">
              <a-input v-model:value="vdata.mch.mchShortName" placeholder="请输入商户简称"/>
            </a-form-item>
          </a-col>
          <!-- <a-col :span="11">
              <a-form-item has-feedback label="营业执照地址" name="address">
                <a-input v-model:value="vdata.mchInfo.address" disabled/>
              </a-form-item>
          </a-col>
          <a-col :span="11">
              <a-form-item has-feedback label="商户类别(MCC)" name="mcc">
                <a-input v-model:value="vdata.mchInfo.mcc" disabled />
              </a-form-item>
          </a-col>
          <a-col :span="11">
              <a-form-item has-feedback label="联系人姓名" name="contactsName">
                <a-input v-model:value="vdata.mchInfo.contactsName" disabled />
              </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="联系人电话" name="contactsPhone">
              <a-input v-model:value="vdata.mchInfo.contactsPhone" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="11">

          </a-col>
          <a-col :span="11">
              <a-form-item has-feedback label="营业执照" name="contactsPhone">
                <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment" />
              </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="门头照" name="contactsPhone">
              <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment"  />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="收银台照" name="contactsPhone">
              <JeepayUpload src="https://syb-open.oss-cn-hangzhou.aliyuncs.com/images/93238913-4639-4f8b-94e4-5840d58becb8.png" :imgSize="1" bizType="applyment"  />
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="内景照" name="contactsPhone">
              <JeepayUpload v-model:src="vdata.settlement.personal.set_phone" :imgSize="1" bizType="applyment"   />

            </a-form-item>
          </a-col>                             -->
        </a-row>

        <div style="margin-left: 20%; margin-top: 60px">
          <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(2,1)">
            <check-circle-outlined/>
            提交至三方支付修改
          </a-button>
          <a-button v-if="props.configMode == 'mgrApplyment'"   type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(1,1)">
            <check-circle-outlined/>
            保存信息（仅本地修改）
          </a-button>
        </div>

      </a-form>
    </div>

    <div v-if="vdata.mch.modifyApplyType == 2" class="account-settings-info-view" >
      <a-form  layout="vertical">
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item has-feedback label="结算账号类型" name="settAccountType"
                         :disabled="vdata.business.merchantType !== 3">
              <a-select ref="select" v-model:value="vdata.mch.settAccountType" @change="settAccountType"
                        placeholder="请选择需要变更的类型">
                <a-select-option value="C">对私</a-select-option>
                <a-select-option value="B">对公</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="11" v-if="vdata.mch.settAccountType === 'C'">
            <a-form-item has-feedback label="是否法人结算" name="illegal">
              <a-radio-group v-model:value="vdata.mch.illegal" @change="getIllegal"
                             :disabled="vdata.business.merchantType === 1">
                <a-radio value="N">法人</a-radio>
                <a-radio value="Y">非法人</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-form ref="stepForm2Ref" v-if="vdata.mch.settAccountType =='C'"  :model="vdata.mch"
               layout="vertical" :rules="step2Rules">

        <div v-if="vdata.mch.illegal === 'Y'">
          <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算人信息</a-divider>
          <a-row justify="space-between" type="flex">
            <a-col :span="11">
              <a-form-item label="结算人身份证人像面照片" name="settAccountIdcard1Img">
                <JeepayUpload v-model:src="vdata.mch.settAccountIdcard1Img" bizType="applyment" :imgSize="2"
                              ocrType="idCard" @ocrScan="ocrScanSettFunc"/>
                <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
              </a-form-item>
            </a-col>

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

            <a-col :span="11">
              <a-form-item has-feedback label="结算人名称" name="settAccountName">
                <a-input v-model:value="vdata.mch.settAccountName" placeholder="请输入结算人名称"/>
              </a-form-item>
            </a-col>

            <a-col :span="11">
              <a-form-item has-feedback label="结算卡身份证号" name="settAccountIdcardNo">
                <a-input v-model:value="vdata.mch.settAccountIdcardNo" placeholder="请输入结算卡身份证号"/>
              </a-form-item>
            </a-col>

            <a-col :span="11">
              <a-form-item has-feedback label="身份证有效期开始时间" name="settAccountIdcardEffectBegin">
                <a-input v-model:value="vdata.mch.settAccountIdcardEffectBegin" placeholder="示例：2023-10-10"/>
              </a-form-item>
            </a-col>

            <a-col :span="11">
              <a-form-item has-feedback label="身份证有效期截止时间" name="settAccountIdcardEffectEnd">
                <div>
                  <a-input v-model:value.trim="vdata.mch.settAccountIdcardEffectEnd"
                           :disabled="vdata.mch.settAccountIdcardEffectEnd == '长期'"
                           placeholder="示例：2023-10-10, 长期勾选长期"
                           style="width: 150px;margin-right: 10px;"/>
                  <a-checkbox :checked="vdata.mch.settAccountIdcardEffectEnd == '长期' "
                              @change="(e) => vdata.mch.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">
                    长期
                  </a-checkbox>
                </div>
              </a-form-item>
            </a-col>
          </a-row>
        </div>

        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算账户信息</a-divider>
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item has-feedback label="结算卡图片" name="settAccountLicenseImg">
              <JeepayUpload v-model:src="vdata.mch.settAccountLicenseImg" bizType="applyment" :imgSize="1"
                            ocrType="bankCard" @ocrScan="ocrScanFunc"/>
              <span class="jeepay-tip-text">(上传图片自动识别 银行卡号)</span>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item label="结算卡反面" name="settBankCardBackImg">
              <JeepayUpload v-model:src="vdata.mch.settBankCardBackImg" bizType="applyment"/>
            </a-form-item>
          </a-col>

          <a-col :span="11" v-if="vdata.mch.illegal === 'Y'">
            <a-form-item has-feedback label="非法人结算授权函"
                         name="nonLegSettleAuthPic">
              <JeepayUpload v-model:src="vdata.mch.nonLegSettleAuthPic" :imgSize="1" bizType="applyment"
                            crType="license2" @ocrScan="ocrScanFunc"/>

              <span><a
                  href="https://view.officeapps.live.com/op/view.aspx?src=https%3A%2F%2Fcloudpnrcdn.oss-cn-shanghai.aliyuncs.com%2Fopps%2Fapi%2Fprod%2Fdownload_file%2Fkyc%2F12%25E3%2580%2590%25E5%2595%2586%25E6%2588%25B7%25E3%2580%2591%25E6%258E%2588%25E6%259D%2583%25E7%25BB%2593%25E7%25AE%2597%25E5%25A7%2594%25E6%2589%2598%25E4%25B9%25A6%25EF%25BC%2588%25E5%25AF%25B9%25E7%25A7%2581%25E7%25BB%2593%25E7%25AE%2597%25EF%25BC%2589%25EF%25BC%2588%25E7%25BA%25B8%25E8%25B4%25A8%25E5%2590%2588%25E5%2590%258C%25E7%2589%2588%25EF%25BC%2589.docx&wdOrigin=BROWSELINK"
                  target="_blank">授权结算委托书模板</a> </span>

            </a-form-item>
          </a-col>

          <a-col :span="11" v-if="vdata.mch.illegal === 'N'">
            <a-form-item has-feedback label="结算账户名" name="settAccountName">
              <a-input v-model:value="vdata.mch.settAccountName" placeholder="银行号所属人姓名"/>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item has-feedback label="结算账号" name="settAccountNo">
              <a-input v-model:value="vdata.mch.settAccountNo" placeholder="请输入结算账号"/>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item label="银行卡开户地" name="settAccountBankBranchAreaCode">
              <JeepayAreaSelect v-model:value="vdata.mch.settAccountBankBranchAreaCode"/>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item has-feedback label="银行预留手机号" name="phone">
              <a-input v-model:value="vdata.mch.phone" placeholder="请输入银行预留手机号"/>
            </a-form-item>
          </a-col>
        </a-row>

        <div style="margin-left: 20%; margin-top: 60px">
          <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(2,2)">
            <check-circle-outlined/>
            提交至三方支付修改
          </a-button>
          <a-button v-if="props.configMode == 'mgrApplyment'"   type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(1,2)">
            <check-circle-outlined/>
            保存信息（仅本地修改）
          </a-button>
        </div>
      </a-form>

      <a-form ref="stepForm3Ref" v-if="vdata.mch.settAccountType =='B'"  :model="vdata.mch"
              layout="vertical" :rules="step3Rules">

        <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">结算账户信息</a-divider>
        <a-row justify="space-between" type="flex">
          <a-col :span="11">
            <a-form-item has-feedback label="开户许可证" name="settAccountLicenseImg">
              <JeepayUpload v-model:src="vdata.mch.settAccountLicenseImg" :imgSize="1" bizType="applyment"
                            crType="license" @ocrScan="ocrScanFunc"/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="结算账户名" name="settAccountName">
              <a-input v-model:value="vdata.mch.settAccountName" placeholder="请输入开户名"/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="结算账号" name="settAccountNo">
              <a-input v-model:value="vdata.mch.settAccountNo" placeholder="请输入结算账号"/>
            </a-form-item>
          </a-col>
          <a-col :span="11">
            <a-form-item has-feedback label="银行预留手机号" name="phone">
              <a-input v-model:value="vdata.mch.phone" placeholder="请输入银行预留手机号"/>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item label="银行编码" name="bankCode">
              <a-input v-model:value.trim="vdata.mch.bankCode"/>
              <span><a href="https://paas.huifu.com/partners/api/#/csfl/api_csfl_yhzhbm"
                       target="_blank">银行编码及支行行号名称查询</a></span>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item label="开户支行联行行号" name="bankSubCode">
              <a-input v-model:value.trim="vdata.mch.bankSubCode"/>
            </a-form-item>
          </a-col>

          <a-col :span="11">
            <a-form-item label="开户支行名称" name="settAccountBankBranchName">
              <a-input v-model:value.trim="vdata.mch.settAccountBankBranchName"/>
            </a-form-item>
          </a-col>
        </a-row>

        <div style="margin-left: 20%; margin-top: 60px">
          <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(2,3)">
            <check-circle-outlined/>
            提交至三方支付修改
          </a-button>
          <a-button v-if="props.configMode == 'mgrApplyment'"   type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(1,3)">
            <check-circle-outlined/>
            保存信息（仅本地修改）
          </a-button>
        </div>
      </a-form>
    </div>


    <div v-if="vdata.mch.modifyApplyType == 6" class="account-settings-info-view" >
      <a-form  ref="stepForm1Ref"   layout="vertical" :rules="step4Rules" :model="vdata.mch">
        <div style="margin: 10px 0">
          <span>当前结算类型：{{vdata.business.settlementType}}</span>
        </div>
        <a-form-item has-feedback label="结算变更类型" name="name">
          <!--          <a-select class="select_div"   ref="select"  v-model:value="vdata.mch.settlementType"  placeholder="请选择需要变更的类型" >-->
          <!--            <a-select-option value="T1" v-if="vdata.settlementMethod.indexOf('T1') !== -1" :disabled="vdata.business.settlementType=='T1'">T1-工作日次日到账</a-select-option>-->
          <!--            <a-select-option value="D1" v-if="vdata.settlementMethod.indexOf('D1') !== -1" :disabled="vdata.business.settlementType=='D1'">D1-次日到账</a-select-option>-->
          <!--            <a-select-option value="D0" v-if="vdata.settlementMethod.indexOf('D0') !== -1" :disabled="vdata.business.settlementType=='D0'">D0-实时到账</a-select-option>-->
          <!--          </a-select>-->
          <a-radio-group v-model:value="vdata.mch.settlementType" placeholder="请选择需要变更的类型" >
            <a-radio value="T1" v-if="vdata.settlementMethod.indexOf('T1') !== -1" :disabled="vdata.business.settlementType=='T1'">T1-工作日次日到账</a-radio>
            <a-radio value="D1" v-if="vdata.settlementMethod.indexOf('D1') !== -1" :disabled="vdata.business.settlementType=='D1'">D1-次日到账</a-radio>
            <a-radio value="D0" v-if="vdata.settlementMethod.indexOf('D0') !== -1" :disabled="vdata.business.settlementType=='D0'">D0-实时到账</a-radio>
            <span class="jeepay-tip-text" v-if="vdata.mch.settlementType == 'D1'">  (注意：D1次日到账会有额外的垫资手续费， 垫资手续费费率{{vdata.rateD1}}%  ,仅在节假日结算时收取) </span>
          </a-radio-group>

          <span class="jeepay-tip-text" v-if="vdata.mch.settlementType == 'D0'">  (注意：D0实时到账会有额外的秒到垫资手续费，垫资手续费费率{{vdata.rateD0}}%) </span>

        </a-form-item>

        <div style="margin-left: 20%; margin-top: 60px" >
          <a-button type="primary" :loading="vdata.btnLoading" style="margin-right:8px" @click="onSubmit(2,1)">
            <check-circle-outlined/>
            提交至三方支付修改
          </a-button>
        </div>

      </a-form>
    </div>
  </div>
  <!--  </a-drawer>-->
</template>
<script setup lang="ts">
import {SelectProps} from "ant-design-vue";

import {
  $bankBranchList,
  $getMerchantInformation,
  $getMchIncomingRefresh,
  $getSettType,
  $getRateConfigSavedMapData
} from '@/api/manage'
import {useRouter} from 'vue-router'
import {debounce} from "lodash-es";
import ruleGenerator from '@/utils/ruleGenerator'

import {ref, reactive, getCurrentInstance, inject, watch} from 'vue'

const router = useRouter() //这是全部路由
// 定义父组件的传值
const props = defineProps({
  configMode: {type: String, default: ''},
  value: {type: String, default: ''},
  customDateRangeType: {type: String, default: 'dateTime'}, // date 和 dateTime
  allTimeIsShow: {type: Boolean, default: true}, // 首页饼图，不显示全部时间
  // 首页交易统计折线图独有的时间选择项
  statisticalTimeIsShow: {type: Boolean, default: false}
})

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

const payTestBarCode = ref()
const cashOutFormModel = ref()
const vdata: any = reactive({
  uploadUrl: "https:/baidu.com",
  recordId: null, // 更新对象ID
  visible: true, // 是否显示弹层/抽屉
  btnLoading: false,
  groupKey: 'applymentConfig',
  agentApplyConfigData: [] as any, // 代理商进件配置保存对象
  applymentAuditMode: 'DEF', // DEF-平台全局默认配置 ,  CUSTOM-自定义
  agentApplymentPreAuditConfig: '0', // 当前代理商进件是否需要运营平台预审核 1-需要 0不需要
  agentApplyTimeLimit: '', // 代理商进件时间限制(回显)
  agentApplyTimeLimitSave: '', // 代理商进件时间限制（保存到后端）
  castOutFeeRule: {feeType: 'FIX', fixFee: 0, feeRate: 0, freeLimit: 0, applyLimit: 0},// 手续费配置信息
  saveObject: {}, // 数据对象
  mch: {
    operationType: 1,//1：本地变更；2：同步通道信息变更
    mchApplyId: "",//商户编号
    modifyApplyType: '1',//变更类型。1：基本信息变更（商户简称）；2：结算信息变更；
    mchShortName: "",//商户简称，变更类型为1时，必填
    settAccountType: 'B',//结算账号类型。B：对公；C：对私
    illegal: "Y",//非法人结算，Y：是；N：不是
    settAccountName: "",//结算账户名称。对私为个人姓名，对公为公司名称
    settAccountNo: "",//银行结算账户
    bankCode: "",//银行行号
    settAccountBankName: "",//银行名称
    settAccountLicenseImg: "",//对私结算为，银行卡图片；对公结算为，开户许可证
    settAccountBankBranchAreaCode: [],//支行所在区域省市编码
    settAccountBankBranchAreaName: [],//支行所在区域省市名称
    bankSubCode: "",//支行联行号
    phone: "",//结算账户银行预留手机号
    nonLegSettleAuthPic: "",//非法人结算授权函，非法人结算必填
    settAccountIdcardNo: "",//（结算到非法人时必填） 结算卡持卡人 身份证号
    settAccountIdcard1Img: "",//（结算到非法人时必填） 结算卡持卡人 身份证正面人像面 照片
    settAccountIdcard2Img: "",//（结算到非法人时必填） 结算卡持卡人 身份证国徽面 照片
    settAccountIdcardEffectBegin: "",//（结算到非法人时必填） 结算卡持卡人 身份证有效期开始时间。yyyy-MM-dd
    settAccountIdcardEffectEnd: "",//（结算到非法人时必填） 结算卡持卡人 身份证有效期截止时间。yyyy-MM-dd，长期填“长期”
    changeFormPic: '',//商户信息变更申请表
  },
  bankInfoList: [],
  filteredBankInfoList: [],
  standByBankInfoList: [],
  filteredStandByBankInfoList: [],
  business: [],
  settlementMethod:[] as any,
  rateD0:0,
  rateD1:0,
})

const step1Rules = {
  mchShortName: [{required: true, message: '商户简称', trigger: 'blur'}],
};
const step4Rules = {
  settlementType: [{required: true, message: '结算类型', trigger: 'blur'}],
};
const step2Rules = {
  mchShortName: [{required: true, message: '商户简称', trigger: 'blur'}],
  settAccountType: [{required: true, message: '结算账号类型', trigger: 'blur'}],
  settAccountName: [{required: true, message: '结算账户名称', trigger: 'blur'}],
  settAccountNo: [{required: true, message: '银行结算账户', trigger: 'blur'}],
  bankCode: [{required: true, message: '银行行号', trigger: 'blur'}],
  settAccountBankName: [{required: true, message: '银行名称', trigger: 'blur'}],
  bankSubCode: [{required: true, message: '请选择开户支行', trigger: 'blur'}],
  settAccountLicenseImg: [{required: true, message: '银行卡卡号面图片不能为空', trigger: 'blur'}],
  settBankCardBackImg: [{required: true, message: '银行卡反面图片不能为空', trigger: 'blur'}],
  settAccountBankBranchAreaCode: [{required: true, message: '支行所在区域省市名称', trigger: 'blur'}],
  settAccountBankBranchAreaName: [{required: true, message: '支行所在区域省市名称', trigger: 'blur'}],
  phone: [{required: true, message: '结算账户银行预留手机号', trigger: 'blur'}],
  nonLegSettleAuthPic: [{required: true, message: '非法人结算授权函，非法人结算必填', trigger: 'blur'}],
  settAccountIdcardNo: [{required: true, message: ' 结算卡持卡人 身份证号', trigger: 'blur'}],
  settAccountIdcard1Img: [{required: true, message: '结算卡持卡人 身份证正面人像面 照片', trigger: 'blur'}],
  settAccountIdcard2Img: [{required: true, message: '结算卡持卡人 身份证国徽面 照片', trigger: 'blur'}],
  settAccountIdcardEffectBegin: [ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date],
  settAccountIdcardEffectEnd: [ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever],
  changeFormPic: [{required: true, message: '商户信息变更申请表', trigger: 'blur'}],
};
const step3Rules = {
  settAccountName: [{required: true, message: '结算账户名称', trigger: 'blur'}],
  settAccountNo: [{required: true, message: '银行结算账户', trigger: 'blur'}],
  bankCode: [{required: true, message: '银行行号', trigger: 'blur'}],
  settAccountBankName: [{required: true, message: '银行名称', trigger: 'blur'}],
  bankSubCode: [{required: true, message: '开户支行', trigger: 'blur'}],
  settAccountLicenseImg: [{required: true, message: '银行卡图片', trigger: 'blur'}],
  settAccountBankBranchAreaCode: [{required: true, message: '支行所在区域省市名称', trigger: 'blur'}],
  settAccountBankBranchAreaName: [{required: true, message: '支行所在区域省市名称', trigger: 'blur'}],
  phone: [{required: true, message: '结算账户银行预留手机号', trigger: 'blur'}],
  nonLegSettleAuthPic: [{required: true, message: '非法人结算授权函，非法人结算必填', trigger: 'blur'}],
  settAccountIdcardNo: [{required: true, message: '结算卡持卡人 身份证号', trigger: 'blur'}],
  settAccountIdcard1Img: [{required: true, message: '结算卡持卡人 身份证正面人像面 照片', trigger: 'blur'}],
  settAccountIdcard2Img: [{required: true, message: '结算卡持卡人 身份证国徽面 照片', trigger: 'blur'}],
  settAccountIdcardEffectBegin: [{
    required: true,
    message: ' 结算卡持卡人 身份证有效期开始时间。yyyy-MM-dd',
    trigger: 'blur'
  }],
  settAccountIdcardEffectEnd: [{
    required: true,
    message: '结算卡持卡人 身份证有效期截止时间。yyyy-MM-dd，长期填“长期”',
    trigger: 'blur'
  }],
  changeFormPic: [{required: true, message: '商户信息变更申请表', trigger: 'blur'}],
};
const stepForm1Ref = ref()
const stepForm2Ref = ref()
const stepForm3Ref = ref()
const loading = ref<boolean>(false);

let mchApplymentDataRef: any = inject('mchApplymentData')
let mchApplymentData: any = mchApplymentDataRef.value

function selectTabs(key) {
  vdata.modifyApplyType = key
  vdata.mch.modifyApplyType = key

  $getMerchantInformation(vdata.mch.mchApplyId, vdata.mch.modifyApplyType).then((res) => {
    console.log(res, 'resres')
  })
}

function settAccountType(key) {
  vdata.mch.settAccountType = key
}

function getIllegal(radio) {
  console.log(radio.target.value, 'key')
  vdata.mch.illegal = radio.target.value
}

function handleChange() {

}

function getOperator() {
  router.push({
    path: '/applymentsOne'
  })
}


function pageRender(data) { // 弹层打开事件
  vdata.business = data
  vdata.mch.mchApplyId = data.applyId
  vdata.mch.mchShortName = data.mchShortName
  vdata.agentApplyTimeLimit = ''
  vdata.visible = true
  console.log("商户信息：", data)
  if (data.merchantType !== 3) {
    vdata.mch.settAccountType = 'C'
  }

  if (data.merchantType === 1) {
    vdata.mch.isUncrpSett = 'N'
  }

  $getMerchantInformation(vdata.mch.mchApplyId, vdata.mch.modifyApplyType).then((res) => {
    console.log(res, 'resres')
  })

  vdata.mch.openAccCity = vdata.mch?.settAccountBankBranchAreaCode?.[1];
  vdata.mch.standByOpenAccCity = vdata.mch?.standByAccountBankBranchAreaCode?.[1];
  getRateConfigSavedMapData()
  $getSettType( data.ifCode,data.isvNo).then((res) => {
    vdata.settlementMethod = res
  })

}


// 图片识别的回调函数
function ocrScanFunc(orcObject: any) {
  console.log(orcObject, 'orcObjectorcObjectorcObject')
  if (orcObject) {
    vdata.mch.settAccountBankName = orcObject.settAccountBankName
    vdata.mch.settAccountNo = orcObject.settAccountNo
    // applymentDetailInfo.settAccountBankName = orcObject.settAccountBankName
    // Object.assign(applymentDetailInfo, orcObject)
  }
}

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

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

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

function onSubmit(type, refNum) {
  vdata.btnLoading = true
  vdata.mch.operationType = type
  $getMchIncomingRefresh(vdata.mch).then((res) => {
    $infoBox.message.success('提交成功，等待审核')
    getOperator()
    vdata.btnLoading = false
  })
  if (refNum == 1) {
    stepForm1Ref.value.validate().then(() => {


    })
  } else if (refNum == 2) {
    stepForm2Ref.value.validate().then(() => {


    })
  } else if (refNum == 3) {
    stepForm3Ref.value.validate().then(() => {


    })
  }
}

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

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

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

      const param = {
        cityCode: vdata.mch.openAccCity,
        bankName: vdata.mch.settAccountBankName,
      };
      $bankBranchList(vdata.business.mchNo, vdata.business.ifCode, param,vdata.business.isvNo).then((res) => {
        if (res?.length) {
          res.forEach(element => {
            const item = {
              label: element.branchName,
              value: element.branchNo,
              bankType: element.bankType,
            };
            vdata.bankInfoList.push(item);
            vdata.filteredBankInfoList.push(item);
          })
        } else {
          $infoBox.message.error('该地区下未找到对应银行列表')
        }
      })
    } else {
      $infoBox.message.warn('请先选择地区')
    }
  }
}, 300)

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

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

//获取费率
function getRateConfigSavedMapData(){
  //查询当前已经配置的费率
  $getRateConfigSavedMapData((vdata.business.applyId || '') + '_' + vdata.business.mchNo, 'mchApplyment', vdata.business.ifCode,vdata.business.range,'',vdata.business.isvNo).then((savedMap) => {
    console.log(savedMap.MCHRATE,'resresres')
    if(savedMap.MCHRATE.D0){
      vdata.rateD0 = savedMap.MCHRATE.D0.feeRate*100
    }
    if(savedMap.MCHRATE.D1){
      vdata.rateD1 = savedMap.MCHRATE.D1.feeRate*100
    }

  })
}

defineExpose({
  pageRender
})
</script>
<style lang="less" scoped>
.bottom-btn {
  /deep/ div {
    display: flex;
    justify-content: center;
  }
}

.typePopover {
  position: absolute;
  top: -30px;
  left: 93px;
}

.image_box {
  width: 160px;
  height: 160px;
}

.img_div {
  display: flex;
}

.img_div .ant-form-item {
  display: block !important;
  margin: 20px;
}

.account-settings-info-view > .ant-form-item-label {
  overflow: inherit !important;
}

// .ant-form-item>.ant-form-item-label{
//   overflow: inherit !important;
// }
#form_item_name {
  // width: 800px;
  // width: 200%;
}

.ant-input-disabled {
  // width: 180%;
}

.ant-input-disabled {
  margin-left: 10px !important;
}

.select_div {
  width: 500px;
}

.ant-tabs-nav-wrap {
  display: none !important;
}

.ant-tabs-nav-list {
  display: none !important;
}

.ant-tabs > .ant-tabs-nav .ant-tabs-nav-wrap, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
  display: none !important;
}

.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;
}

.moban_box {
  color: #1965FF;
  margin: 10px 0;
}

.moban_box_span {
  padding: 5px 10px;
}

.div-type {
  border: 1px solid #ebeff2;
  margin-bottom: 33px;
}
</style>
<style lang="less" scoped>
.jeepay-tip-text::before{
  border: none !important;
}
</style>
