<script setup lang="ts">
import { ref } from 'vue';
import { useNaiveForm } from '@/hooks/common/form';
import ImageUpload from '@/components/common/image-upload.vue';

defineOptions({
  name: 'DDEnvConfig'
});

interface ModelData {
  corpId: string; // 新增字段
  agentId: string; // 新增字段
  appSecret: string; // 新增字段
  appKeyOrCorpId: string; // 新增字段
  appKey: string; // 新增字段
  token: string; // 新增字段
  aesKey: string; // 新增字段
}

const model = ref<ModelData>({
  corpId: '', // 初始化新字段
  agentId: '', // 初始化新字段
  appSecret: '', // 初始化新字段
  appKeyOrCorpId: '', // 初始化新字段
  appKey: '', // 初始化新字段
  token: '', // 初始化新字段
  aesKey: '' // 初始化新字段
});

const { formRef, validate } = useNaiveForm();

const rules: Record<keyof ModelData, App.Global.FormRule> = {
  corpId: { required: true, message: '请输入钉钉的corpId', trigger: 'blur' }, // 新增验证规则
  agentId: { required: true, message: '请输入钉钉的agentId', trigger: 'blur' }, // 新增验证规则
  appSecret: { required: true, message: '请输入钉钉的appSecret', trigger: 'blur' }, // 新增验证规则
  appKeyOrCorpId: { required: false, message: '请输入钉钉的appKeyOrCorpId', trigger: 'blur' }, // 新增验证规则
  appKey: { required: true, message: '请输入钉钉的appKey', trigger: 'blur' }, // 新增验证规则
  token: { required: false, message: '请输入钉钉的token', trigger: 'blur' }, // 新增验证规则
  aesKey: { required: false, message: '请输入钉钉的aesKey', trigger: 'blur' } // 新增验证规则
};

function getData() {
  console.log('getData');
}

async function handleSubmit() {
  await validate();
  console.log('handleSubmit');
}
</script>

<template>
  <NScrollbar>
    <NForm
      ref="formRef"
      :model="model"
      :rules="rules"
      require-mark-placement="left"
      label-placement="left"
      label-width="130"
      class="my-10px"
    >
      <NFormItem label="企业ID" path="corpId">
        <NInput v-model:value="model.corpId" placeholder="请输入钉钉的corpId"></NInput>
      </NFormItem>
      <NFormItem label="应用ID" path="agentId">
        <NInput v-model:value="model.agentId" placeholder="请输入钉钉的agentId"></NInput>
      </NFormItem>
      <NFormItem label="应用密钥" path="appSecret">
        <NInput v-model:value="model.appSecret" placeholder="请输入钉钉的appSecret"></NInput>
      </NFormItem>
      <NFormItem label="appKey或CorpId" path="appKeyOrCorpId">
        <NInput v-model:value="model.appKeyOrCorpId" placeholder="请输入钉钉的appKeyOrCorpId"></NInput>
      </NFormItem>
      <NFormItem label="appKey" path="appKey">
        <NInput v-model:value="model.appKey" placeholder="请输入钉钉的appKey"></NInput>
      </NFormItem>
      <NFormItem label="Token" path="token">
        <NInput v-model:value="model.token" placeholder="请输入钉钉的token"></NInput>
      </NFormItem>
      <NFormItem label="AES Key" path="aesKey">
        <NInput v-model:value="model.aesKey" placeholder="请输入钉钉的aesKey"></NInput>
      </NFormItem>

      <NFormItem>
        <div class="ml-100px flex gap-x-20px">
          <NButton @click="getData">重置</NButton>
          <NButton type="primary" @click="handleSubmit">保存</NButton>
        </div>
      </NFormItem>
    </NForm>
  </NScrollbar>
</template>
