<template>
  <a-col span="24">
    <a-form-item :label="getShowName() + '小程序支付跳转的选择'" name="isUseSubmchAccount">
      <a-radio-group v-model:value="vdata.currentConfig.isUseSubmchAccount">
        <a-radio :value="0">服务商小程序</a-radio>
        <a-radio :value="1">特约商户自己的小程序</a-radio>
      </a-radio-group>
    </a-form-item>
  </a-col>


  <a-collapse v-if="vdata.currentConfig.isUseSubmchAccount == 1" v-model:activeKey="vdata.activeKey" ghost accordion default-active-key="1">
    <a-collapse-panel key="1">
      <template #header>小程序参数配置</template>
      <a-form ref="liteParams" :model="vdata.liteConfig" layout="vertical">
        <a-row :gutter="16">
          <a-col span="24">
            <a-form-item label="环境配置" name="sandbox">
              <a-radio-group v-model:value="vdata.liteConfig['sandbox']">
                <a-radio :value="1">沙箱环境</a-radio>
                <a-radio :value="0">生产环境</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="小程序页面路径">
              <a-input v-model:value="vdata.liteConfig['pagePath']" placeholder="请输入路径" @change="liteChangeFun('path')" />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="合作伙伴身份（PID）">
              <a-input v-model:value="vdata.liteConfig['pid']" placeholder="请输入合作伙伴身份PID" @change="liteChangeFun('pid')" />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="应用AppID">
              <a-input v-model:value="vdata.liteConfig['appId']" placeholder="请输入应用AppID" @change="liteChangeFun('appId')" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="应用私钥">
              <a-textarea v-model:value="vdata.liteConfig.privateKey" :placeholder="vdata.liteEncryptionField.privateKey || '请输入应用私钥'" type="textarea" @change="liteChangeFun('privateKey')" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="支付宝公钥">
              <a-textarea v-model:value="vdata.liteConfig.alipayPublicKey" :placeholder="vdata.liteEncryptionField.alipayPublicKey || '请输入支付宝公钥'" type="textarea" @change="liteChangeFun('alipayPublicKey')" />
            </a-form-item>
          </a-col>
          <a-col span="12">
            <a-form-item label="接口签名方式(推荐使用RSA2)">
              <a-radio-group v-model:value="vdata.liteConfig['signType']">
                <a-radio value="RSA">RSA</a-radio>
                <a-radio value="RSA2">RSA2</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="公钥证书">
              <a-radio-group v-model:value="vdata.liteConfig['useCert']">
                <a-radio :value="1">使用证书（请使用RSA2私钥）</a-radio>
                <a-radio :value="0">不使用证书</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="应用公钥证书（.crt格式）">
              <JeepayUpload v-model:src="vdata.liteConfig.appPublicCert" bizType="cert" accept=".crt" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="支付宝公钥证书（.crt格式）">
              <JeepayUpload v-model:src="vdata.liteConfig.alipayPublicCert" bizType="cert" fileType="file" accept=".crt" />
            </a-form-item>
          </a-col>
          <a-col span="24">
            <a-form-item label="支付宝根证书（.crt格式）">
              <JeepayUpload v-model:src="vdata.liteConfig.alipayRootCert" bizType="cert" fileType="file" accept=".crt" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-collapse-panel>
  </a-collapse>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineExpose } from 'vue'

// 定义父组件的传值
const props = defineProps({
  configMode: { type: String, default: '' }, // 支付接口
})

const vdata = reactive ({
  currentConfig: {} as any, // 当前配置项
  liteConfig: {} as any, // 小程序配置项
  activeKey: ['1'], // 折叠默认展开
  
  liteEncryptionField : { // 定义小程序参数  加密的字段
    privateKey: '',
    alipayPublicKey: ''
  },
  
})

function getConfigParams(){
  return Promise.resolve(convertEncryData())
}

// 转换加密数据
function convertEncryData(){

  // 对象克隆
  let result = Object.assign({}, vdata.currentConfig)

  // 转换小程序参数
  let liteConfig = Object.assign({}, vdata.liteConfig)
  Object.keys(vdata.liteEncryptionField).forEach(key => {
    // 加密数据 && 空串
    if (!liteConfig[key]) {
      delete liteConfig[key]
    }
  })
  result['liteParams'] = liteConfig

  return result
}

// 对外提供的页面的渲染函数 （ currentConfig = 当前配置项 ）
function pageRender(currentConfig){

  // 赋值
  vdata.currentConfig = currentConfig
  if(typeof vdata.currentConfig.isUseSubmchAccount == 'undefined'){ // 模式使用服务商
    vdata.currentConfig.isUseSubmchAccount = 0
  }

  // 处理小程序参数  加密数据字段
  if(currentConfig.liteParams) {
    vdata.liteConfig = currentConfig.liteParams
    Object.keys(vdata.liteEncryptionField).forEach(key => {
      vdata.liteEncryptionField[key] = vdata.liteConfig[key]
      delete vdata.liteConfig[key]
    })
  }

}

// 消除参数空格
function changeFun(value) {
  if(vdata.currentConfig[value]) {
    vdata.currentConfig[value] = vdata.currentConfig[value].trim()
  }
}

// 消除参数空格
function liteChangeFun(value) {
  if(vdata.liteConfig[value]) {
    vdata.liteConfig[value] = vdata.liteConfig[value].trim()
  }
}


function getShowName(){
  return '特约商户'
}

defineExpose({ getConfigParams, pageRender })

</script>
