<template>
  <div class="step1-box">
    <BasicForm @register="register" style="width: 70%" />
  </div>
</template>
<script lang="ts" setup>
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';

  import { inject, nextTick, onMounted, watch } from 'vue';

  import { useI18n } from '/@/hooks/web/useI18n';

  import { GeneratorConfig } from '/@/model/generator/generatorConfig';

  const { t } = useI18n();

  const formSchema: FormSchema[] = [
    {
      field: 'name',
      label: t('名称'),
      required: true,
      component: 'Input',
      colProps: { span: 12 },
      componentProps: {
        placeholder: t('请填写名称'),
      },
    },
    {
      field: 'code',
      label: t('编码'),
      required: true,
      component: 'Input',
      colProps: { span: 12 },
      rules: [
        {
          pattern: /^[a-zA-Z][a-zA-Z0-9]*$/,
          message: '编码只能是数字和字母组成，必须以英文字母开头',
        },
      ],
      componentProps: {
        placeholder: t('请填写编码'),
      },
    },
    {
      field: 'category',
      label: t('弹窗分类'),
      component: 'XjrSelect',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: t('请选择弹窗分类'),
        datasourceType: 'dic',
        params: { itemId: '1894672485234548738' },
        labelField: 'name',
        valueField: 'value',
      },
    },
    {
      field: 'state',
      label: t('弹窗状态'),
      component: 'XjrSelect',
      required: true,
      colProps: { span: 12 },
      componentProps: {
        placeholder: t('请选择弹窗分类'),
        staticOptions: [
          { key: 1, label: '正常', value: '1' },
          { key: 2, label: '停用', value: '0' },
        ],
        defaultSelect: '1',
        datasourceType: 'staticData',
        labelField: 'label',
        valueField: 'value',
      },
    },
    {
      field: 'remark',
      label: t('备注'),
      component: 'InputTextArea',
      required: false,
      colProps: { span: 24 },
      componentProps: {
        placeholder: t('请填写备注'),
        autoSize: { minRows: 4, maxRows: 15 },
      },
    },
  ];

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

  defineEmits(['register']);
  const generatorConfig = inject<GeneratorConfig>('generatorConfig');
  watch(
    () => generatorConfig!.name,
    () => {
      setFieldsValue({ ...generatorConfig });
    },
    {
      deep: true,
    },
  );
  onMounted(() => {
    setFieldsValue({ ...generatorConfig });

    nextTick(() => {
      clearValidate();
    });
  });

  //验证当前步骤的数据
  const validateStep = async (): Promise<boolean> => {
    try {
      let res = await validate();
      generatorConfig.code = res.code;
      generatorConfig.name = res.name;
      generatorConfig.remark = res.remark;
      generatorConfig.category = res.category;
      generatorConfig.state = res.state;

      return true;
    } catch (error) {
      return false;
    }
  };

  defineExpose({ validateStep, setFieldsValue });
</script>
<style lang="less" scoped>
  :deep(.ant-input-affix-wrapper) {
    height: auto;
  }
</style>
