<!--
  通用 【签约开通】页面

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->

<template>
  <a-tabs v-model:activeKey="vdata.activeKey" @change="changeTabs">
    <a-tab-pane key="auth" tab="签约认证" forceRender>
      <NextBizsCommonPage ref="nextBizsCommonPage" />
    </a-tab-pane>

    <a-tab-pane key="division" tab="分账开通" forceRender>
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">商户分账申请</a-divider>
      <template v-if="vdata.divisionOpenResult && vdata.divisionOpenResult.id">
        <a-form>
          <a-row>
            <a-col :offset="1" :span="20">
              <a-form-item label="分账开通申请ID">
                {{ vdata.divisionOpenResult.id }}
              </a-form-item>
            </a-col>
            <a-col :offset="1" :span="20">
              <a-form-item label="分账开通状态">
                {{ vdata.divisionOpenResult.applyStatus=='00'?'审核中':vdata.divisionOpenResult.applyStatus=='01'?'已开通':vdata.divisionOpenResult.applyStatus=='02'?'审核失败':vdata.divisionOpenResult.applyStatus=='03'?'申请取消':'未知' }}
                <a-button
                  v-if="vdata.divisionOpenResult.applyStatus=='00'"
                  class="jeepay-m-btn"
                  data-type="text"
                  :loading="vdata.bizSignInfoBtnLoading"
                  size="small"
                  style="margin-left: 20px;"
                  type="primary"
                  @click="divisionOpenQueryFunc"
                >
                  <reload-outlined />分账开通结果查询
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </template>

      <a-form v-else ref="divisionOpenFormRef" :model="vdata.divisionOpenReqData" :rules="vdata.rules">
        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="商户最大分账比例 (1~100的整数)" name="accountRatio">
              <a-input-number v-model:value="vdata.divisionOpenReqData.accountRatio" :min="1" :max="100" addon-after="%" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账接收方商编" name="mno">
              <a-input v-model:value="vdata.divisionOpenReqData.mno" />
              <span class="jeepay-tip-text">如需填入更多分账接收方，请在分账功能开通后，前往 菜单【分账管理】【收款账号管理】添加</span>
            </a-form-item>
          </a-col>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账周期" name="splitCycle">
              <a-input-number v-model:value="vdata.divisionOpenReqData.splitCycle" :min="1" :max="30" addon-after="天" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账双方关系" name="relationShip">
              <a-input v-model:value="vdata.divisionOpenReqData.relationShip" />
            </a-form-item>
          </a-col>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账场景说明" name="scenes">
              <a-input v-model:value="vdata.divisionOpenReqData.scenes" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账情况说明函照片" name="agreementPicStr">
              <JeepayUpload v-model:src="vdata.divisionOpenReqData.agreementPicStr" bizType="applyment" :imgSize="2" />
            </a-form-item>
          </a-col>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账场景照片" name="scenesPicStr">
              <JeepayUpload v-model:src="vdata.divisionOpenReqData.scenesPicStr" bizType="applyment" :imgSize="2" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="其他附件" name="otherPicStr">
              <JeepayUpload v-model:src="vdata.divisionOpenReqData.otherPicStr" bizType="applyment" :imgSize="2" />
            </a-form-item>
          </a-col>
          <a-col :offset="1" :span="10">
            <a-form-item label="分账申请备注" name="remark">
              <a-input v-model:value.trim="vdata.divisionOpenReqData.remark" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row>
          <a-col :offset="1" :span="10">
            <a-button
              class="jeepay-m-btn"
              data-type="text"
              :loading="vdata.bizSignInfoBtnLoading"
              style="margin-left: 20px;"
              type="primary"
              size="small"
              @click="divisionOpenFunc"
            >
              <reload-outlined />发起分账开通申请
            </a-button>
          </a-col>
        </a-row>
      </a-form>
    </a-tab-pane>

    <a-tab-pane key="sign" tab="分账签约" forceRender>
      <a-divider class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">分账协议签署</a-divider>
      <a-form :model="vdata.divisionSignReqData">
        <a-row>
          <a-col :offset="1" :span="10">
            <a-form-item label="签约类型" name="signType">
              <a-radio-group v-model:value="vdata.divisionSignReqData.signType" style="padding-top: 5px !important">
                <a-radio value="00">接口签约</a-radio>
                <a-radio value="01">短信签约</a-radio>
              </a-radio-group>
              <span class="jeepay-tip-text">接口签约，调用成功后，返回签约地址，商户需访问该地址进行签约<br>短信签约，调用成功后，将签约地址通过短信发送给商户，商户在短信内点开链接完成签约</span>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-form v-if="vdata.divisionSignResult && (vdata.divisionSignResult.retUrl || vdata.divisionSignResult.signResult)">
        <a-row>
          <a-col :offset="1" :span="20">
            <a-form-item label="分账协议签署状态">
              <div style="display: block;padding-top: 5px;">{{ vdata.divisionSignResult.signResult=='00'?'已发送链接，未签约':vdata.divisionSignResult.signResult=='01'?'签约失败':vdata.divisionSignResult.signResult=='02'?'签约成功':vdata.divisionSignResult.signResult=='03'?'未签约':vdata.divisionSignResult.signResult=='04'?'审批中':'未发起' }}</div>
              <span class="jeepay-tip-text">
                收到接口返回协议签约连接后，需要确保点击"同意"完成签署（次日零点生效）<br>
                当签署过分账协议的个体户/企业类商户注册名称发生变更，或小微商户升级为普通商户时，需重新签署分账协议
              </span>
            </a-form-item>
          </a-col>
          <a-col v-if="vdata.divisionSignResult.retUrl" :offset="1" :span="20">
            <a-form-item label="分账签约链接">
              <a :href="vdata.divisionSignResult.retUrl" target="_blank">{{ vdata.divisionSignResult.retUrl }}</a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

      <a-row>
        <a-col :offset="1">
          <a-button
            class="jeepay-m-btn"
            data-type="text"
            :loading="vdata.divisionSignBtnLoading"
            style="margin-left: 20px;"
            type="primary"
            size="small"
            @click="divisionSignFunc"
          >
            <reload-outlined />发起分账签约
          </a-button>
        </a-col>
        <a-col>
          <a-button
            v-if="vdata.divisionSignResult.signResult=='00' || vdata.divisionSignResult.signResult=='03' || vdata.divisionSignResult.signResult=='04'"
            class="jeepay-m-btn"
            data-type="text"
            :loading="vdata.divisionSignQueryBtnLoading"
            size="small"
            style="margin-left: 20px;"
            type="primary"
            @click="divisionSignQueryFunc"
          >
            <reload-outlined />分账协议签署结果查询
          </a-button>
        </a-col>
      </a-row>
    </a-tab-pane>
  </a-tabs>
