<script setup lang="ts">
import { ref } from 'vue';
import { useNaiveForm } from '@/hooks/common/form';

defineOptions({
  name: 'QYWXEnvConfig'
});

interface ModelData {
  corpId: string;
  agentId: string;
  secret: string;
  token: string;
  EncodingAESKey: string;
}

const model = ref<ModelData>({
  corpId: '',
  agentId: '',
  secret: '',
  token: '',
  EncodingAESKey: ''
});

const { formRef, validate } = useNaiveForm();

const rules: Record<keyof ModelData, App.Global.FormRule> = {
  corpId: { required: true, message: '请输入企业ID', trigger: 'blur' },
  agentId: { required: true, message: '请输入应用ID', trigger: 'blur' },
  secret: { required: true, message: '请输入应用密钥', trigger: 'blur' },
  token: { required: true, message: '请输入Token', trigger: 'blur' },
  EncodingAESKey: { required: true, message: '请输入EncodingAESKey', 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="请输入企业ID"></NInput>
      </NFormItem>
      <NFormItem label="应用ID" path="agentId">
        <NInput v-model:value="model.agentId" placeholder="请输入应用ID"></NInput>
      </NFormItem>
      <NFormItem label="应用密钥" path="secret">
        <NInput v-model:value="model.secret" placeholder="请输入应用密钥"></NInput>
      </NFormItem>
      <NFormItem label="Token" path="token">
        <NInput v-model:value="model.token" placeholder="请输入Token"></NInput>
      </NFormItem>
      <NFormItem label="EncodingAESKey" path="EncodingAESKey">
        <NInput v-model:value="model.EncodingAESKey" placeholder="请输入EncodingAESKey"></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>

<style scoped>
:deep(.n-upload-file--image-card-type) {
  width: 140px !important;
  height: 140px !important;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card) {
  width: 140px !important;
  height: 140px !important;
}
</style>
