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

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/11/03 08:35
-->
<template>
  <AppConfigCommonPage ref="appConfigCommonPageRef">
    <template #wxConfigPage>
      <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 class="jeepay-valid" label="微信支付目录" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxPayBaseUrl" class="form-item-content" />
          <a-button
            class="jeepay-m-btn"
            data-type="text"
            size="small"
            style="margin-left: 20px !important;"
            type="primary"
            @click="configInterfaceFunc('PAY_BASE_URL', vdata.configWxPayBaseUrl, '')"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商公众号appId" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxBindAppId" class="form-item-content" />
          <a-button
            class="jeepay-m-btn"
            data-type="text"
            size="small"
            style="margin-left: 20px !important;"
            type="primary"
            @click="configInterfaceFunc('BIND_APP_ID', vdata.configWxBindAppId, '_01')"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>
      <a-col :span="isMobile ? 24 : 12">
        <a-form-item class="jeepay-valid" label="关联服务商小程序appId" style="margin: 0;">
          <a-input v-model:value.trim="vdata.configWxBindLiteAppId" class="form-item-content" />
          <a-button
            class="jeepay-m-btn"
            data-type="text"
            size="small"
            style="margin-left: 20px !important;"
            type="primary"
            @click="configInterfaceFunc('BIND_APP_ID', vdata.configWxBindLiteAppId, '_02')"
          >
            <save-outlined />配置
          </a-button>
        </a-form-item>
      </a-col>
      
      <a-col :span="24">
        <div class="jeepay-m-pz">
          <a-popover placement="top">
            <template #title><span>一键配置微信配置项</span></template>
            <template #content>
              <p>顺序：微信支付目录 --> 公众号AppId --> 小程序AppId </p>
              <p>提示： 若有异常则结束配置</p>
            </template>
            <a-button class="jeepay-m-btn" data-type="text" type="primary" @click="autoConfigFunc"><alert-outlined />一键配置微信配置项</a-button>
          </a-popover>
        </div>
      </a-col>
    </template>
    <template #advancedConfigPage><div /></template>
  </AppConfigCommonPage>
</template>

<script lang="ts" setup>
import { $queryInterfaceConfig } 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')
// 接收父组件的参数注入： 选择的商户应用
let appConfigModeByMchAppId : any = inject('appConfigModeByMchAppId')
const appConfigCommonPageRef = ref()

const vdata : any = reactive({
  visible: false, // 是否显示弹层/抽屉
  configWxPayBaseUrl: '', // 微信支付目录
  configWxBindAppId: '', // 关联应用
  // configWxSubscribeAppId: '' // 关注公众号ID
})

// 对外暴露的 页面渲染函数  也用作初始化
function pageRender (applyId){
  appConfigCommonPageRef.value.pageRender(applyId)
  // // 原逻辑的复用 
  vdata.recordId = applyId
  // 查询配置信息 
  commonQueryInterfaceConfigFunc().then((res) => {
    vdata.configWxPayBaseUrl = res.paySiteUrl
    vdata.configWxBindAppId = res.wxAppId
    vdata.configWxBindLiteAppId = res.wxLiteAppId
    vdata.configWxSubscribeAppId = res.wxAppId
  })

}

// 给diy页面的全局公用函数 （ 请求在一个地方处理 ）
function commonQueryInterfaceConfigFunc(){
  // 查询配置信息参数。 
  let reqApplyId = vdata.recordId
  let applyIdConvertMchAppId = 0
  let convertMchAppIfCode :any = null
  if (!reqApplyId) {
    reqApplyId = appConfigModeByMchAppId
    applyIdConvertMchAppId = 1
    convertMchAppIfCode = 'terpay'
  }
  // 查询配置信息 
  return $queryInterfaceConfig(reqApplyId, applyIdConvertMchAppId, convertMchAppIfCode)

}


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

// 参数配置公共组件【高级设置】插槽方法覆写  payType 支付配置类型  01公众号、02 小程序
function configInterfaceFunc(configType, configVal, payType) {
  if(!configVal){
    if (payType == '') {
      $infoBox.message.error('请填写微信支付目录!')
      return Promise.reject()
    }
    if (payType == '_01') {
      $infoBox.message.error('请填写公众号appId!')
      return Promise.reject()
    } 
    if (payType == '_02') {
      $infoBox.message.error('请填写小程序appId!')
      return Promise.reject()
    }
  }
  appConfigCommonPageRef.value.configInterfaceFunc(configType, configVal + payType)
}

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

await appConfigCommonPageRef.value.configMchAppIdFunc()

if(vdata.configWxPayBaseUrl){
  await configInterfaceFunc('PAY_BASE_URL', vdata.configWxPayBaseUrl, '')
}

if(vdata.configWxBindAppId){
  await configInterfaceFunc('BIND_APP_ID', vdata.configWxBindAppId, '_01' )
}

if(vdata.configWxBindLiteAppId){
  await configInterfaceFunc('BIND_APP_ID', vdata.configWxBindLiteAppId, '_02')
}

// 渠道侧不支持关注appId的配置
// if(vdata.configWxSubscribeAppId){
//   await configInterfaceFunc('SUBSCRIBE_APP_ID', vdata.configWxSubscribeAppId)
// }

}

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

<style scoped>

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

</style>