/**
 * KRA - Auto Code Generator Page
 * 自动化代码生成页面
 */
import React, { useState, useEffect, useRef, useCallback } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Form,
  Input,
  Select,
  Checkbox,
  Row,
  Col,
  Drawer,
  Collapse,
  Tooltip,
  message,
  Alert,
  Upload,
  Modal,
  Switch,
  Tag,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  DownloadOutlined,
  UploadOutlined,
  QuestionCircleOutlined,
  RobotOutlined,
  EyeOutlined,
  SaveOutlined,
  ClearOutlined,
  CodeOutlined,
  HolderOutlined,
  ReloadOutlined,
  FileAddOutlined,
  MenuOutlined,
} from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useParams, useSearchParams, useNavigate } from '@umijs/max';
import {
  getDB,
  getTable,
  getColumn,
  createTemp,
  preview,
  getPackage,
  getMeta,
  llmAuto,
  eye,
  getTemplates,
  type AutoCodeParams,
} from '@/services/kratos/autoCode';
import { getDict } from '@/utils/dictionary';
import { getSysDictionaryList } from '@/services/kratos/dictionary';
import WarningBar from '@/components/WarningBar';
import CodePreview from './components/CodePreview';
import styles from './index.less';

const { Panel } = Collapse;
const { TextArea } = Input;

// 字段模板
const fieldTemplate = {
  fieldName: '',
  fieldDesc: '',
  fieldType: '',
  dataType: '',
  fieldJson: '',
  columnName: '',
  dataTypeLong: '',
  comment: '',
  defaultValue: '',
  require: false,
  sort: false,
  form: true,
  desc: true,
  table: true,
  excel: false,
  errorText: '',
  primaryKey: false,
  clearable: true,
  fieldSearchType: '',
  fieldSearchHide: false,
  fieldIndexType: '',
  dictType: '',
  onlyNumber: '',
  dataSource: {
    dbName: '',
    association: 1,
    table: '',
    label: '',
    value: '',
    hasDeletedAt: false,
  },
};

// KRA默认字段列表
const gormModelList = ['id', 'created_at', 'updated_at', 'deleted_at'];
const dataModelList = ['created_by', 'updated_by', 'deleted_by'];

// 字段类型选项
const typeOptions = [
  { label: '字符串', value: 'string' },
  { label: '富文本', value: 'richtext' },
  { label: '整型', value: 'int' },
  { label: '布尔值', value: 'bool' },
  { label: '浮点型', value: 'float64' },
  { label: '时间', value: 'time.Time' },
  { label: '枚举', value: 'enum' },
  { label: '单图片（字符串）', value: 'picture' },
  { label: '多图片（json字符串）', value: 'pictures' },
  { label: '视频（字符串）', value: 'video' },
  { label: '文件（json字符串）', value: 'file' },
  { label: 'JSON', value: 'json' },
  { label: '数组', value: 'array' },
];

// 搜索条件选项
const typeSearchOptions = [
  { label: '=', value: '=' },
  { label: '<>', value: '<>' },
  { label: '>', value: '>' },
  { label: '<', value: '<' },
  { label: 'LIKE', value: 'LIKE' },
  { label: 'BETWEEN', value: 'BETWEEN' },
  { label: 'NOT BETWEEN', value: 'NOT BETWEEN' },
];

// 索引类型选项
const typeIndexOptions = [
  { label: 'index', value: 'index' },
  { label: 'uniqueIndex', value: 'uniqueIndex' },
];

// 工具函数
const toUpperCase = (str: string) => {
  if (!str) return '';
  return str.charAt(0).toUpperCase() + str.slice(1);
};

const toLowerCase = (str: string) => {
  if (!str) return '';
  return str.charAt(0).toLowerCase() + str.slice(1);
};

const toHump = (str: string) => {
  if (!str) return '';
  return str.replace(/_(\w)/g, (_, letter) => letter.toUpperCase());
};

const toSQLLine = (str: string) => {
  if (!str) return '';
  return str.replace(/([A-Z])/g, '_$1').toLowerCase().replace(/^_/, '');
};

const getOnlyNumber = () => {
  let randomNumber = '';
  while (randomNumber.length < 16) {
    randomNumber += Math.random().toString(16).substring(2);
  }
  return randomNumber.substring(0, 16);
};

interface FieldItem {
  fieldName: string;
  fieldDesc: string;
  fieldType: string;
  dataType?: string;
  fieldJson: string;
  columnName: string;
  dataTypeLong: string;
  comment: string;
  defaultValue: string;
  require: boolean;
  sort: boolean;
  form: boolean;
  desc: boolean;
  table: boolean;
  excel: boolean;
  errorText?: string;
  primaryKey: boolean;
  clearable?: boolean;
  fieldSearchType: string;
  fieldSearchHide?: boolean;
  fieldIndexType: string;
  dictType?: string;
  onlyNumber?: string;
  disabled?: boolean;
  dataSource?: {
    dbName: string;
    association: number;
    table: string;
    label: string;
    value: string;
    hasDeletedAt: boolean;
  };
}

interface FormData {
  structName: string;
  tableName: string;
  packageName: string;
  package: string;
  abbreviation: string;
  description: string;
  businessDB: string;
  autoCreateApiToSql: boolean;
  autoCreateMenuToSql: boolean;
  autoCreateBtnAuth: boolean;
  autoMigrate: boolean;
  gvaModel: boolean;
  autoCreateResource: boolean;
  onlyTemplate: boolean;
  isTree: boolean;
  generateWeb: boolean;
  generateServer: boolean;
  treeJson: string;
  humpPackageName?: string;
  templateType: string; // 模板类型：package 或 plugin
  fields: FieldItem[];
}

