<template>
  <a-modal @ok="handleOk">
    <a-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item label="字段标题" name="field_title">
        <a-input
          placeholder="请输入字段标题"
          v-model:value="formData.field_title"
        />
      </a-form-item>
      <a-form-item label="字段名称" name="field_name">
        <a-input placeholder="请输入字段名称" v-model="formData.field_name" />
      </a-form-item>
      <a-form-item label="搜索状态" name="is_search">
        <a-switch
          v-model:checked="formData.is_search"
          :checkedValue="1"
          :unCheckedValue="0"
        />
      </a-form-item>
      <a-form-item label="字段类型" name="field_type_id">
        <a-select
          placeholder="请选择字段类型"
          v-model:value="formData.field_type_id"
        />
      </a-form-item>
      <a-form-item label="所属表名称" name="belong_to_table">
        <a-input
          placeholder="请输入所属表名称"
          v-model="formData.belong_to_table"
        />
      </a-form-item>
      <a-form-item label="sql数据源" name="original_sql">
        <a-input
          placeholder="请输入sql数据源"
          v-model="formData.original_sql"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, watch } from "vue";

const props = defineProps({
  type: {
    type: String,
    default: "add",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["ok"]);
const formRules = {
  field_title: [
    { required: true, message: "请输入字段标题", trigger: "submit" },
  ],
  field_name: [
    { required: true, message: "请输入字段名称", trigger: "submit" },
  ],
  field_type_id: [
    { required: true, message: "请选择字段类型", trigger: "submit" },
  ],
  belong_to_table: [
    { required: true, message: "请输入所属表", trigger: "submit" },
  ],
  original_sql: [
    { required: true, message: "请输入sql数据源", trigger: "submit" },
  ],
};

const formRef = ref();
const formData = ref({
  field_title: undefined,
  field_name: undefined,
  is_search: 0,
  field_type_id: undefined,
  belong_to_table: undefined,
  original_sql: undefined,
  modular_id: undefined,
});

watch(
  () => props.type,
  (newVal) => {
    if (newVal === "add") {
      resetFormData();
    } else {
      formData.value = props.data;
    }
  }
);

const resetFormData = () => {};

const handleOk = () => {
  formRef.value.validate().then(() => {
    emit("ok", formData.value);
  });
};
</script>
