<!--
  商户应用： 渠道配置页面选项  ( 商户应用（特约）-- 》 支付配置 中的 第三个选项卡页面 )

  @author terrfly
  @site https://www.jeequan.com
  @date 2023/03/16 14:14
-->

<template>
  <!-- 引入具体的接口组件  -->
  <component :is="vdata.currentComponent" ref="ifCodeAppConfigComponentRef" />
</template>

<script lang="ts" setup>
import {ref, reactive, getCurrentInstance, onMounted, nextTick, provide } from 'vue'
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const ifCodeAppConfigComponentRef = ref()


// 定义父组件的传值
const props: any = defineProps({
  infoId: { type: String, default: '' }, // appId
  ifCode: { type: String, default: '' }, // 选择的接口
  configMode: { type: String, default: '' }, // 配置模式 
})

// 向下组件注入配置模式。 
provide('configMode', props.configMode)

// 向下组件注入 ( 渠道配置的商户应用ID )
provide('appConfigModeByMchAppId', props.infoId)

// 向下组件注入 ( 渠道配置的 当前渠道 )
provide('appConfigModeBySelectedIfCode', props.ifCode)


const vdata : any = reactive({

  currentComponent: null,  // 动态组件
  
})

onMounted(() => {

  // props.ifCode格式： ifCode或ifCode_1等等
  // 保存数据使用传入的ifCode或ifCode_1，页面渲染使用ifCode(需截取ifCode_1)
  const ifCodeView = getOriginIfCode(props.ifCode) // 页面渲染使用

  // 根据支付接口名称  动态引入组件
   import(`../JeepayMchApplyment/diy/${ifCodeView}/AppConfig.vue`).then((module) => {
      vdata.currentComponent = module.default

      // 调用渠道自定义的 pageRender函数， 此时已经注入了全部进件详细信息。
      nextTick(() => {

        // 1. 页面渲染
        ifCodeAppConfigComponentRef.value.pageRender('')

        // 2. 若不支持 应用配置下的 渠道配置
        if(ifCodeAppConfigComponentRef.value.unsupportAppConfigMode && ifCodeAppConfigComponentRef.value.unsupportAppConfigMode()){
          $infoBox.message.error('当前渠道不支持参数配置！ ')
        }
      
      })
      
    }).catch(() => {
      $infoBox.message.error('当前渠道不支持参数配置！ ')
    })

})
</script>