const AutoCodePage: React.FC = () => {
  const params = useParams();
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();
  
  const [loading, setLoading] = useState(false);
  const [prompt, setPrompt] = useState('');
  const [isAdd, setIsAdd] = useState(false);
  
  // 数据库选择
  const [dbList, setDbList] = useState<any[]>([]);
  const [dbOptions, setDbOptions] = useState<any[]>([]);
  const [tableOptions, setTableOptions] = useState<any[]>([]);
  const [dbform, setDbform] = useState({
    businessDB: '',
    dbName: '',
    tableName: '',
  });
  
  // 模板列表
  const [pkgs, setPkgs] = useState<any[]>([]);
  
  // 模板类型选项
  const [templateTypes, setTemplateTypes] = useState<string[]>(['package', 'plugin']);
  
  // 字段类型映射
  const [fdMap, setFdMap] = useState<Record<string, string>>({});
  
  // 表单数据
  const [form, setForm] = useState<FormData>({
    structName: '',
    tableName: '',
    packageName: '',
    package: '',
    abbreviation: '',
    description: '',
    businessDB: '',
    autoCreateApiToSql: true,
    autoCreateMenuToSql: true,
    autoCreateBtnAuth: false,
    autoMigrate: true,
    gvaModel: true,
    autoCreateResource: false,
    onlyTemplate: false,
    isTree: false,
    generateWeb: true,
    generateServer: true,
    treeJson: '',
    templateType: 'package', // 默认使用 package 模板
    fields: [],
  });
  
  // 字段编辑弹窗
  const [fieldDialogVisible, setFieldDialogVisible] = useState(false);
  const [editingField, setEditingField] = useState<FieldItem | null>(null);
  const [addFlag, setAddFlag] = useState<'add' | 'edit'>('add');
  const [dialogMiddle, setDialogMiddle] = useState<FieldItem>({ ...fieldTemplate } as FieldItem);
  const [bk, setBk] = useState<FieldItem | null>(null);
  
  // 预览弹窗
  const [previewVisible, setPreviewVisible] = useState(false);
  const [previewCode, setPreviewCode] = useState<any>(null);
  
  // TextArea焦点状态
  const [textareaFocused, setTextareaFocused] = useState(false);

  // 字典选项列表
  const [dictOptions, setDictOptions] = useState<any[]>([]);
  
  // 数据源相关状态
  const [dbTableList, setDbTableList] = useState<any[]>([]);
  const [dbColumnList, setDbColumnList] = useState<any[]>([]);
  const [dataSourceCollapsed, setDataSourceCollapsed] = useState<string[]>([]);

  // 键盘快捷键处理 - Ctrl+Enter 或 Cmd+Enter 直接生成
  const handleKeydown = useCallback((event: KeyboardEvent) => {
    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
      llmAutoFunc();
    }
  }, []);

  // 剪贴板粘贴图片处理
  const handlePaste = useCallback(async (event: Event) => {
    const clipboardEvent = event as ClipboardEvent;
    const items = clipboardEvent.clipboardData?.items;
    if (!items) return;
    
    for (let i = 0; i < items.length; i++) {
      if (items[i].type.indexOf('image') !== -1) {
        const file = items[i].getAsFile();
        if (file) {
          const reader = new FileReader();
          reader.onload = async (e) => {
            const base64String = e.target?.result as string;
            try {
              const res = await eye({ picture: base64String, command: 'eye' });
              if (res.code === 0) {
                setPrompt(res.data);
                llmAutoFunc();
              }
            } catch (error) {
              message.error('识图失败');
            }
          };
          reader.readAsDataURL(file);
        }
      }
    }
  }, []);

  // TextArea 焦点处理
  const handleFocus = () => {
    setTextareaFocused(true);
    document.addEventListener('keydown', handleKeydown);
    document.addEventListener('paste', handlePaste);
  };

  const handleBlur = () => {
    setTextareaFocused(false);
    document.removeEventListener('keydown', handleKeydown);
    document.removeEventListener('paste', handlePaste);
  };

  // 清理事件监听
  useEffect(() => {
    return () => {
      document.removeEventListener('keydown', handleKeydown);
      document.removeEventListener('paste', handlePaste);
    };
  }, [handleKeydown, handlePaste]);

  // 初始化
  useEffect(() => {
    init();
  }, []);

  // 监听generateServer变化
  useEffect(() => {
    if (!form.generateServer) {
      setForm(prev => ({
        ...prev,
        autoCreateApiToSql: false,
        autoMigrate: false,
      }));
    }
  }, [form.generateServer]);

  // 监听generateWeb变化
  useEffect(() => {
    if (!form.generateWeb) {
      setForm(prev => ({
        ...prev,
        autoCreateMenuToSql: false,
        autoCreateBtnAuth: false,
      }));
    }
  }, [form.generateWeb]);

  const init = async () => {
    await getDbFunc();
    await setFdMapFunc();
    await getPkgs();
    await getDictOptionsFunc();
    await getTemplateTypesFunc();
    
    // 从路由获取ID
    const id = params.id;
    if (id) {
      await getAutoCodeJson(Number(id));
    }
    
    // 获取缓存
    getCatch();
  };

  // 获取模板类型列表
  const getTemplateTypesFunc = async () => {
    try {
      const res = await getTemplates();
      if (res.code === 0 && res.data) {
        setTemplateTypes(res.data || ['package', 'plugin']);
      }
    } catch (error) {
      console.error('获取模板类型失败:', error);
    }
  };

  // 获取字典选项列表
  const getDictOptionsFunc = async () => {
    try {
      const res = await getSysDictionaryList({ page: 1, pageSize: 999999 } as any);
      if (res.code === 0 && res.data) {
        setDictOptions(res.data.list || res.data || []);
      }
    } catch (error) {
      console.error('获取字典列表失败:', error);
    }
  };

  // 获取数据库列表
  const getDbFunc = async () => {
    try {
      const res = await getDB({ businessDB: dbform.businessDB });
      if (res.code === 0 && res.data) {
        setDbOptions(res.data.dbs || []);
        setDbList(res.data.dbList || []);
      }
    } catch (error) {
      console.error('获取数据库失败:', error);
    }
  };

  // 获取表列表
  const getTableFunc = async () => {
    try {
      const res = await getTable({
        businessDB: dbform.businessDB,
        dbName: dbform.dbName,
      });
      if (res.code === 0 && res.data) {
        setTableOptions(res.data.tables || []);
      }
      setDbform(prev => ({ ...prev, tableName: '' }));
    } catch (error) {
      console.error('获取表列表失败:', error);
    }
  };

  // 获取字段列表
  const getColumnFunc = async () => {
    if (!dbform.dbName || !dbform.tableName) {
      message.warning('请选择数据库和表');
      return;
    }
    try {
      const res = await getColumn(dbform);
      if (res.code === 0 && res.data) {
        let dbtype = '';
        if (dbform.businessDB) {
          const dbtmp = dbList.find(item => item.aliasName === dbform.businessDB);
          if (dbtmp) {
            dbtype = dbtmp.dbtype;
          }
        }
        
        const tbHump = toHump(dbform.tableName);
        const newFields: FieldItem[] = [];
        
        res.data.columns?.forEach((item: any) => {
          if (needAppend(item)) {
            const fbHump = toHump(item.columnName);
            newFields.push({
              onlyNumber: getOnlyNumber(),
              fieldName: toUpperCase(fbHump),
              fieldDesc: item.columnComment || fbHump + '字段',
              fieldType: fdMap[item.dataType] || 'string',
              dataType: item.dataType,
              fieldJson: fbHump,
              primaryKey: item.primaryKey || false,
              dataTypeLong: item.dataTypeLong?.split(',')[0] || '',
              columnName: dbtype === 'oracle' ? item.columnName.toUpperCase() : item.columnName,
              comment: item.columnComment || '',
              defaultValue: '',
              require: false,
              errorText: '',
              clearable: true,
              fieldSearchType: '',
              fieldIndexType: '',
              dictType: '',
              form: true,
              table: true,
              excel: false,
              desc: true,
              sort: false,
              dataSource: {
                dbName: '',
                association: 1,
                table: '',
                label: '',
                value: '',
                hasDeletedAt: false,
              },
            });
          }
        });
        
        setForm(prev => ({
          ...prev,
          gvaModel: false,
          structName: toUpperCase(tbHump),
          tableName: dbform.tableName,
          packageName: toLowerCase(tbHump),
          abbreviation: toLowerCase(tbHump),
          description: tbHump + '表',
          autoCreateApiToSql: true,
          generateServer: true,
          generateWeb: true,
          fields: newFields,
        }));
        
        message.success('字段获取成功');
      }
    } catch (error) {
      message.error('获取字段失败');
    }
  };

  // 判断是否需要添加字段
  const needAppend = (item: any) => {
    if (form.gvaModel && gormModelList.includes(item.columnName)) {
      return false;
    }
    if (form.autoCreateResource && dataModelList.includes(item.columnName)) {
      return false;
    }
    return true;
  };

  // 设置字段类型映射
  const setFdMapFunc = async () => {
    const fdTypes = ['string', 'int', 'bool', 'float64', 'time.Time'];
    const newFdMap: Record<string, string> = {};
    
    for (const fdtype of fdTypes) {
      try {
        const res = await getDict(fdtype);
        res?.forEach((item: any) => {
          newFdMap[item.label] = fdtype;
        });
      } catch (error) {
        // ignore
      }
    }
    setFdMap(newFdMap);
  };

  // 获取模板列表
  const getPkgs = async () => {
    try {
      const res = await getPackage();
      if (res.code === 0 && res.data) {
        setPkgs(res.data.pkgs || []);
      }
    } catch (error) {
      console.error('获取模板列表失败:', error);
    }
  };

  // 获取历史代码配置
  const getAutoCodeJson = async (id: number) => {
    try {
      const res = await getMeta({ id });
      if (res.code === 0 && res.data) {
        const add = searchParams.get('isAdd');
        setIsAdd(!!add);
        const meta = JSON.parse(res.data.meta);
        if (add) {
          meta.fields?.forEach((item: FieldItem) => {
            item.disabled = true;
          });
        }
        setForm(meta);
      }
    } catch (error) {
      console.error('获取配置失败:', error);
    }
  };

  // AI生成
  const llmAutoFunc = async (flag?: boolean) => {
    if (flag && !form.structName) {
      message.error('请输入结构体名称');
      return;
    }
    if (!flag && !prompt) {
      message.error('请输入描述');
      return;
    }
    
    if (form.fields.length > 0) {
      Modal.confirm({
        title: '提示',
        content: 'AI生成会清空当前数据，是否继续?',
        onOk: async () => {
          await doLlmAuto(flag);
        },
      });
    } else {
      await doLlmAuto(flag);
    }
  };

  const doLlmAuto = async (flag?: boolean) => {
    setLoading(true);
    try {
      const res = await llmAuto({
        prompt: flag ? '结构体名称为' + form.structName : prompt,
      });
      if (res.code === 0) {
        const json = JSON.parse(res.data);
        json.fields?.forEach((item: FieldItem) => {
          item.fieldName = toUpperCase(item.fieldName);
        });
        
        setForm(prev => ({
          ...prev,
          ...json,
          generateServer: true,
          generateWeb: true,
          fields: json.fields || [],
        }));
        message.success('AI生成成功');
      }
    } catch (error) {
      message.error('AI生成失败');
    } finally {
      setLoading(false);
    }
  };

  // 识图功能
  const eyeFunc = () => {
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = 'image/*';
    
    input.onchange = async (event: any) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = async (e) => {
          const base64String = e.target?.result as string;
          try {
            const res = await eye({ picture: base64String, command: 'eye' });
            if (res.code === 0) {
              setPrompt(res.data);
              llmAutoFunc();
            }
          } catch (error) {
            message.error('识图失败');
          }
        };
        reader.readAsDataURL(file);
      }
    };
    
    input.click();
  };

  // 使用KRA结构
  const useKraModel = (checked: boolean) => {
    if (checked && form.fields.length > 0) {
      Modal.confirm({
        title: '注意',
        content: '如果您开启KRA默认结构，会自动添加ID,CreatedAt,UpdatedAt,DeletedAt字段，此行为将自动清除您目前在下方创建的重名字段，是否继续？',
        onOk: () => {
          setForm(prev => ({
            ...prev,
            gvaModel: true,
            fields: prev.fields.filter(item => !gormModelList.includes(item.columnName)),
          }));
        },
        onCancel: () => {
          setForm(prev => ({ ...prev, gvaModel: false }));
        },
      });
    } else {
      setForm(prev => ({ ...prev, gvaModel: checked }));
    }
  };

  // 自动填充字段Json和数据库字段
  const autoFillField = () => {
    if (!dialogMiddle.fieldName) {
      message.warning('请先输入字段名称');
      return;
    }
    const fieldJson = toLowerCase(dialogMiddle.fieldName);
    const columnName = toSQLLine(fieldJson);
    setDialogMiddle(prev => ({
      ...prev,
      fieldJson,
      columnName,
    }));
  };

  // 清除字段类型相关选项
  const clearFieldTypeOptions = () => {
    setDialogMiddle(prev => ({
      ...prev,
      fieldSearchType: '',
      dictType: '',
    }));
  };

  // 数据源关联模式变更
  const handleAssociationChange = (val: number) => {
    if (val === 2) {
      Modal.confirm({
        title: '提示',
        content: '一对多关联模式下，数据类型会改变为数组，后端表现为json，具体表现为数组模式，是否继续？',
        onOk: () => {
          setDialogMiddle(prev => ({
            ...prev,
            fieldType: 'array',
            dataSource: { ...prev.dataSource!, association: 2 },
          }));
        },
        onCancel: () => {
          setDialogMiddle(prev => ({
            ...prev,
            dataSource: { ...prev.dataSource!, association: 1 },
          }));
        },
      });
    } else {
      setDialogMiddle(prev => ({
        ...prev,
        dataSource: { ...prev.dataSource!, association: val },
      }));
    }
  };

  // 获取数据源表列表
  const getDBTableListFunc = async (dbName?: string) => {
    try {
      const res = await getTable({ businessDB: dbName || dialogMiddle.dataSource?.dbName || '' });
      if (res.code === 0 && res.data) {
        setDbTableList((res.data.tables || []).map((item: any) => ({
          tableName: item.tableName,
          value: item.tableName,
        })));
      }
    } catch (error) {
      console.error('获取表列表失败:', error);
    }
  };

  // 选择数据源表
  const selectDataSourceTable = async (tableName: string, isInit?: boolean) => {
    if (!tableName) {
      setDbColumnList([]);
      setDialogMiddle(prev => ({
        ...prev,
        dataSource: {
          ...prev.dataSource!,
          table: '',
          label: '',
          value: '',
          hasDeletedAt: false,
        },
      }));
      return;
    }
    
    try {
      const res = await getColumn({
        businessDB: dialogMiddle.dataSource?.dbName || '',
        tableName,
      });
      if (res.code === 0 && res.data) {
        let hasDeletedAt = false;
        const columns = (res.data.columns || []).map((item: any) => {
          if (item.columnName === 'deleted_at') {
            hasDeletedAt = true;
          }
          return {
            columnName: item.columnName,
            value: item.columnName,
            type: item.dataType,
            isPrimary: item.primaryKey,
            comment: item.columnComment,
          };
        });
        setDbColumnList(columns);
        
        if (!isInit && columns.length > 0) {
          setDialogMiddle(prev => ({
            ...prev,
            dataSource: {
              ...prev.dataSource!,
              table: tableName,
              label: columns[0].columnName,
              value: columns[0].columnName,
              hasDeletedAt,
            },
          }));
        } else {
          setDialogMiddle(prev => ({
            ...prev,
            dataSource: {
              ...prev.dataSource!,
              table: tableName,
              hasDeletedAt,
            },
          }));
        }
      }
    } catch (error) {
      console.error('获取字段列表失败:', error);
    }
  };

  // 数据源数据库变更
  const handleDataSourceDbChange = (dbName: string) => {
    setDialogMiddle(prev => ({
      ...prev,
      dataSource: {
        ...prev.dataSource!,
        dbName,
        table: '',
        label: '',
        value: '',
      },
    }));
    setDbColumnList([]);
    if (dbName) {
      getDBTableListFunc(dbName);
    }
  };

  // 清除数据源选择
  const clearDataSourceAccess = () => {
    setDialogMiddle(prev => ({
      ...prev,
      dataSource: {
        ...prev.dataSource!,
        label: '',
        value: '',
      },
    }));
  };

  // 拖拽排序处理
  const moveField = (dragIndex: number, hoverIndex: number) => {
    const newFields = [...form.fields];
    const [draggedItem] = newFields.splice(dragIndex, 1);
    newFields.splice(hoverIndex, 0, draggedItem);
    setForm(prev => ({ ...prev, fields: newFields }));
  };


  // 新增/编辑字段
  const editAndAddField = (item?: FieldItem) => {
    setFieldDialogVisible(true);
    if (item) {
      setAddFlag('edit');
      if (!item.dataSource) {
        item.dataSource = {
          dbName: '',
          association: 1,
          table: '',
          label: '',
          value: '',
          hasDeletedAt: false,
        };
      }
      setBk(JSON.parse(JSON.stringify(item)));
      setDialogMiddle(item);
      // 如果有数据源表，加载字段列表
      if (item.dataSource?.table) {
        getDBTableListFunc(item.dataSource.dbName);
        selectDataSourceTable(item.dataSource.table, true);
      }
    } else {
      setAddFlag('add');
      const newField = {
        ...fieldTemplate,
        onlyNumber: getOnlyNumber(),
      } as FieldItem;
      setDialogMiddle(newField);
      setDbTableList([]);
      setDbColumnList([]);
    }
  };

  // 确认字段编辑
  const enterDialog = () => {
    if (!dialogMiddle.fieldName) {
      message.error('请输入字段名称');
      return;
    }
    
    const updatedField = {
      ...dialogMiddle,
      fieldName: toUpperCase(dialogMiddle.fieldName),
    };
    
    if (addFlag === 'add') {
      setForm(prev => ({
        ...prev,
        fields: [...prev.fields, updatedField],
      }));
    } else {
      setForm(prev => ({
        ...prev,
        fields: prev.fields.map(f => 
          f.onlyNumber === updatedField.onlyNumber ? updatedField : f
        ),
      }));
    }
    setFieldDialogVisible(false);
  };

  // 关闭字段编辑
  const closeDialog = () => {
    if (addFlag === 'edit' && bk) {
      // 恢复备份
      setForm(prev => ({
        ...prev,
        fields: prev.fields.map(f => 
          f.onlyNumber === bk.onlyNumber ? bk : f
        ),
      }));
    }
    setFieldDialogVisible(false);
  };

  // 删除字段
  const deleteField = (index: number) => {
    Modal.confirm({
      title: '提示',
      content: '确定要删除吗?',
      onOk: () => {
        setForm(prev => ({
          ...prev,
          fields: prev.fields.filter((_, i) => i !== index),
        }));
      },
    });
  };

  // 暂存
  const catchData = () => {
    sessionStorage.setItem('autoCode', JSON.stringify(form));
    message.success('暂存成功');
  };

  // 获取缓存
  const getCatch = () => {
    const data = sessionStorage.getItem('autoCode');
    if (data) {
      try {
        setForm(JSON.parse(data));
      } catch (error) {
        // ignore
      }
    }
  };

  // 清除缓存
  const clearCatch = () => {
    setForm({
      structName: '',
      tableName: '',
      packageName: '',
      package: '',
      abbreviation: '',
      description: '',
      businessDB: '',
      autoCreateApiToSql: true,
      autoCreateMenuToSql: true,
      autoCreateBtnAuth: false,
      autoMigrate: true,
      gvaModel: true,
      autoCreateResource: false,
      onlyTemplate: false,
      isTree: false,
      generateWeb: true,
      generateServer: true,
      treeJson: '',
      templateType: 'package',
      fields: [],
    });
    sessionStorage.removeItem('autoCode');
    message.success('清除成功');
  };

  // 导出JSON
  const exportJson = () => {
    const dataStr = JSON.stringify(form, null, 2);
    const blob = new Blob([dataStr], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'form_data.json';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // 导入JSON
  const importJson = (file: File) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      try {
        const data = JSON.parse(e.target?.result as string);
        setForm({
          ...data,
          generateServer: true,
          generateWeb: true,
        });
        message.success('JSON文件导入成功');
      } catch (error) {
        message.error('无效的JSON文件');
      }
    };
    reader.readAsText(file);
    return false;
  };

  // 验证表单
  const validateForm = (): boolean => {
    if (form.isTree && !form.treeJson) {
      message.error('请填写树型结构的前端展示json属性');
      return false;
    }
    if (!form.generateWeb && !form.generateServer) {
      message.error('请至少选择一个生成项');
      return false;
    }
    if (!form.onlyTemplate) {
      if (form.fields.length <= 0) {
        message.error('请填写至少一个field');
        return false;
      }
      if (!form.gvaModel && form.fields.every(item => !item.primaryKey)) {
        message.error('您至少需要创建一个主键才能保证自动化代码的可行性');
        return false;
      }
      if (form.fields.some(item => item.fieldName === form.structName)) {
        message.error('存在与结构体同名的字段');
        return false;
      }
      if (form.fields.some(item => item.fieldJson === form.package)) {
        message.error('存在与模板同名的字段JSON');
        return false;
      }
      if (form.fields.some(item => !item.fieldType)) {
        message.error('请填写所有字段类型后进行提交');
        return false;
      }
      if (form.package === form.abbreviation) {
        message.error('package和结构体简称不可同名');
        return false;
      }
    }
    if (!form.structName) {
      message.error('请输入结构体名称');
      return false;
    }
    if (!form.abbreviation) {
      message.error('请输入结构体简称');
      return false;
    }
    if (!form.description) {
      message.error('请输入结构体描述');
      return false;
    }
    if (!form.packageName) {
      message.error('请输入文件名称');
      return false;
    }
    if (!form.package) {
      message.error('请选择模板');
      return false;
    }
    if (form.structName === form.abbreviation) {
      message.error('structName和struct简称不能相同');
      return false;
    }
    return true;
  };

  // 提交表单（预览或生成）
  const enterForm = async (isPreview: boolean) => {
    if (!validateForm()) return;
    
    // 处理表单数据
    const submitForm = { ...form };
    submitForm.structName = toUpperCase(submitForm.structName.trim());
    submitForm.tableName = submitForm.tableName.replace(' ', '');
    if (!submitForm.tableName) {
      submitForm.tableName = toSQLLine(toLowerCase(submitForm.structName));
    }
    submitForm.humpPackageName = toSQLLine(submitForm.packageName);
    
    // 处理字段
    submitForm.fields = submitForm.fields.map(item => {
      const newItem = { ...item };
      newItem.fieldName = toUpperCase(newItem.fieldName);
      if (newItem.fieldType === 'enum') {
        newItem.dataTypeLong = newItem.dataTypeLong.replace(/[\[\]{}()]/g, '');
        const arr = newItem.dataTypeLong.split(',');
        newItem.dataTypeLong = arr.map(ele => 
          ele.indexOf("'") === -1 ? `'${ele}'` : ele
        ).join(',');
      }
      return newItem;
    });
    
    setLoading(true);
    try {
      if (isPreview) {
        const res = await preview({
          ...submitForm,
          isAdd: isAdd,
          fields: submitForm.fields.filter(item => !item.disabled),
        } as AutoCodeParams);
        if (res.code === 0 && res.data) {
          setPreviewCode(res.data.autoCode || res.data);
          setPreviewVisible(true);
        }
      } else {
        const res = await createTemp(submitForm as AutoCodeParams);
        if (res.code === 0) {
          message.success('自动化代码创建成功，自动移动成功');
          clearCatch();
        }
      }
    } catch (error) {
      message.error(isPreview ? '预览失败' : '生成失败');
    } finally {
      setLoading(false);
    }
  };

  // 判断搜索条件是否可选
  const canSelect = (fieldType: string, item: string) => {
    if (fieldType === 'richtext') {
      return item !== 'LIKE';
    }
    if (fieldType !== 'string' && item === 'LIKE') {
      return true;
    }
    const nonNumericTypes = ['int', 'time.Time', 'float64'];
    if (!nonNumericTypes.includes(fieldType) && ['BETWEEN', 'NOT BETWEEN'].includes(item)) {
      return true;
    }
    return false;
  };

  // 跳转到模板管理
  const goPkgs = () => {
    navigate('/systemTools/autoPkg');
  };


  // 字段表格列定义
  const fieldColumns: ColumnsType<FieldItem> = [
    {
      title: '',
      key: 'drag',
      width: 50,
      render: (_, __, index) => (
        <Tooltip title="拖拽排序">
          <MenuOutlined 
            className={styles.dragHandle} 
            style={{ cursor: 'move', color: '#999' }}
          />
        </Tooltip>
      ),
    },
    { title: '序列', key: 'index', width: 60, render: (_, __, index) => index + 1 },
    {
      title: '主键',
      dataIndex: 'primaryKey',
      width: 60,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].primaryKey = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '字段名称',
      dataIndex: 'fieldName',
      width: 140,
      render: (val) => <Input value={val} disabled />,
    },
    {
      title: '中文名',
      dataIndex: 'fieldDesc',
      width: 140,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].fieldDesc = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '默认值',
      dataIndex: 'defaultValue',
      width: 120,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].defaultValue = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '必填',
      dataIndex: 'require',
      width: 60,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].require = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 60,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].sort = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '新建/编辑',
      dataIndex: 'form',
      width: 90,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].form = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '表格',
      dataIndex: 'table',
      width: 60,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].table = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '详情',
      dataIndex: 'desc',
      width: 60,
      render: (val, record, index) => (
        <Checkbox
          checked={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].desc = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    ...(!isAdd ? [{
      title: '导入/导出',
      dataIndex: 'excel',
      width: 90,
      render: (val: boolean, record: FieldItem, index: number) => (
        <Checkbox
          checked={val}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].excel = e.target.checked;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    }] : []),
    {
      title: '字段Json',
      dataIndex: 'fieldJson',
      width: 140,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].fieldJson = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '字段类型',
      dataIndex: 'fieldType',
      width: 140,
      render: (val, record, index) => (
        <Select
          value={val}
          disabled={record.disabled}
          style={{ width: '100%' }}
          options={typeOptions}
          onChange={(value) => {
            const newFields = [...form.fields];
            newFields[index].fieldType = value;
            // 清除相关选项
            newFields[index].fieldSearchType = '';
            newFields[index].dictType = '';
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '字典类型',
      dataIndex: 'dictType',
      width: 140,
      render: (val, record, index) => (
        <Select
          value={val}
          disabled={record.disabled || (record.fieldType !== 'string' && record.fieldType !== 'array')}
          allowClear
          style={{ width: '100%' }}
          placeholder="选择字典"
          onChange={(value) => {
            const newFields = [...form.fields];
            newFields[index].dictType = value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        >
          {dictOptions.map((dict: any) => (
            <Select.Option key={dict.type} value={dict.type}>
              {`${dict.type}(${dict.name})`}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '索引类型',
      dataIndex: 'fieldIndexType',
      width: 120,
      render: (val, record, index) => (
        <Select
          value={val}
          disabled={record.disabled}
          allowClear
          style={{ width: '100%' }}
          options={typeIndexOptions}
          onChange={(value) => {
            const newFields = [...form.fields];
            newFields[index].fieldIndexType = value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '字段长度/枚举值',
      dataIndex: 'dataTypeLong',
      width: 140,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].dataTypeLong = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '数据库字段',
      dataIndex: 'columnName',
      width: 140,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].columnName = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '数据库字段描述',
      dataIndex: 'comment',
      width: 140,
      render: (val, record, index) => (
        <Input
          value={val}
          disabled={record.disabled}
          onChange={(e) => {
            const newFields = [...form.fields];
            newFields[index].comment = e.target.value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        />
      ),
    },
    {
      title: '搜索条件',
      dataIndex: 'fieldSearchType',
      width: 120,
      render: (val, record, index) => (
        <Select
          value={val}
          disabled={record.fieldType === 'json' || record.disabled}
          allowClear
          style={{ width: '100%' }}
          onChange={(value) => {
            const newFields = [...form.fields];
            newFields[index].fieldSearchType = value;
            setForm(prev => ({ ...prev, fields: newFields }));
          }}
        >
          {typeSearchOptions.map(opt => (
            <Select.Option
              key={opt.value}
              value={opt.value}
              disabled={canSelect(record.fieldType, opt.value)}
            >
              {opt.label}
            </Select.Option>
          ))}
        </Select>
      ),
    },
    {
      title: '操作',
      key: 'action',
      width: 150,
      fixed: 'right',
      render: (_, record, index) => (
        <Space>
          {!record.disabled && (
            <>
              <Button
                type="link"
                size="small"
                icon={<EditOutlined />}
                onClick={() => editAndAddField(record)}
              >
                高级编辑
              </Button>
              <Button
                type="link"
                size="small"
                danger
                icon={<DeleteOutlined />}
                onClick={() => deleteField(index)}
              >
                删除
              </Button>
            </>
          )}
        </Space>
      ),
    },
  ];


  return (
    <PageContainer>
      {/* 警告栏 */}
      <Alert
        message={
          <span>
            此功能为开发环境使用，不建议发布到生产，
            <a href="https://www.bilibili.com/video/BV1kv4y1g7nT?p=3" target="_blank" rel="noreferrer">
              具体使用效果请点我观看
            </a>
          </span>
        }
        type="warning"
        showIcon
        className={styles.warningBar}
      />

      {/* AI生成区域 */}
      {!isAdd && (
        <Card
          title={
            <span>
              使用AI创建
              <a
                href="https://go-kratos.dev/"
                target="_blank"
                rel="noreferrer"
                style={{ fontSize: 12, marginLeft: 16 }}
              >
                获取AiPath
              </a>
            </span>
          }
          className={styles.sectionCard}
        >
          <div className={styles.aiSection}>
            <TextArea
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              onFocus={handleFocus}
              onBlur={handleBlur}
              rows={5}
              maxLength={2000}
              placeholder={`现已完全免费\n试试复制一张图片然后按下ctrl+v或者commend+v\n试试描述你的表，让AI帮你完成。\n此功能需要到插件市场个人中心获取自己的AI-Path，把AI-Path填入config.yaml下的autocode-->ai-path，重启项目即可使用。\n按下 Ctrl+Enter 或 Cmd+Enter 直接生成`}
            />
            <div className={styles.aiButtons}>
              <Tooltip title="前往插件市场个人中心申请AIPath">
                <Button
                  type="primary"
                  icon={<EyeOutlined />}
                  disabled={form.onlyTemplate}
                  onClick={eyeFunc}
                >
                  识图
                </Button>
              </Tooltip>
              <Tooltip title="前往插件市场个人中心申请AIPath">
                <Button
                  type="primary"
                  icon={<RobotOutlined />}
                  disabled={form.onlyTemplate}
                  onClick={() => llmAutoFunc()}
                  loading={loading}
                >
                  生成
                </Button>
              </Tooltip>
            </div>
          </div>
        </Card>
      )}

      {/* 从数据库创建 */}
      {!isAdd && (
        <Card title="从数据库创建" className={styles.sectionCard}>
          <Row gutter={16}>
            <Col span={6}>
              <Form.Item
                label={
                  <Tooltip title="需要提前到db-list自行配置多数据库，如未配置需配置后重启服务方可使用">
                    业务库 <QuestionCircleOutlined />
                  </Tooltip>
                }
              >
                <Select
                  value={dbform.businessDB}
                  placeholder="选择业务库"
                  allowClear
                  onChange={(val) => {
                    setDbform(prev => ({ ...prev, businessDB: val, dbName: '', tableName: '' }));
                    getDbFunc();
                  }}
                >
                  {dbList.map((db) => (
                    <Select.Option key={db.aliasName} value={db.aliasName} disabled={db.disable}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span>{db.aliasName}</span>
                        <span style={{ color: '#8492a6', fontSize: 13 }}>{db.dbName}</span>
                      </div>
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="数据库名">
                <Select
                  value={dbform.dbName}
                  placeholder="请选择数据库"
                  allowClear
                  onChange={(val) => {
                    setDbform(prev => ({ ...prev, dbName: val, tableName: '' }));
                    getTableFunc();
                  }}
                >
                  {dbOptions.map((db: any) => (
                    <Select.Option key={db.database} value={db.database}>
                      {db.database}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item label="表名">
                <Select
                  value={dbform.tableName}
                  placeholder="请选择表"
                  disabled={!dbform.dbName}
                  allowClear
                  showSearch
                  onChange={(val) => setDbform(prev => ({ ...prev, tableName: val }))}
                >
                  {tableOptions.map((t: any) => (
                    <Select.Option key={t.tableName} value={t.tableName}>
                      {t.tableName}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item>
                <Button type="primary" onClick={getColumnFunc}>
                  使用此表
                </Button>
              </Form.Item>
            </Col>
          </Row>
        </Card>
      )}

      {/* 自动化结构 */}
      <Card title="自动化结构" className={styles.sectionCard}>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item label="结构名称" required>
              <Space.Compact style={{ width: '100%' }}>
                <Input
                  value={form.structName}
                  disabled={isAdd}
                  placeholder="首字母自动转换大写"
                  onChange={(e) => setForm(prev => ({ ...prev, structName: e.target.value }))}
                />
                <Button
                  type="primary"
                  icon={<RobotOutlined />}
                  disabled={form.onlyTemplate || isAdd}
                  onClick={() => llmAutoFunc(true)}
                >
                  生成
                </Button>
              </Space.Compact>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <Tooltip title="简称会作为入参对象名和路由group">
                  结构简称 <QuestionCircleOutlined />
                </Tooltip>
              }
              required
            >
              <Input
                value={form.abbreviation}
                disabled={isAdd}
                placeholder="请输入Struct简称"
                onChange={(e) => setForm(prev => ({ ...prev, abbreviation: e.target.value }))}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="中文名称" required>
              <Input
                value={form.description}
                disabled={isAdd}
                placeholder="中文描述作为自动api描述"
                onChange={(e) => setForm(prev => ({ ...prev, description: e.target.value }))}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="表名">
              <Input
                value={form.tableName}
                disabled={isAdd}
                placeholder="指定表名（非必填）"
                onChange={(e) => setForm(prev => ({ ...prev, tableName: e.target.value }))}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item
              label={
                <Tooltip title="生成文件的默认名称(建议为驼峰格式,首字母小写,如sysXxxXxxx)">
                  文件名称 <QuestionCircleOutlined />
                </Tooltip>
              }
              required
            >
              <Input
                value={form.packageName}
                disabled={isAdd}
                placeholder="请输入文件名称"
                onChange={(e) => setForm(prev => ({ ...prev, packageName: e.target.value }))}
                onBlur={() => setForm(prev => ({ ...prev, packageName: toLowerCase(prev.packageName) }))}
              />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item
              label={
                <Tooltip title="模板package会创建集成于项目本体中的代码包，模板plugin会创建插件包">
                  模板类型 <QuestionCircleOutlined />
                </Tooltip>
              }
              required
            >
              <Select
                value={form.templateType}
                disabled={isAdd}
                placeholder="请选择模板类型"
                style={{ width: '100%' }}
                onChange={(val) => setForm(prev => ({ ...prev, templateType: val }))}
              >
                {templateTypes.map((type) => (
                  <Select.Option key={type} value={type}>
                    {type === 'package' ? 'package (项目代码包)' : 'plugin (插件包)'}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label="选择模板" required>
              <Space.Compact style={{ width: '100%' }}>
                <Select
                  value={form.package}
                  disabled={isAdd}
                  placeholder="请选择模板"
                  showSearch
                  style={{ flex: 1 }}
                  onChange={(val) => setForm(prev => ({ ...prev, package: val }))}
                >
                  {pkgs.map((pkg: any) => (
                    <Select.Option key={pkg.ID} value={pkg.packageName}>
                      {pkg.packageName}
                    </Select.Option>
                  ))}
                </Select>
                <Button icon={<ReloadOutlined />} onClick={getPkgs} />
                <Button icon={<FileAddOutlined />} onClick={goPkgs} />
              </Space.Compact>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={6}>
            <Form.Item
              label={
                <Tooltip title="需要提前到db-list自行配置多数据库，此项为空则会使用kra本库创建自动化代码">
                  业务库 <QuestionCircleOutlined />
                </Tooltip>
              }
            >
              <Select
                value={form.businessDB}
                disabled={isAdd}
                placeholder="选择业务库"
                allowClear
                onChange={(val) => setForm(prev => ({ ...prev, businessDB: val }))}
              >
                {dbList.map((db) => (
                  <Select.Option key={db.aliasName} value={db.aliasName} disabled={db.disable}>
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                      <span>{db.aliasName}</span>
                      <span style={{ color: '#8492a6', fontSize: 13 }}>{db.dbName}</span>
                    </div>
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
      </Card>

      {/* 专家模式 */}
      <Card className={styles.sectionCard}>
        <Collapse ghost className={styles.expertCollapse}>
          <Panel header="专家模式" key="expert">
            <div className={styles.expertSection}>
              {/* 基础设置 */}
              <div className={styles.settingGroup}>
                <h4>基础设置</h4>
                <Row gutter={16}>
                  <Col span={4}>
                    <Tooltip title="会自动在结构体global.Model其中包含主键和软删除相关操作配置">
                      <Checkbox
                        checked={form.gvaModel}
                        disabled={isAdd}
                        onChange={(e) => useKraModel(e.target.checked)}
                      >
                        使用KRA结构
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={4}>
                    <Tooltip title="会自动产生页面内的按钮权限配置，若不在角色管理中进行按钮分配则按钮不可见">
                      <Checkbox
                        checked={form.autoCreateBtnAuth}
                        disabled={!form.generateWeb || isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, autoCreateBtnAuth: e.target.checked }))}
                      >
                        创建按钮权限
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={4}>
                    <Checkbox
                      checked={form.generateWeb}
                      disabled={isAdd}
                      onChange={(e) => setForm(prev => ({ ...prev, generateWeb: e.target.checked }))}
                    >
                      生成前端
                    </Checkbox>
                  </Col>
                  <Col span={4}>
                    <Checkbox checked={form.generateServer} disabled>
                      生成后端
                    </Checkbox>
                  </Col>
                </Row>
              </div>

              {/* 自动化设置 */}
              <div className={styles.settingGroup}>
                <h4>自动化设置</h4>
                <Row gutter={16}>
                  <Col span={4}>
                    <Tooltip title="把自动生成的API注册进数据库">
                      <Checkbox
                        checked={form.autoCreateApiToSql}
                        disabled={!form.generateServer || isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, autoCreateApiToSql: e.target.checked }))}
                      >
                        自动创建API
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={4}>
                    <Tooltip title="把自动生成的菜单注册进数据库">
                      <Checkbox
                        checked={form.autoCreateMenuToSql}
                        disabled={!form.generateWeb || isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, autoCreateMenuToSql: e.target.checked }))}
                      >
                        自动创建菜单
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={4}>
                    <Tooltip title="自动同步数据库表结构，如果不需要可以选择关闭">
                      <Checkbox
                        checked={form.autoMigrate}
                        disabled={!form.generateServer || isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, autoMigrate: e.target.checked }))}
                      >
                        同步表结构
                      </Checkbox>
                    </Tooltip>
                  </Col>
                </Row>
              </div>

              {/* 高级设置 */}
              <div className={styles.settingGroup}>
                <h4>高级设置</h4>
                <Row gutter={16}>
                  <Col span={4}>
                    <Tooltip title="会自动在结构体添加 created_by updated_by deleted_by，方便用户进行资源权限控制">
                      <Checkbox
                        checked={form.autoCreateResource}
                        disabled={isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, autoCreateResource: e.target.checked }))}
                      >
                        创建资源标识
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={4}>
                    <Tooltip title="使用基础模板将不会生成任何结构体和CURD,仅仅配置enter等属性方便自行开发非CURD逻辑">
                      <Checkbox
                        checked={form.onlyTemplate}
                        disabled={isAdd}
                        onChange={(e) => {
                          if (e.target.checked) {
                            Modal.confirm({
                              title: '注意',
                              content: '使用基础模板将不会生成任何结构体和CURD,仅仅配置enter等属性方便自行开发非CURD逻辑',
                              onOk: () => {
                                setForm(prev => ({ ...prev, onlyTemplate: true, fields: [] }));
                              },
                            });
                          } else {
                            setForm(prev => ({ ...prev, onlyTemplate: false }));
                          }
                        }}
                      >
                        基础模板
                      </Checkbox>
                    </Tooltip>
                  </Col>
                </Row>
              </div>

              {/* 树形结构设置 */}
              <div className={styles.settingGroup}>
                <h4>树形结构设置</h4>
                <Row gutter={16} align="middle">
                  <Col span={4}>
                    <Tooltip title="会自动创建parentID来进行父子关系关联,仅支持主键为int类型">
                      <Checkbox
                        checked={form.isTree}
                        disabled={isAdd}
                        onChange={(e) => setForm(prev => ({ ...prev, isTree: e.target.checked }))}
                      >
                        树型结构
                      </Checkbox>
                    </Tooltip>
                  </Col>
                  <Col span={8}>
                    <Input
                      value={form.treeJson}
                      disabled={!form.isTree || isAdd}
                      placeholder="前端展示json属性"
                      onChange={(e) => setForm(prev => ({ ...prev, treeJson: e.target.value }))}
                    />
                  </Col>
                </Row>
              </div>
            </div>
          </Panel>
        </Collapse>
      </Card>

      {/* 字段列表 */}
      <Card className={styles.sectionCard}>
        <div className={styles.toolbar}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => editAndAddField()}
            disabled={form.onlyTemplate}
          >
            新增字段
          </Button>
        </div>
        <Table
          rowKey="onlyNumber"
          columns={fieldColumns}
          dataSource={form.fields}
          pagination={false}
          scroll={{ x: 2200 }}
          size="small"
          className={styles.fieldTable}
        />
        <div className={styles.actionBar}>
          <Space>
            <Button icon={<DownloadOutlined />} disabled={isAdd} onClick={exportJson}>
              导出json
            </Button>
            <Upload beforeUpload={importJson} showUploadList={false} accept=".json">
              <Button icon={<UploadOutlined />} disabled={isAdd}>
                导入json
              </Button>
            </Upload>
            <Button icon={<ClearOutlined />} disabled={isAdd} onClick={clearCatch}>
              清除暂存
            </Button>
            <Button icon={<SaveOutlined />} disabled={isAdd} onClick={catchData}>
              暂存
            </Button>
            <Button
              type="primary"
              icon={<CodeOutlined />}
              disabled={isAdd}
              loading={loading}
              onClick={() => enterForm(false)}
            >
              生成代码
            </Button>
            <Button
              type="primary"
              icon={<EyeOutlined />}
              loading={loading}
              onClick={() => enterForm(true)}
            >
              {isAdd ? '查看代码' : '预览代码'}
            </Button>
          </Space>
        </div>
      </Card>

      {/* 字段编辑抽屉 */}
      <Drawer
        title="组件内容"
        open={fieldDialogVisible}
        onClose={closeDialog}
        width="70%"
        extra={
          <Space>
            <Button onClick={closeDialog}>取消</Button>
            <Button type="primary" onClick={enterDialog}>
              确定
            </Button>
          </Space>
        }
      >
        <Alert
          message="id, created_at, updated_at, deleted_at 会自动生成请勿重复创建。搜索时如果条件为LIKE只支持字符串"
          type="warning"
          showIcon
          style={{ marginBottom: 16 }}
        />
        <Form layout="vertical">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="字段名称" required>
                <Space.Compact style={{ width: '100%' }}>
                  <Input
                    value={dialogMiddle.fieldName}
                    placeholder="请输入字段名称"
                    style={{ width: '80%' }}
                    onChange={(e) => setDialogMiddle(prev => ({ ...prev, fieldName: e.target.value }))}
                  />
                  <Button style={{ width: '20%' }} onClick={autoFillField}>
                    自动填充
                  </Button>
                </Space.Compact>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="字段中文名" required>
                <Input
                  value={dialogMiddle.fieldDesc}
                  placeholder="请输入字段中文名"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, fieldDesc: e.target.value }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="字段JSON" required>
                <Input
                  value={dialogMiddle.fieldJson}
                  placeholder="请输入字段JSON"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, fieldJson: e.target.value }))}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="数据库字段名" required>
                <Input
                  value={dialogMiddle.columnName}
                  placeholder="请输入数据库字段名"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, columnName: e.target.value }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="数据库字段描述">
                <Input
                  value={dialogMiddle.comment}
                  placeholder="请输入数据库字段描述"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, comment: e.target.value }))}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="字段类型" required>
                <Select
                  value={dialogMiddle.fieldType}
                  options={typeOptions}
                  placeholder="请选择字段类型"
                  style={{ width: '100%' }}
                  onChange={(val) => {
                    setDialogMiddle(prev => ({ ...prev, fieldType: val }));
                    clearFieldTypeOptions();
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label={dialogMiddle.fieldType === 'enum' ? '枚举值' : '类型长度'}>
                <Input
                  value={dialogMiddle.dataTypeLong}
                  placeholder={dialogMiddle.fieldType === 'enum' ? "例:'北京','天津'" : '数据库类型长度'}
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, dataTypeLong: e.target.value }))}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="字段查询条件">
                <Select
                  value={dialogMiddle.fieldSearchType}
                  disabled={dialogMiddle.fieldType === 'json'}
                  allowClear
                  style={{ width: '100%' }}
                  placeholder="请选择字段查询条件"
                  onChange={(val) => setDialogMiddle(prev => ({ ...prev, fieldSearchType: val }))}
                >
                  {typeSearchOptions.map(opt => (
                    <Select.Option
                      key={opt.value}
                      value={opt.value}
                      disabled={canSelect(dialogMiddle.fieldType, opt.value)}
                    >
                      {opt.label}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="关联字典">
                <Select
                  value={dialogMiddle.dictType}
                  disabled={dialogMiddle.fieldType !== 'string' && dialogMiddle.fieldType !== 'array'}
                  allowClear
                  style={{ width: '100%' }}
                  placeholder="请选择字典"
                  onChange={(val) => setDialogMiddle(prev => ({ ...prev, dictType: val }))}
                >
                  {dictOptions.map((dict: any) => (
                    <Select.Option key={dict.type} value={dict.type}>
                      {`${dict.type}(${dict.name})`}
                    </Select.Option>
                  ))}
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="默认值">
                <Input
                  value={dialogMiddle.defaultValue}
                  placeholder="请输入默认值"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, defaultValue: e.target.value }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="索引类型">
                <Select
                  value={dialogMiddle.fieldIndexType}
                  disabled={dialogMiddle.fieldType === 'json'}
                  options={typeIndexOptions}
                  placeholder="请选择字段索引类型"
                  allowClear
                  style={{ width: '100%' }}
                  onChange={(val) => setDialogMiddle(prev => ({ ...prev, fieldIndexType: val }))}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="校验失败文案">
                <Input
                  value={dialogMiddle.errorText}
                  placeholder="请输入校验失败时的提示文案"
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, errorText: e.target.value }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={4}>
              <Form.Item label="主键">
                <Checkbox
                  checked={dialogMiddle.primaryKey}
                  onChange={(e) => setDialogMiddle(prev => ({ ...prev, primaryKey: e.target.checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="前端新建/编辑">
                <Switch
                  checked={dialogMiddle.form}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, form: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="前端表格列">
                <Switch
                  checked={dialogMiddle.table}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, table: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="前端详情">
                <Switch
                  checked={dialogMiddle.desc}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, desc: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="导入/导出">
                <Switch
                  checked={dialogMiddle.excel}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, excel: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="是否排序">
                <Switch
                  checked={dialogMiddle.sort}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, sort: checked }))}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={4}>
              <Form.Item label="是否必填">
                <Switch
                  checked={dialogMiddle.require}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, require: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="是否可清空">
                <Switch
                  checked={dialogMiddle.clearable}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, clearable: checked }))}
                />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item label="隐藏查询条件">
                <Switch
                  checked={dialogMiddle.fieldSearchHide}
                  disabled={!dialogMiddle.fieldSearchType}
                  onChange={(checked) => setDialogMiddle(prev => ({ ...prev, fieldSearchHide: checked }))}
                />
              </Form.Item>
            </Col>
          </Row>
        </Form>
        
        {/* 数据源配置 */}
        <Collapse
          activeKey={dataSourceCollapsed}
          onChange={(keys) => setDataSourceCollapsed(keys as string[])}
          style={{ marginTop: 16 }}
        >
          <Panel
            header="数据源配置（此配置为高级配置，如编程基础不牢，可能导致自动化代码不可用）"
            key="dataSource"
          >
            <Row gutter={8}>
              <Col span={4}>
                <Select
                  value={dialogMiddle.dataSource?.dbName}
                  placeholder="数据库【不填则为KRA库】"
                  allowClear
                  style={{ width: '100%' }}
                  onChange={handleDataSourceDbChange}
                >
                  {dbList.map((db) => (
                    <Select.Option key={db.aliasName} value={db.aliasName} disabled={db.disable}>
                      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <span>{db.aliasName}</span>
                        <span style={{ color: '#8492a6', fontSize: 13 }}>{db.dbName}</span>
                      </div>
                    </Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={4}>
                <Select
                  value={dialogMiddle.dataSource?.association}
                  placeholder="关联模式"
                  style={{ width: '100%' }}
                  onChange={handleAssociationChange}
                >
                  <Select.Option value={1}>一对一</Select.Option>
                  <Select.Option value={2}>一对多</Select.Option>
                </Select>
              </Col>
              <Col span={5}>
                <Select
                  value={dialogMiddle.dataSource?.table}
                  placeholder="请选择数据源表"
                  allowClear
                  showSearch
                  style={{ width: '100%' }}
                  onFocus={() => getDBTableListFunc()}
                  onChange={(val) => selectDataSourceTable(val)}
                  onClear={clearDataSourceAccess}
                >
                  {dbTableList.map((t: any) => (
                    <Select.Option key={t.tableName} value={t.tableName}>
                      {t.tableName}
                    </Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={5}>
                <Select
                  value={dialogMiddle.dataSource?.value}
                  placeholder="请先选择需要存储的数据"
                  style={{ width: '100%' }}
                  onChange={(val) => setDialogMiddle(prev => ({
                    ...prev,
                    dataSource: { ...prev.dataSource!, value: val },
                  }))}
                >
                  {dbColumnList.map((col: any) => (
                    <Select.Option key={col.columnName} value={col.columnName}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>
                          <Tag color={col.isPrimary ? 'blue' : 'default'} style={{ marginRight: 4 }}>
                            {col.isPrimary ? '主键' : '非主键'}
                          </Tag>
                          {col.columnName}
                        </span>
                        <span style={{ color: '#8492a6', fontSize: 12 }}>
                          {col.type}{col.comment ? ` - ${col.comment}` : ''}
                        </span>
                      </div>
                    </Select.Option>
                  ))}
                </Select>
              </Col>
              <Col span={5}>
                <Select
                  value={dialogMiddle.dataSource?.label}
                  placeholder="请先选择需要展示的数据"
                  style={{ width: '100%' }}
                  onChange={(val) => setDialogMiddle(prev => ({
                    ...prev,
                    dataSource: { ...prev.dataSource!, label: val },
                  }))}
                >
                  {dbColumnList.map((col: any) => (
                    <Select.Option key={col.columnName} value={col.columnName}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                        <span>
                          <Tag color={col.isPrimary ? 'blue' : 'default'} style={{ marginRight: 4 }}>
                            {col.isPrimary ? '主键' : '非主键'}
                          </Tag>
                          {col.columnName}
                        </span>
                        <span style={{ color: '#8492a6', fontSize: 12 }}>
                          {col.type}{col.comment ? ` - ${col.comment}` : ''}
                        </span>
                      </div>
                    </Select.Option>
                  ))}
                </Select>
              </Col>
            </Row>
          </Panel>
        </Collapse>
      </Drawer>

      {/* 预览抽屉 */}
      <Drawer
        title="代码预览"
        open={previewVisible}
        onClose={() => setPreviewVisible(false)}
        width="85%"
        destroyOnClose
      >
        <CodePreview previewCode={previewCode} isAdd={isAdd} />
      </Drawer>
    </PageContainer>
  );
};

export default AutoCodePage;