<template>
  <a-form v-if="vdata.currentConfig" ref="formRef" :model="vdata.currentConfig" layout="vertical" :rules="vdata.formRules">
    <a-divider orientation="left">
      <a-tag color="#FF4B33">易联云设备参数配置</a-tag>
    </a-divider>
    <a-row justify="space-between" type="flex">
      <a-col :span="11">
        <a-form-item label="clientId" name="clientId">
          <a-input v-model:value.trim="vdata.currentConfig.clientId" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item label="clientSecret" name="clientSecret">
          <a-input v-model:value.trim="vdata.currentConfig.clientSecret" :placeholder="vdata.configDataDesen.clientSecret || '请输入'" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item label="accessToken" name="accessToken">
          <a-input v-model:value.trim="vdata.currentConfig.accessToken" :placeholder="vdata.configDataDesen.accessToken || '请输入'" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item label="推送应用公钥" name="pushPublicKey">
          <a-input v-model:value.trim="vdata.currentConfig.pushPublicKey" :placeholder="vdata.configDataDesen.pushPublicKey || '请输入'" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item label="关键词" name="keywords">
          <a-input v-model:value.trim="vdata.currentConfig.keywords" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="11">
        <a-form-item label="打印logo图地址" name="printSetIcon">
          <a-input v-model:value.trim="vdata.currentConfig.printSetIcon" placeholder="请输入" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="易联云公钥" name="platPublicKey">
          <a-textarea v-model:value.trim="vdata.currentConfig.platPublicKey" :placeholder="vdata.configDataDesen.platPublicKey || '请输入'" />
        </a-form-item>
      </a-col>
      <a-alert message="易联云推送地址配置：支付域名+/api/yly/pay/+厂商配置ID（创建后列表参数）" type="warning" />
    </a-row>
  </a-form>
</template>

<script lang="ts" setup>
import {reactive, ref, defineExpose} from 'vue'
 
  // 当前的form
  const formRef = ref()

  const  vdata = reactive({
    // 配置对象
    currentConfig: {} as any,
    deviceType: null, // 设备类型： 1-云喇叭, 2-云打印
    isAdd: true, // 新增 or 修改页面标志
    customContentSuffix: '${amount}元', // 自定义语音播报内容后缀
    configDataDesen: {
      clientId: '',
      clientSecret: '',
      accessToken: '',
      keywords: '',
      printSetIcon: '',
      pushPublicKey: '',
      platPublicKey: ''
    },
    // 表单规则
    formRules: {
      clientId: [{ required: true, message: '请输入clientId', trigger: 'blur' }],
      clientSecret: [{ required: false, trigger: 'blur' }, {
        validator: (rule, value) => {
          if (!vdata.configDataDesen.clientSecret && !value) {
            return Promise.reject('请输入clientSecret')
          }
          return Promise.resolve()
        }
      }],
      accessToken: [{ required: false, trigger: 'blur' }, {
        validator: (rule, value) => {
          if (!vdata.configDataDesen.accessToken && !value) {
            return Promise.reject('请输入accessToken')
          }
          return Promise.resolve()
        }
      }],
    }
  })

// 对外提供的页面的渲染函数 （ currentConfig = 当前配置项 ）
function pageRender(currentConfig: any){
  // 赋值
  if (currentConfig) {
    vdata.currentConfig = currentConfig
  }

  vdata.configDataDesen.clientId = vdata.currentConfig.clientId

  vdata.configDataDesen.clientSecret = vdata.currentConfig.clientSecret
  vdata.currentConfig.clientSecret = ''

  vdata.configDataDesen.accessToken = vdata.currentConfig.accessToken
  vdata.currentConfig.accessToken = ''

  vdata.configDataDesen.pushPublicKey = vdata.currentConfig.pushPublicKey
  vdata.currentConfig.pushPublicKey = ''

  vdata.configDataDesen.platPublicKey = vdata.currentConfig.platPublicKey
  vdata.currentConfig.platPublicKey = ''

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

// 对外提供的获取配置参数函数 （返回JSON类型）
function getConfigParams(){
  return formRef.value.validate().then( () => {

    // 处理加密数据字段
    Object.keys(vdata.configDataDesen).forEach(key => {
      // 加密数据 && 空串
      if (!vdata.currentConfig[key]) {
        delete vdata.currentConfig[key]
      }
    })

    return vdata.currentConfig
  })
}
defineExpose({ getConfigParams, pageRender })

</script>
