<!--
  由于每个页面无法动态读取UIC组件， 需要将动态引入封装到组件中 
  商户 / 运营平台 引入
  @author terrfly
  @site https://www.jeequan.com
  @date 2022/05/12 10:59
-->

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

import Commons from './commons/Commons.vue'
import { reactive, ref, nextTick } from 'vue'
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'

const ifCodeComponentRef = ref()

const vdata : any = reactive({
    currentComponent: null
})


// 选择支付接口 切换事件
function ifCodeChangeFunc(selectIfCode){

  if(!selectIfCode){ //清空
    vdata.currentComponent = null
    return 
  }

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

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

    vdata.currentComponent = null
    nextTick(() => vdata.currentComponent = module.default)

  }).catch((e) => {

    vdata.currentComponent = null
    nextTick(() => vdata.currentComponent = Commons)
    
  })
}


function getReqDataList(){
    return ifCodeComponentRef.value.getReqDataList()
}

function changeState(index, state){
    return ifCodeComponentRef.value.changeState(index, state)
}

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