<!--
  富友创建分账渠道账号
-->
<template>
  <div>
    <!-- 引入公共样式和数据表单 -->
    <DiyDivisionFormPage ref="diyDivisionFormPageRef" />

    <a-row>
      <a-col offset="2" span="10">
        <a-alert type="info">
          <template #message>
            <a-button v-if="vdata.showMode == 'applyInfo'" type="link" @click="vdata.showMode = 'accountInfo'">已有分账账户？ 切换到快速模式</a-button>
            <a-button v-else type="link" @click="vdata.showMode = 'applyInfo'">切换到详细信息模式</a-button>
          </template>
        </a-alert>
      </a-col>
    </a-row>

    <div v-if="vdata.showMode == 'accountInfo'">
      <a-divider orientation="left" style="color: #1A66FF;">富友分账账户信息</a-divider>
      <a-form
        ref="accountInfoRef"
        style="margin-top: 20px;"
        :model="vdata.currentReceiver"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="accountInfoRules"
      >
        <a-form-item label="持卡人姓名" name="accName">
          <a-input v-model:value.trim="vdata.currentReceiver.accName" />
        </a-form-item>

        <a-form-item label="账号类型" name="accType">
          <a-select v-model:value="vdata.currentReceiver.accType" style="width: 200px" placeholder="账号类型">
            <a-select-option :value="0">个人银行卡</a-select-option>
            <a-select-option :value="1">对公银行账户</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="入账方编号" name="accountIn">
          <a-input v-model:value.trim="vdata.currentReceiver.accountIn" />
        </a-form-item>
        <a-form-item label="合同编号" name="contractSsn">
          <a-input v-model:value.trim="vdata.currentReceiver.contractSsn" />
        </a-form-item>
        <a-form-item label="合同规则编号" name="ruleNo">
          <a-input v-model:value.trim="vdata.currentReceiver.ruleNo" />
        </a-form-item>
      </a-form>
    </div>    

    <div v-if="vdata.showMode == 'applyInfo'">
      <a-divider orientation="left" style="color: #1A66FF;">主体信息</a-divider>
        
      <a-form
        ref="divisionAccountFormRef1"
        style="margin-top: 20px;"
        :model="vdata.applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="rules1"
      >
        <a-form-item label="主体类型" name="isIndividualMchnt">
          <a-radio-group v-model:value="vdata.applymentDetailInfo.isIndividualMchnt">
            <a-radio value="8">个体</a-radio>
            <a-radio value="0">企业</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="主体名称" name="insNameCn">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.insNameCn" placeholder="请输入主体名称" />
        </a-form-item>
        <a-form-item label="账户类型" name="settleTp">
          <a-radio-group v-model:value="vdata.applymentDetailInfo.settleTp">
            <a-radio value="02">个人银行卡</a-radio>
            <a-radio v-if="vdata.applymentDetailInfo.isIndividualMchnt == '0'" value="01">对公银行账户</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="到账周期类型" name="revenueTp">
          <a-radio-group v-model:value="vdata.applymentDetailInfo.revenueTp">
            <a-radio value="01">T+1</a-radio>
            <!-- <a-radio value="02">D+1</a-radio>
            <a-radio value="03">留存虚拟户</a-radio> -->
          </a-radio-group>
        </a-form-item>
        <a-form-item label="开户行行号" name="interBankNo">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.interBankNo" placeholder="请输入开户行行号" />
          <span><a href="https://www.icvio.cn/" target="_blank">开户行行号查询</a></span>
        </a-form-item>
        <a-form-item label="开户名称" name="outAcntNm">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntNm" placeholder="请输入开户名称" />
        </a-form-item>
        <a-form-item v-if="vdata.applymentDetailInfo.settleTp == '02'" label="身份证号" name="outAcntIdNo">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntIdNo" placeholder="请输入身份证号" />
        </a-form-item>
        <a-form-item v-if="vdata.applymentDetailInfo.settleTp == '02'" label="银行卡正面照片" name="yhkzmPic">
          <JeepayUpload v-model:src="vdata.applymentDetailInfo.yhkzmPic" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
          <span class="jeepay-tip-text">(上传图片自动银行卡号)</span>
        </a-form-item>
        <a-form-item label="银行卡号" name="outAcntNo">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.outAcntNo" placeholder="请输入银行卡号" />
        </a-form-item>
        <a-form-item v-if="vdata.applymentDetailInfo.settleTp == '01'" label="开户许可证照片" name="khxkjPic">
          <JeepayUpload v-model:src="vdata.applymentDetailInfo.khxkjPic" bizType="applyment" />
        </a-form-item>
      </a-form>

      <a-divider v-if="vdata.applymentDetailInfo.isIndividualMchnt == '8' || vdata.applymentDetailInfo.isIndividualMchnt == '0'" orientation="left" style="color: #1A66FF;">其他信息</a-divider>
        
      <a-form
        ref="divisionAccountFormRef2"
        style="margin-top: 20px;"
        :model="vdata.applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="rules2"
      >
        <div v-if="vdata.applymentDetailInfo.isIndividualMchnt == '0'">
          <a-form-item label="证件类型" name="flagTp">
            <a-select v-model:value="vdata.applymentDetailInfo.flagTp" placeholder="请选择证件类型">
              <a-select-option value="0">营业执照</a-select-option>
              <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="9">其他</a-select-option>
            </a-select>
            <span class="jeepay-tip-text">执照编号非18位社会统一信用代码，请选择营业执照</span>
          </a-form-item>
          <a-form-item v-if="vdata.applymentDetailInfo.flagTp == '9'" label="证件名称" name="certifiNm">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.certifiNm" />
          </a-form-item>
          <a-form-item v-if="vdata.applymentDetailInfo.flagTp == '3'" label="开办资金" name="startUpCapital">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.startUpCapital" />
          </a-form-item>
          <a-form-item label="证件照片" name="licPic1">
            <JeepayUpload v-model:src="vdata.applymentDetailInfo.licPic1" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
            <span class="jeepay-tip-text">(上传营业执照 自动识别营业执照编号)</span>
          </a-form-item>
          <a-form-item label="证件代码" name="licNo">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.licNo" />
          </a-form-item>
          <a-form-item label="有效期" name="licTov">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.licTov" />
          </a-form-item>
          <a-form-item label="品牌名称" name="platNameCn">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.platNameCn" />
          </a-form-item>
          <a-form-item label="电子邮件" name="email">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.email" />
          </a-form-item>
          <a-form-item label="联系人" name="contactPerson">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.contactPerson" />
          </a-form-item>
          <a-form-item label="联系手机" name="contactMobile">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.contactMobile" />
          </a-form-item>
          <a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证编号" name="zzjgdmzNo">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.zzjgdmzNo" />
          </a-form-item>
          <a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证有效期" name="zzjgdmzExpireDt">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.zzjgdmzExpireDt" />
          </a-form-item>
          <a-form-item v-if="vdata.applymentDetailInfo.flagTp == '0'" label="组织机构代码证照片" name="zzjgdmzPic1">
            <JeepayUpload v-model:src="vdata.applymentDetailInfo.zzjgdmzPic1" bizType="applyment" />
          </a-form-item>
        </div>

        <div v-else-if="vdata.applymentDetailInfo.isIndividualMchnt == '8'">
          <a-form-item label="身份证人像面照片" name="certifIdPic1">
            <JeepayUpload v-model:src="vdata.applymentDetailInfo.certifIdPic1" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
          </a-form-item>
          <a-form-item label="身份证国徽面照片" name="certifIdPic2">
            <JeepayUpload v-model:src="vdata.applymentDetailInfo.certifIdPic2" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
          </a-form-item>
          <a-form-item label="法人姓名" name="artifNm">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.artifNm" />
          </a-form-item>
          <a-form-item label="身份证号" name="certifId">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.certifId" />
          </a-form-item>
          <a-form-item label="身份证有效期截止日期" name="validDt">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.validDt" />
          </a-form-item>
          <a-form-item label="联系手机" name="contactPhone">
            <a-input v-model:value.trim="vdata.applymentDetailInfo.contactPhone" />
          </a-form-item>
        </div>
      </a-form>

      <a-divider orientation="left" style="color: #1A66FF;">合同信息</a-divider>

      <a-form
        ref="divisionAccountFormRef3"
        style="margin-top: 20px;"
        :model="vdata.applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 8 }"
        :rules="rules3"
      >
        <a-form-item label="合同名称" name="contractName">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.contractName" placeholder="请输入合同名称" />
        </a-form-item>
        <a-form-item label="合同照片" name="contractUrl">
          <JeepayUpload v-model:src="vdata.applymentDetailInfo.contractUrl" bizType="applyment" />
        </a-form-item>
        <a-form-item label="合同开始日期" name="startDate">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.startDate" />
        </a-form-item>
        <a-form-item label="合同结束日期" name="endDate">
          <a-input v-model:value.trim="vdata.applymentDetailInfo.endDate" />
        </a-form-item>
      </a-form>
    </div>

    <br>
  </div>
