<template>
  <div>
    <AppConfigCommonPage ref="appConfigCommonPageRef">
      <template v-if="isShowWxConfigAndAdConfigPage()" #wxConfigPage>
        <a-form layout="vertical">
          <a-row>
            <a-divider class="jeepay-m-divider" orientation="left" :orientationMargin="0">
              <span style="font-size: 16px;font-weight: 600;color: var(--ant-primary-color);">微信配置项</span>
            </a-divider>
            <a-col :span="isMobile ? 24 : 12">
              <a-form-item label="微信JSAPI 支付授权目录">
                <a-input v-model:value.trim="vdata.configWxPayBaseUrl" class="form-item-content" />
              </a-form-item>
            </a-col>
            <a-col :span="isMobile ? 24 : 12">
              <a-form-item label="子商户 SubAPPID：">
                <a-input v-model:value.trim="vdata.configWxBindAppId" class="form-item-content" />
              </a-form-item>
            </a-col>
            <a-col :span="isMobile ? 24 : 12">
              <a-form-item label="关注appId：">
                <a-input v-model:value.trim="vdata.configWxSubscribeAppId" class="form-item-content" />
              </a-form-item>
            </a-col>
      
            <a-col :span="24">
              <a-button class="jeepay-m-btn" data-type="block" type="primary" @click="wxConfigFunc">配置微信参数</a-button>
            </a-col>
          </a-row>
        </a-form>
      </template>

      <template #advancedConfigPage><div /></template>
    </AppConfigCommonPage>
  </div>
</template>

<script lang="ts" setup>
import { $fuiouWxGet, $fuiouWxSet, $queryInterfaceConfig } from '@/api/manage'
import {reactive, ref, inject, getCurrentInstance} from 'vue'
import AppConfigCommonPage from '../../commons/AppConfigCommonPage.vue'
const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 接收父组件的参数注入： 配置方式 (判断是 运营平台  代理商 还是商户 )
let configMode : any = inject('configMode')

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

// 参数注入： 是否手机端 
let isMobile : any = inject('isMobile')

const appConfigCommonPageRef = ref()


const vdata : any = reactive({
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  tableData: [],
  
  configWxPayBaseUrl: '', // 微信支付目录
  configWxBindAppId: '', // 关联应用
  configWxBindLiteAppId: '', // 关联小程序
  configWxSubscribeAppId: '', // 关注公众号ID
})

function pageRender (recordId) { // 弹层打开事件

   //重置配置
  vdata.configWxPayBaseUrl = ''
  vdata.configWxBindAppId = ''
  vdata.configWxBindLiteAppId = ''
  vdata.configWxSubscribeAppId = ''

  if (recordId) {
 
    vdata.recordId = recordId

    $queryInterfaceConfig(vdata.recordId, null, null).then((res2) => {
        vdata.configWxPayBaseUrl = res2.paySiteUrl
        vdata.configWxBindAppId = res2.wxAppId
        vdata.configWxBindLiteAppId = res2.wxLiteAppId
        vdata.configWxSubscribeAppId = res2.wxAppId
      })

      /* $fuiouWxGet(recordId).then((res2) => {
        if (res2) {
          console.log(res2)
        }
      }) */

      vdata.visible = true
  }

  appConfigCommonPageRef.value.pageRender(recordId) // 直接调用通用组件
}

function wxConfigFunc(){

  $fuiouWxSet(vdata.recordId, { 'configWxPayBaseUrl': vdata.configWxPayBaseUrl, 'configWxBindAppId': vdata.configWxBindAppId, 'configWxSubscribeAppId': vdata.configWxSubscribeAppId }).then((res) => {
    $infoBox.message.success('配置成功 ')
  })

}

// 获取当前配置的APPID
function getSelectedConfigAppId(){
  return appConfigCommonPageRef.value.getSelectedConfigAppId()
}

// 是否显示 微信配置和 高级配置项目  ( 仅 运营平台显示 )
function isShowWxConfigAndAdConfigPage(){
  return (configMode == 'mgrApplyment' || configMode == 'mgrMch')
}

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

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

</style>