<template>
  <cacp-form-layout>
    <el-form
      ref="basicInfoFormRef"
      :model="state.formData"
      :rules="state.rules"
      label-width="150px"
      label-position="right"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="表名称" prop="tableName">
            <el-input
              v-model="state.formData.tableName"
              placeholder="请输入表名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表描述" prop="tableComment">
            <el-input
              v-model="state.formData.tableComment"
              placeholder="请输入表描述"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="实体类名称" prop="className">
            <el-input
              v-model="state.formData.className"
              placeholder="请输入实体类名称"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作者" prop="functionAuthor">
            <el-input
              v-model="state.formData.functionAuthor"
              placeholder="请输入作者"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="state.formData.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </cacp-form-layout>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

// 定义类型
interface TableInfo {
  tableName?: string
  tableComment?: string
  className?: string
  functionAuthor?: string
  remark?: string
}

// Props
interface Props {
  info: TableInfo
}

const props = defineProps<Props>()

// Refs
const basicInfoFormRef = ref<FormInstance>()

// 响应式状态
interface State {
  formData: TableInfo
  rules: FormRules
}

const state = reactive<State>({
  formData: {
    tableName: '',
    tableComment: '',
    className: '',
    functionAuthor: '',
    remark: ''
  },
  rules: {
    tableName: [
      { required: true, message: '请输入表名称', trigger: 'blur' }
    ],
    tableComment: [
      { required: true, message: '请输入表描述', trigger: 'blur' }
    ],
    className: [
      { required: true, message: '请输入实体类名称', trigger: 'blur' }
    ],
    functionAuthor: [
      { required: true, message: '请输入作者', trigger: 'blur' }
    ]
  }
})

// 监听 props 变化，更新表单数据
watch(
  () => props.info,
  (newInfo) => {
    if (newInfo) {
      state.formData = {
        tableName: newInfo.tableName || '',
        tableComment: newInfo.tableComment || '',
        className: newInfo.className || '',
        functionAuthor: newInfo.functionAuthor || '',
        remark: newInfo.remark || ''
      }
    }
  },
  { immediate: true, deep: true }
)

const validate = () => {
  return new Promise((resolve, reject) => {
    if (!basicInfoFormRef.value) {
      reject(new Error('表单未初始化'))
      return
    }

    basicInfoFormRef.value.validate((valid) => {
      if (valid) {
        resolve(state.formData)
      } else {
        reject(new Error('表单验证失败'))
      }
    })
  })
}

// 更新 expose
defineExpose({
  getFormRef: () => basicInfoFormRef.value,
  validate  // 暴露 validate 方法
})
</script>