</template>

<script lang="ts" setup>

import { reactive, ref, getCurrentInstance, provide, computed } from 'vue'
import DiyDivisionFormPage from '../../diyDivisionForm/DiyDivisionFormPage.vue'
import ruleGenerator from '@/utils/ruleGenerator'

const diyDivisionFormPageRef = ref()
const accountInfoRef = ref()
const divisionAccountFormRef1 = ref()
const divisionAccountFormRef2 = ref()
const divisionAccountFormRef3 = ref()

const accountInfoRules = {
   accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
   accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
   accountIn: [ ruleGenerator.requiredInput('入账方编号') ],
   contractSsn: [ ruleGenerator.requiredInput('合同编号') ],
   ruleNo: [ ruleGenerator.requiredInput('合同规则编号') ],
}

const rules1 = {
  isIndividualMchnt: [ ruleGenerator.requiredSelect('主体类型') ],
  insNameCn: [ ruleGenerator.requiredInput('主体名称') ],
  settleTp: [ ruleGenerator.requiredSelect('账户类型') ],
  revenueTp: [ ruleGenerator.requiredSelect('到账周期类型') ],
  interBankNo: [ ruleGenerator.requiredInput('开户行行号') ],
  outAcntNm: [ ruleGenerator.requiredInput('开户名称') ],
  outAcntIdNo: [ ruleGenerator.requiredInput('身份证号') ],
  outAcntNo: [ ruleGenerator.requiredInput('银行卡号') ],
  yhkzmPic: [ ruleGenerator.requiredUpload('银行卡正面照片') ],
  khxkjPic: [ ruleGenerator.requiredUpload('开户许可证照片') ],
}

