<!--
 * @Author: lily
 * @Date: 2022-11-17 14:36:06
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @Description: 新建分类
-->
<template>
  <h-form
    ref="formRef"
    :model="formData"
    name="basic"
    :layout="hFormGlobalConfig.layout"
    :labelCol="hFormGlobalConfig.labelCol"
    autocomplete="off"
  >
    <h-form-item
      name="name"
      :label="t('FormDesign.list.categoryName')"
      :rules="[
        {
          required: true,
          trigger: ['change', 'blur'],
          message: t('FormDesign.list.categoryNameTips'),
        },
      ]"
    >
      <h-input v-model:value="formData.name" :maxlength="20"></h-input>
    </h-form-item>
  </h-form>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { Form as HForm, FormItem as HFormItem, Input as HInput } from '@crami/ui';
import { useI18n } from '@crami/locale';
import { hFormGlobalConfig } from '@/settings/config';

export default defineComponent({
  name: 'AddNewCategory',
  components: { HForm, HFormItem, HInput },
  props: {
    componentProps: {
      type: Object,
    },
  },
  setup(prop) {
    const { t } = useI18n();

    const formData = reactive({
      // 分类名称
      categoryId: prop.componentProps?.categoryId,
      name: prop.componentProps?.name || '',
    });
    const formRef = ref();
    const validate = () => {
      // 表单验证
      return formRef.value.validate();
    };
    // 获取表单数据
    const getFormData = () => {
      return formData;
    };
    return { t, hFormGlobalConfig, formData, formRef, validate, getFormData };
  },
});
</script>
