<template>
  <a-form ref="formRef" :model="vdata.currentConfig" layout="vertical" :rules="vdata.formRules">
    <a-row :gutter="16">
      <a-col span="12">
        <a-form-item :label="getShowName() + '的公众号AppId'" name="appId">
          <a-input v-model:value="vdata.currentConfig['appId']" placeholder="请输入" @change="changeFun('appId')" />
        </a-form-item>
      </a-col>
      <a-col span="12">
        <a-form-item :label="getShowName() + '的公众号AppSecret'" name="appSecret">
          <a-input v-model:value="vdata.currentConfig.appSecret" :placeholder=" vdata.encryptionField.appSecret || '请输入应用AppSecret' " @change="changeFun('appSecret')" />
        </a-form-item>
      </a-col>
      <a-col span="24">
        <a-form-item label="oauth2地址（置空将使用官方）" name="oauth2Url">
          <a-input v-model:value="vdata.currentConfig['oauth2Url']" placeholder="请输入" @change="changeFun('oauth2Url')" />
        </a-form-item>
      </a-col>

      <a-divider dashed />

      <a-col span="12">
        <a-form-item :label="getShowName() + '的小程序AppID'" name="liteAppId">
          <a-input v-model:value="vdata.currentConfig['liteAppId']" placeholder="请输入" @change="changeFun('liteAppId')" />
          <p style="color: rebeccapurple">当使用小程序静态码时需配置该参数</p>
        </a-form-item>
      </a-col>
      <a-col span="12">
        <a-form-item :label="getShowName() + '的小程序appSecret'" name="liteAppSecret">
          <a-input v-model:value="vdata.currentConfig.liteAppSecret" :placeholder=" vdata.encryptionField.liteAppSecret || '请输入小程序appSecret' " @change="changeFun('liteAppSecret')" />
          <p style="color: rebeccapurple">当使用小程序静态码时需配置该参数</p>
        </a-form-item>
      </a-col>

      <a-divider dashed />

      <a-col span="12">
        <a-form-item :label="getShowName() + '的小程序原始ID'" name="liteGhid">
          <a-input v-model:value="vdata.currentConfig['liteGhid']" placeholder="请输入" @change="changeFun('liteGhid')" />
        </a-form-item>
      </a-col>
      <a-col span="12">
        <a-form-item :label="getShowName() + '的小程序版本'" name="liteEnv">
          <a-radio-group v-model:value="vdata.currentConfig.liteEnv">
            <a-radio value="release">正式</a-radio>
            <a-radio value="test">开发</a-radio>
            <a-radio value="preview">体验</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
      <a-col span="12">
        <a-form-item :label="getShowName() + '的小程序路径'" name="litePagePath">
          <a-input v-model:value="vdata.currentConfig.litePagePath" placeholder="请输入" @change="changeFun('litePagePath')" />
        </a-form-item>
      </a-col>
    </a-row>
  </a-form>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, defineExpose } from 'vue'

// 当前的form
const formRef = ref()

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

const vdata : any = reactive({

  // 定义加密的字段
  encryptionField : {
    appSecret: '',
    liteAppSecret: ''
  },

  currentConfig: {} as any, // 当前配置项

  //表单规则
  formRules: {
    appId: [{ required: true, message: '请输入应用AppID', trigger: 'blur' }],
    appSecret: [{required: true, trigger: 'blur',
      validator: (rule, value, callback) => {
        if (!vdata.encryptionField[rule.field] && !value) {
          return Promise.reject(new Error('请输入应用AppSecret'))
        }
        return Promise.resolve()
      } }],
  }
})


function getShowName(){
  if(props.configMode == 'mgrIsv'){
    return '服务商'
  }
  
  return '商户'
}


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

  // 赋值
  vdata.currentConfig = currentConfig

  // 处理加密数据字段
  Object.keys(vdata.encryptionField).forEach(key => {
    vdata.encryptionField[key] = vdata.currentConfig[key]
    delete vdata.currentConfig[key]
  })

  // 重置form验证
  if (formRef.value !== undefined && formRef.value !== null) {
    formRef.value.resetFields()
  }

}

// 对外提供的获取配置参数函数 （返回JSON类型）
function getConfigParams(){

  return formRef.value.validate().then( () => {
    return convertEncryData()
  })

}

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

  // 对象克隆
  let result = Object.assign({}, vdata.currentConfig)
  Object.keys(vdata.encryptionField).forEach(key => {
    // 加密数据 && 空串
    if (!result[key]) {
      delete result[key]
    }
  })
  return result
}

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

defineExpose({ getConfigParams, pageRender })

</script>
