<template>
  <div class="step1-box">
    <div class="step1">
      <BasicForm @register="register" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { inject } from 'vue';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { debounce } from 'lodash-es';
  import { FormTemplateConfig } from '/@/model/generator/generatorConfig';
  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();

  const formSchema: FormSchema[] = [
    {
      field: 'name',
      label: t('模板名称'),
      required: true,
      component: 'Input',
      colProps: {
        span: 12,
      },
      componentProps: {
        placeholder: t('请输入模板名称'),
        onChange: debounce((val: ChangeEvent) => {
          formTemplateConfig!.name = val.target.value;
        }, 200),
      },
    },
    {
      field: 'code',
      label: t('模板编码'),
      required: true,
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: t('请输入模板编码'),
        onChange: debounce((val: ChangeEvent) => {
          formTemplateConfig!.code = val.target.value;
        }, 200),
      },
    },
    {
      field: 'sortCode',
      label: t('排序'),
      required: true,
      component: 'InputNumber',
      componentProps: {
        style: { width: '100%' },
        onChange: debounce((val: number) => {
          formTemplateConfig!.sortCode = val;
        }, 200),
      },
      colProps: { span: 24 },
    },
    {
      field: 'remark',
      label: t('表单备注'),
      component: 'InputTextArea',
      colProps: { span: 24 },
      componentProps: {
        style: { width: '100%' },
        onChange: debounce((val: ChangeEvent) => {
          formTemplateConfig!.remark = val.target.value;
        }, 200),
      },
    },
  ];

  let formTemplateConfig = inject<FormTemplateConfig>('formTemplateConfig');

  const [register, { validate, setFieldsValue }] = useForm({
    schemas: formSchema,
    showActionButtonGroup: false,
    layout: 'vertical',
    rowProps: { gutter: 32 },
  });

  //验证当前步骤的数据
  const validateStep = async (): Promise<boolean> => {
    try {
      await validate();
      return true;
    } catch (error) {
      return false;
    }
  };

  defineExpose({ validateStep, setFieldsValue });
</script>
