<script lang="ts" setup>
import { onMounted } from 'vue';

import { Card } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';

const [Form, { validate, setValues, getValues }] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请输入页面类型',
        api: {
          type: 'dict',
          params: 'table_type',
        },
      },
      fieldName: 'tableType',
      label: '页面类型',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
      fieldName: 'name',
      label: '名称',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入编码',
      },
      fieldName: 'code',
      label: '编码',
      rules: 'required',
    },
    {
      component: 'ApiPopup',
      componentProps: {
        placeholder: '请选择接口',
        api: 'query-popup',
        fieldNames: { label: 'Name', value: 'Code' },
      },
      fieldName: 'databaseQueryCode',
      label: '接口',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-1',
});

const stepValidate = async () => {
  const { valid } = await validate();
  return valid;
};

const stepSetValues = async (data: Record<string, any>) => {
  await setValues(data);
};

const stepGetValues = async () => {
  return await getValues();
};

onMounted(async () => {});

defineExpose({ stepSetValues, stepValidate, stepGetValues });
</script>

<template>
  <Card class="h-full" title="基本参数配置">
    <Form />
  </Card>
</template>