const rules2 = {
  flagTp: [ ruleGenerator.requiredSelect('证件类型') ],
  certifiNm: [ ruleGenerator.requiredInput('证件名称') ],
  startUpCapital: [ ruleGenerator.requiredInput('开办资金') ],
  licNo: [ ruleGenerator.requiredInput('证件代码') ],
  licTov: [ ruleGenerator.requiredInput('有效期') ],
  licPic1: [ ruleGenerator.requiredUpload('证件照片') ],
  platNameCn: [ ruleGenerator.requiredInput('品牌名称') ],
  email: [ ruleGenerator.requiredInput('电子邮件') ],
  contactPerson: [ ruleGenerator.requiredInput('联系人') ],
  contactMobile: [ ruleGenerator.requiredInput('联系手机') ],
  zzjgdmzNo: [ ruleGenerator.requiredInput('组织机构代码证编号') ],
  zzjgdmzExpireDt: [ ruleGenerator.requiredInput('组织机构代码证有效期') ],
  zzjgdmzPic1: [ ruleGenerator.requiredUpload('组织机构代码证照片') ],

  artifNm: [ ruleGenerator.requiredInput('法人姓名') ],
  certifId: [ ruleGenerator.requiredInput('身份证号') ],
  validDt: [ ruleGenerator.requiredInput('身份证有效期截止日期') ],
  contactPhone: [ ruleGenerator.requiredInput('联系手机') ],
  certifIdPic1: [ ruleGenerator.requiredUpload('身份证人像面照片') ],
  certifIdPic2: [ ruleGenerator.requiredUpload('身份证国徽面照片') ],
}