</template>

<script lang="ts" setup>
import { ref, reactive, inject } from 'vue'
import NextBizsCommonPage from '../../commons/NextBizsCommonPage.vue'
import { $applymentNextBiz } from '@/api/manage'
import ruleGenerator from '@/utils/ruleGenerator'

const nextBizsCommonPage = ref()
const divisionOpenFormRef = ref()

// 接收父组件的参数注入： 进件详细信息
let applyRecord : any = inject('applyRecord')

const vdata:any = reactive({
  recordId: null, // 更新对象ID
  activeKey: 'auth',
  detailData: {}, // 进件详情

  divisionOpenReqData: {}, // 分账开通申请请求数据
  divisionOpenResult: {}, // 分账申请结果

  divisionSignReqData: {}, // 分账协议签约请求数据
  divisionSignResult: {}, // 分账协议签署结果

  rules: {
    accountRatio: [ ruleGenerator.requiredInput('商户最大分账比例') ],
    mno: [ ruleGenerator.requiredInput('分账接收方商编') ],
    splitCycle: [ ruleGenerator.requiredInput('分账周期') ],
    relationShip: [ ruleGenerator.requiredInput('分账双方关系') ],
    scenes: [ ruleGenerator.requiredInput('分账场景说明') ],
    agreementPicStr: [ ruleGenerator.requiredUpload('分账情况说明函照片') ],
    scenesPicStr: [ ruleGenerator.requiredUpload('分账场景照片') ]
  },
})

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  vdata.recordId = applyId
  vdata.detailData = applyRecord || {}

  if (vdata.detailData.channelVar2) {
    vdata.divisionOpenReqData = JSON.parse(vdata.detailData.channelVar2)
  }

  nextBizsCommonPage.value.pageRender(applyId) // 直接调用通用组件
}

// tab切换
function changeTabs(e){
  if (e == 'auth') {
    nextBizsCommonPage.value.pageRender(vdata.recordId) // 签约认证
  } 
  else if (e == 'division') { // 开通分账
    vdata.divisionOpenResult = {}
    divisionOpenQueryFunc()
  }
  else if (e == 'sign') { // 分账签约
    vdata.divisionSignResult = {}
    divisionSignQueryFunc()
  }
}

// 分账开通申请
function divisionOpenFunc(){
  vdata.bizSignInfoBtnLoading = true

  divisionOpenFormRef.value.validate().then(() => {
  vdata.divisionOpenReqData.method = 'openDivision' // 分账申请标识

    $applymentNextBiz(vdata.recordId, vdata.divisionOpenReqData).then(res => {
      if (res && res.storeSuccResParameter) {
        vdata.divisionOpenResult = JSON.parse(res.storeSuccResParameter)
      }
    }).finally(() => {
      vdata.bizSignInfoBtnLoading = false
    })
  }).finally(() => {
    vdata.divisionSignBtnLoading = false
  })
}

// 分账开通结果查询
function divisionOpenQueryFunc(){
  if (vdata.detailData.storeSuccResParameter) {
    vdata.bizSignInfoBtnLoading = true
    $applymentNextBiz(vdata.recordId, { method: 'openDivisionQuery' }).then(res => {
      vdata.divisionOpenResult = JSON.parse(res.storeSuccResParameter)
    }).finally(() => {
      vdata.bizSignInfoBtnLoading = false
    })
  }
}

// 分账签约申请
function divisionSignFunc(){
  vdata.divisionSignBtnLoading = true

  vdata.divisionSignReqData.method = 'getSignUrl'

  $applymentNextBiz(vdata.recordId, vdata.divisionSignReqData).then(res => {
    if (res && res.channelVar1) {
      vdata.divisionSignResult = JSON.parse(res.channelVar1)
    }
  }).finally(() => {
    vdata.divisionSignBtnLoading = false
  })
}

// 分账签约结果查询
function divisionSignQueryFunc(){
  if (vdata.detailData.channelVar1) {
    vdata.divisionSignQueryBtnLoading = true
    $applymentNextBiz(vdata.recordId, { method: 'querySignContract' }).then(res => {
      vdata.divisionSignResult = JSON.parse(res.channelVar1)
    }).finally(() => {
      vdata.divisionSignQueryBtnLoading = false
    })
  }
}

defineExpose({ pageRender })
</script>
<style scoped>

.form-item-content{
  width: 70%
}

.ant-form-item-control-input-content {
  padding-top: 5px !important;
}

</style>
