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

import { useVbenForm } from '#/adapter';
import { TenantApi } from '#/api';

const [Form, { validate, setValues, getValues }] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'code',
      label: '查询编号',
      rules: 'required',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'name',
      label: '查询名称',
      rules: 'required',
    },
    {
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请输入',
        api: {
          url: TenantApi.getOptions,
        },
        numberToString: true,
      },
      fieldName: 'configId',
      label: '数据库',
      rules: 'required',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'sort',
      label: '排序',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入',
      },
      fieldName: 'remark',
      label: '备注',
      formItemClass: 'col-span-2 items-baseline',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});

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>
  <Form />
</template>