const rules3 = {
  contractName: [ ruleGenerator.requiredInput('合同名称') ],
  contractUrl: [ ruleGenerator.requiredUpload('合同照片') ],
  startDate: [ ruleGenerator.requiredInput('合同开始日期') ],
  endDate: [ ruleGenerator.requiredInput('合同结束日期') ],
}


const vdata : any = reactive({
  applymentDetailInfo: { revenueTp: '01' }, //富友的资料对象 
  currentReceiver: {   // 当前分账用户信息
      reqBindState: 0, // 默认待绑定
      accType: 0,
      relationType: 'PARTNER', // 默认合作伙伴, 需要同时更改select的defaultValue
      relationTypeName: '合作伙伴',
   },
   showMode: 'applyInfo', //applyInfo: 详细信息，  accountInfo: 简介模式
})

// 获取请求列表（List格式）， 返回Promise对象，  值为数组类型
async function getReqDataList(){

  // 验证主表单 and 复制信息到主提交记录中
  await diyDivisionFormPageRef.value.validateAndGetData().then(formData => {
    Object.assign(vdata.currentReceiver, formData)
  })

    // 验证
  if(vdata.showMode == 'accountInfo'){
    await accountInfoRef.value.validate()

    vdata.currentReceiver.channelExtInfo = '{}' //空数据

    const { accountIn, contractSsn, ruleNo } = vdata.currentReceiver
    vdata.currentReceiver.accNo = JSON.stringify({ accountIn, contractSsn, ruleNo })
    
  }else{ // 验证 进件资料表单信息

    await divisionAccountFormRef1.value.validate()
    await divisionAccountFormRef2.value.validate()
    await divisionAccountFormRef3.value.validate()

    vdata.currentReceiver.accType = vdata.applymentDetailInfo.settleTp == '02' ? 0 : 1
    vdata.currentReceiver.accNo = vdata.applymentDetailInfo.outAcntNo
    vdata.currentReceiver.accName = vdata.applymentDetailInfo.outAcntNm
    vdata.currentReceiver.channelExtInfo = JSON.stringify(vdata.applymentDetailInfo)
  }

  return await new Promise((resolve, reject) => {
    resolve([vdata.currentReceiver])
  })
}

function changeState(index, state){
  diyDivisionFormPageRef.value.changeState(index, state)
}

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

// 图片识别的回调函数
function ocrScanBySettAccountFunc(orcObject){

  if(orcObject){
    if(orcObject.idcardName){
      vdata.applymentDetailInfo.artifNm = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      vdata.applymentDetailInfo.certifId = orcObject.idcardNo
    }

    if(orcObject.idcardEffectEnd){
      vdata.applymentDetailInfo.validDt = orcObject.idcardEffectEnd
    }
  }

}

// 图片识别的回调函数
function ocrScanFunc(orcObject){

  if(orcObject){
    if(orcObject.licenseNo){
      vdata.applymentDetailInfo.licNo = orcObject.licenseNo
    }
    if(orcObject.licenseEffectEnd){
      vdata.applymentDetailInfo.licTov = orcObject.licenseEffectEnd
    }
  }

}

defineExpose({getReqDataList, changeState})
</script>
