<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
            :disabled="newFormInline.way === '审核'"
            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
            :disabled="newFormInline.way === '审核'"
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="用户ID" prop="user_id">
          <el-input
            v-model="newFormInline.user_id"
            placeholder="请输入用户ID~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="用户账号" prop="username">
          <el-input
            v-model="newFormInline.username"
            placeholder="请输入用户账号~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="用户名称" prop="nickname">
          <el-input
            v-model="newFormInline.nickname"
            placeholder="请输入用户名称~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="所属部门" prop="department_name">
          <el-input
            v-model="newFormInline.department_name"
            placeholder="请输入所属部门~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="创建时间" prop="create_time">
          <el-input
            :value="
              dayjs(newFormInline.create_time).format('YYYY-MM-DD HH:mm:ss')
            "
            placeholder="请输入创建时间~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="修改时间" prop="update_time">
          <el-input
            :value="
              dayjs(newFormInline.update_time).format('YYYY-MM-DD HH:mm:ss')
            "
            placeholder="请输入修改时间~"
            disabled
            clearable
            class="w-full"
          />
        </el-form-item>
      </re-col>
      <re-col v-if="newFormInline.way !== '新增'" :value="24" :xm="24" :sm="24">
        <el-form-item label="审核状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态~"
            clearable
            disabled
            class="w-[full]"
          >
            <el-option label="审核通过" :value="1" />
            <el-option label="审核未通过" :value="2" />
            <el-option label="待审核" :value="3" />
          </el-select>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
const ruleFormRef = ref();
interface PropsInfo {
  /**方式 */
  way: string;
  /**反馈ID */
  id: string;
  /**编码ID */
  code_id: string;
  /**编码 */
  code: string;
  /**编码描述 */
  description: string;
  /**反馈编码 */
  feedback_code: string;
  /**反馈文本 */
  feedback_description: string;
  /** 创建时间 */
  create_time: string;
  /** 更新时间 */
  update_time: string;
  /**用户ID */
  user_id: string;
  /**用户昵称 */
  nickname: string;
  /**用户账号 */
  username: string;
  /**部门ID */
  department_id: string;
  /**部门名称 */
  department_name: string;
  /**审核状态 */
  status: number;
}

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: () => ({
    id: "",
    way: "新增",
    code_id: "",
    code: "",
    description: "",
    feedback_code: "",
    feedback_description: "",
    status: 0,
    create_time: "",
    update_time: "",
    user_id: "",
    nickname: "",
    username: "",
    department_id: "",
    department_name: ""
  })
});
const newFormInline = ref<PropsInfo>(props.formInline);
defineExpose({ newFormInline });
</script>
