<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="编码ID" prop="code_id">
          <el-input
            v-model="newFormInline.code_id"
            placeholder="请输入编码ID~"
            clearable
            disabled
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="当前编码" prop="code">
          <el-input
            v-model="newFormInline.code"
            placeholder="请输入当前编码~"
            clearable
            disabled
            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
            disabled
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="正确编码" prop="feedback_code">
          <el-input
            v-model="newFormInline.feedback_code"
            placeholder="请输入正确的编码描述~"
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xm="24" :sm="24">
        <el-form-item label="正确描述" prop="feedback_description">
          <el-input
            v-model="newFormInline.feedback_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 {
  /**编码ID */
  code_id: string;
  /**编码 */
  code: string;
  /**编码描述 */
  description: string;
  /**反馈编码 */
  feedback_code: string;
  /**反馈文本 */
  feedback_description: string;
}

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