<!--
  盛付通： 【参数配置】 页面内容

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <AppConfigCommonPage v-if="vdata.isShowAppConfig" ref="appConfigCommonPageRef">
    <template #wxConfigPage>
      <a-divider class="jeepay-m-divider" orientation="left">
        <a-tag color="green">微信配置项</a-tag>
      </a-divider>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="微信支付目录">
          <a-input v-model:value.trim="vdata.configWxPayBaseUrl" class="form-item-content" style="color: black" disabled/>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商公众号appId：">
          <a-input v-model:value.trim="vdata.configWxBindAppId" class="form-item-content" style="color: black" disabled/>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商小程序appId：">
          <a-input v-model:value.trim="vdata.configWxBindLiteAppId" class="form-item-content" style="color: black" disabled/>
        </a-form-item>
      </a-col>
    </template>
    <template #advancedConfigPage>
      <div/>
    </template>
  </appconfigcommonpage>
</template>

<script lang="ts" setup>

import {$yspayConfigInterfaceConfig, $queryInterfaceConfig, $applymentAppConfig} from '@/api/manage'
import {ref, reactive, inject, getCurrentInstance} from 'vue'
import AppConfigCommonPage from '../../commons/AppConfigCommonPage.vue'

const {$infoBox} = getCurrentInstance()!.appContext.config.globalProperties

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

const appConfigCommonPageRef = ref()

const vdata: any = reactive({
  detailData: {}, // 数据对象
  recordId: null, // 更新对象ID
  visible: false, // 是否显示弹层/抽屉
  mchAppList: [], // 商户app列表
  configAppId: '',
  isShowAppConfig: true,  // 默认显示应用配置

  partner: '', // 银联第三方交易识别码
  configWxPayBaseUrl: '', // 微信支付目录
  configWxBindAppId: '', // 关联应用
  // configWxBindLiteAppId: '', // 关联小程序
  configWxSubscribeAppId: '', // 关注公众号ID

})

// 一键配置 ( 顺序 --》 先配置本系统的商户应用参数信息 --》 接口侧的 支付目录  --》 appId --> 小程序appId  --> 关注公众号  )【若有报错则停止执行】
// async await  其实就是 Prosise的语法糖。 只有then才会进入下一个 await

// 配置本系统的app应用配置项
function configMchAppIdFunc() {

  vdata.configAppId = getSelectedConfigAppId()

  if (!vdata.configAppId) {
    $infoBox.message.error('请选择商户应用')
    return Promise.reject()
  }

  return $applymentAppConfig(vdata.recordId, vdata.configAppId).then((res) => {
    $infoBox.message.success('商户应用配置完成， 如商户支付方式未配置，请进行方式配置。 ')
    return Promise.resolve()
  })

}

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender(applyId) {

  if (applyId) {
    vdata.recordId = applyId
    // 显示默认
    $queryInterfaceConfig(applyId, null, null).then((res2) => {
      vdata.configWxPayBaseUrl = res2.paySiteUrl
      vdata.configWxBindAppId = res2.wxAppId
      vdata.configWxBindLiteAppId = res2.wxLiteAppId
      vdata.configWxSubscribeAppId = res2.wxAppId
    })

    appConfigCommonPageRef.value.pageRender(applyId) // 直接调用通用组件
  } else {
    vdata.isShowAppConfig = false
  }

}

function getSelectedConfigAppId() {
  return appConfigCommonPageRef.value.getSelectedConfigAppId()
}

// 不支持商户应用配置进入的配置（ 仅支持进件完成后的配置，如配置到应用 配置费率这些 ）
function unsupportAppConfigMode() {
  return true
}

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

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

</style>