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

  @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" :orientationMargin="0">
        <span style="font-size: 16px;font-weight: 600;color: var(--ant-primary-color);">微信配置项</span>
      </a-divider>
          
      <a-col :span="isMobile ? 24 : 16">
        <a-form-item label="商户类型" name="mchType">
          <JeepayYsWxSelect v-model:value="vdata.mchType" />
        </a-form-item>
      </a-col>
      <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)"
          >
            <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)"
          >
            <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>
          <!-- <a-button style="margin-left: 20px;" type="primary" @click="queryFunc"><bars-outlined />参数查询</a-button> -->
        </div>
      </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

})

// 配置接口相关配置信息
function configInterfaceFunc(configType, configVal){

  vdata.detailData.storeSuccResParameter = JSON.stringify(vdata.tableData)

  vdata.configAppId = getSelectedConfigAppId()
  if(!vdata.mchType) {
    $infoBox.message.error('请选择商户类型')
    return Promise.reject()
  }

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

  if(!configVal){
    $infoBox.message.error('请填写对应参数值!')
    return Promise.reject()
  }

  let reqData = {
    mchType: vdata.mchType, // 商户类型
    configWxPayBaseUrl: vdata.configWxPayBaseUrl, // 微信支付目录
    configWxBindAppId: vdata.configWxBindAppId, // 关联公众号ID
    // configWxBindLiteAppId: vdata.configWxBindLiteAppId, // 关联小程序
    configWxSubscribeAppId: vdata.configWxSubscribeAppId, // 关注公众号ID
  }

  // return $configInterfaceConfig(vdata.recordId, vdata.configAppId, configType, configVal, null).then((res) => {
      
  //     if(res.channelState == 'CONFIRM_SUCCESS'){
  //       $infoBox.message.success('配置完成')
  //       return Promise.resolve()
  //     }

  //     $infoBox.modalError('接口配置失败：' + '[' + res.channelErrCode + ']' + res.channelErrMsg)
  //     return Promise.reject()
  // })

  return $yspayConfigInterfaceConfig(vdata.recordId, vdata.configAppId, configType, JSON.stringify(reqData)).then((res) => {
      
      if(res.channelState == 'CONFIRM_SUCCESS'){
         $infoBox.message.success('配置完成')
        return Promise.resolve()
      }

      $infoBox.modalError('接口配置失败：' + '[' + res.channelErrCode + ']' + res.channelErrMsg)
      return Promise.reject()
  })

}

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

if(!vdata.mchType) {
  $infoBox.message.error('请选择商户类型')
  return Promise.reject()
}

await configMchAppIdFunc()

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

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

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

if(vdata.configWxSubscribeAppId){
  await configInterfaceFunc('SUBSCRIBE_APP_ID', vdata.configWxSubscribeAppId)
}

}

// 配置本系统的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>