<template>
  <a-form 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="24">
        <a-form-item label="appId" name="appId">
          <a-input v-model:value.trim="vdata.currentConfig.appId" placeholder="请输入appId" />
        </a-form-item>
      </a-col> -->
      <a-col :span="24">
        <a-form-item label="默认商品标题 (用于收银插件端订单)" name="subject">
          <a-input v-model:value.trim="vdata.currentConfig.subject" placeholder="请输入默认商品标题" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="默认商品描述 (用于收银插件端订单)" name="body">
          <a-input v-model:value.trim="vdata.currentConfig.body" placeholder="请输入默认商品描述" />
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-form-item label="appSecret" name="appSecret">
          <a-textarea v-model:value="vdata.currentConfig.appSecret" :placeholder="vdata.encryptAppSecret ? vdata.encryptAppSecret : '请输入appSecret'" />
        </a-form-item>
        <a-button type="primary" ghost @click="randomKey(false, 32, 0)"><file-sync-outlined />随机生成密钥</a-button>
      </a-col>
    </a-row>
  </a-form>
</template>

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

  const  vdata = reactive({
    isAdd: true, // 新增or修改标识
    // 配置对象
    currentConfig: {} as any,
    encryptAppSecret: '',
    // 表单规则
    formRules: {
      subject: [{required: true, message: '请输入默认商品标题', trigger: 'blur'}],
      body: [{required: true, message: '请输入默认商品描述', trigger: 'blur'}],
      appSecret: [{ required: false, trigger: 'blur' }, {
        validator: (rule, value) => {
          if (vdata.isAdd && !value) {
            return Promise.reject('请输入appSecret')
          } else {
            return Promise.resolve()
          }
        }
      }]
    }
  })

  // 对外提供的页面的渲染函数 （ ifDefineArray = 接口的配置定义项数组，  currentConfig = 当前配置项 ）
function pageRender(currentConfig: any, isAdd: boolean){
  // 赋值
  vdata.currentConfig = currentConfig
  vdata.encryptAppSecret = currentConfig.appSecret
  vdata.currentConfig.appSecret = ''
  vdata.isAdd = isAdd

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

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

   // 重置form验证
  if (formRef.value !== undefined && formRef.value !== null) {
    return formRef.value.validate().then( () => {
      return vdata.currentConfig
    })
  }else{
    return Promise.resolve()
  }
}

function randomKey(randomFlag, min, max) { // 生成随机私钥
  let str = ''
  let range = min
  const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  // 随机产生
  if (randomFlag) {
    range = Math.round(Math.random() * (max - min)) + min
  }
  for (var i = 0; i < range; i++) {
    var pos = Math.round(Math.random() * (arr.length - 1))
    str += arr[ pos ]
  }
  vdata.currentConfig.appSecret = str
}

defineExpose({ getConfigParams, pageRender })

</script>
