import React from 'react';
import { Form, Input, Switch, InputNumber, TreeSelect } from 'antd';
import type { FormInstance } from 'antd';

interface DictionaryDetailItem {
  ID: number;
  label: string;
  value: string;
  extend?: string;
  status: boolean;
  sort: number;
  parentID?: number;
  children?: DictionaryDetailItem[];
}

interface DetailFormProps {
  form: FormInstance;
  treeData: DictionaryDetailItem[];
}

const DetailForm: React.FC<DetailFormProps> = ({ form, treeData }) => {
  // 构建树形选择数据
  const buildTreeSelectData = (data: DictionaryDetailItem[]): any[] => {
    return data.map((item) => ({
      title: item.label,
      value: item.ID,
      children: item.children ? buildTreeSelectData(item.children) : undefined,
    }));
  };

  return (
    <Form form={form} layout="vertical">
      <Form.Item label="父级字典项" name="parentID">
        <TreeSelect
          placeholder="请选择父级字典项（可选）"
          allowClear
          showSearch
          treeDefaultExpandAll
          treeData={[
            { title: '无父级（根级）', value: null },
            ...buildTreeSelectData(treeData),
          ]}
          filterTreeNode={(input, node) =>
            (node?.title as string)?.toLowerCase().includes(input.toLowerCase())
          }
        />
      </Form.Item>
      <Form.Item
        label="展示值"
        name="label"
        rules={[{ required: true, message: '请输入展示值' }]}
      >
        <Input placeholder="请输入展示值" />
      </Form.Item>
      <Form.Item
        label="字典值"
        name="value"
        rules={[{ required: true, message: '请输入字典值' }]}
      >
        <Input placeholder="请输入字典值" />
      </Form.Item>
      <Form.Item label="扩展值" name="extend">
        <Input placeholder="请输入扩展值" />
      </Form.Item>
      <Form.Item label="启用状态" name="status" valuePropName="checked" initialValue={true}>
        <Switch checkedChildren="开启" unCheckedChildren="停用" />
      </Form.Item>
      <Form.Item
        label="排序标记"
        name="sort"
        rules={[{ required: true, message: '请输入排序标记' }]}
        initialValue={0}
      >
        <InputNumber placeholder="排序标记" style={{ width: '100%' }} />
      </Form.Item>
    </Form>
  );
};

export default DetailForm;
