<!--
  联动惠商的分账渠道账号
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/12 10:59
-->
<template>
  <div>
    <!-- 引入公共样式和数据表单 -->
    <DiyDivisionFormPage ref="diyDivisionFormPageRef" />

    <!-- 合同信息 -->
    <a-divider orientation="left" style="color: #1A66FF;">合同信息</a-divider>
    <a-form
      ref="divisionApplyFormRef"
      style="margin-top: 20px;"
      :model="vdata.applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="subMchRules"
    >
      <a-form-item label="三方协议形式" name="contractType">
        <a-radio-group v-model:value="vdata.applymentDetailInfo.contractType">
          <a-radio :value="1">纸质协议</a-radio>
          <a-radio :value="2">电子协议</a-radio>
        </a-radio-group>
        <br><span class="jeepay-tip-text">
          注意事项：
          <br>● 纸质协议：纸质协议需要盖章邮寄，相关流程请咨询联动平台；
          <br>● 电子协议：需要分账方先申请电子签约：在对应的进件条目中的【签约开通】中--》分账电签（发起申请）
        </span>
      </a-form-item>

      <div v-if="vdata.applymentDetailInfo.contractType == 1">
        <a-form-item label="商户收单主协议" name="agrmPic">
          <JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.agrmPic" bizType="applyment" listType="picture-card" />
          <span class="jeepay-tip-text">(若该主商户历史有过成功的绑定记录，可以不传)</span>
        </a-form-item>

        <a-form-item label="三方分账授权协议" name="shareAgrmPic">
          <JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.shareAgrmPic" bizType="applyment" listType="picture-card" />
        </a-form-item>
      </div>

      <a-form-item label="分账开通登记表" name="supmtAgrmPic">
        <JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.supmtAgrmPic" bizType="applyment" listType="picture-card" />
      </a-form-item>

      <a-form-item label="合作协议" name="copAgrmPic">
        <JeepayUploadBatch v-model:fileList="vdata.applymentDetailInfo.copAgrmPic" bizType="applyment" listType="picture-card" />
        <span class="jeepay-tip-text">(分账方和分账接收方之间的业务合作协议)</span>
      </a-form-item>
    </a-form>
    
    <a-divider orientation="left" style="color: #1A66FF;">账户信息</a-divider>
    <a-form
      ref="divisionAccountFormRef"
      style="margin-top: 20px;"
      :model="vdata.currentReceiver"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="subMchRules"
    >
      <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: 110px" 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="子商户号（subMchId）" name="accNo">
        <a-input v-model:value.trim="vdata.currentReceiver.accNo" />
        <span class="jeepay-tip-text">请使用进件成功并开通D0提现权限的子商户号
          <br>注意事项：
          <br>● 分账接收方不支持非法人结算；
          <br>● 分账接收方若为企业只支持对公结算；
          <br>● 分账方也可做为另一个分账方商户的分账接收方（无需重新进件一个分账接收方商户），即两个正常商户（有交易权限）也可建立分账关系；
          <br>● 店铺类型为“合并结算分店”的商户不可成为分账方，也不可成为分账接收方；
        </span>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts" setup>

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

const diyDivisionFormPageRef = ref()
const divisionAccountFormRef = ref()
const divisionApplyFormRef = ref()

let emptyObject = {}

const subMchRules = {
   accNo: [ ruleGenerator.requiredInput('子商户号') ],
   accName: [ ruleGenerator.requiredInput('持卡人姓名') ],
   accType: [ ruleGenerator.requiredSelect('账号类型', 'number') ],
   contractType: [ ruleGenerator.requiredSelect('三方协议形式', 'number') ],
   shareAgrmPic: [ ruleGenerator.requiredUpload('三方分账授权协议') ],
   supmtAgrmPic: [ ruleGenerator.requiredUpload('分账开通登记表') ],
   copAgrmPic: [ ruleGenerator.requiredUpload('合作协议') ]
}

const vdata : any = reactive({
  applymentDetailInfo: {}, //盛付通的进件资料对象 
  currentReceiver: {   // 当前分账用户信息
      accType: 0,
   }
})

// 向子组件注入： 兼容数据
provide('mchApplymentData', computed( ()=> emptyObject) )

// 向子组件注入： 进件参数具体数据
provide('applymentDetailInfo', computed( ()=> vdata.applymentDetailInfo) )

provide('isView', false)
provide('configMode', 'divsionMode')


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

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

  // 验证
  await divisionApplyFormRef.value.validate()
  await divisionAccountFormRef.value.validate()
  
  // 组装数据
  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)
}


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