<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="编码" prop="code">
          <el-input
            v-model="newFormInline.code"
            placeholder="请输入编码~"
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="描述" prop="description">
          <el-input
            v-model="newFormInline.description"
            placeholder="请输入编码描述~"
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
const ruleFormRef = ref();
interface PropsInfo {
  code: string;
  description: string;
}

type ProsData = {
  formInline: PropsInfo;
};
/** 自定义表单规则校验 */
const formRules = reactive<FormRules>({
  code: [{ required: true, message: "编码为必填项", trigger: "blur" }],
  description: [
    { required: true, message: "编码描述为必填项", trigger: "blur" }
  ]
});
const props = withDefaults(defineProps<ProsData>(), {
  formInline: () => ({
    code: "",
    description: ""
  })
});
const newFormInline = ref<PropsInfo>(props.formInline);
defineExpose({ newFormInline });
</script>
