/**
 * 右侧属性面板
 * 配置选中字段的属性
 */

import React, { useContext } from 'react';
import { ComponentsContext } from '../Designer';
import {
  Form,
  Input,
  InputNumber,
  Switch,
  Radio,
  Button,
  Space,
  Tabs,
  Typography,
  Divider,
  Select,
} from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import type { FieldConfig, FormConfig } from '../types';
import { DataSourceType, CascadeDataSourceType } from '@/domain/dataSource';
import CascadeOptionEditor from './CascadeOptionEditor';
import ValidationRuleEditor from './ValidationRuleEditor';
import LinkageRuleEditor from './LinkageRuleEditor';

const { Text } = Typography;

interface PropertyPanelProps {
  selectedField: FieldConfig | null;
  formConfig: FormConfig;
  onFieldChange: (field: FieldConfig) => void;
  onFormConfigChange: (newConfig: Partial<FormConfig>) => void;
  allFields?: FieldConfig[];  // 所有字段，用于联动规则配置
  fieldNames?: Map<string, string[]>;  // 字段名映射，用于冲突检测
}

const PropertyPanel: React.FC<PropertyPanelProps> = ({
  selectedField,
  formConfig,
  onFieldChange,
  onFormConfigChange,
  allFields = [],
  fieldNames,
}) => {
  const [form] = Form.useForm();
  
  // 🔌 获取所有组件（包括扩展组件）- 必须在顶层调用 useContext
  const allComponents = useContext(ComponentsContext);

  React.useEffect(() => {
    if (selectedField) {
      // 确保嵌套对象被正确设置到表单
      const formValues: any = {
        ...selectedField,
        apiDataSource: selectedField.apiDataSource || {
          url: '',
          method: 'GET',
          dataPath: '',
          labelField: '',
          valueField: '',
        },
        predefinedDataSource: selectedField.predefinedDataSource || {
          sourceType: '',
        },
        predefinedCascadeDataSource: selectedField.predefinedCascadeDataSource || {
          sourceType: '',
        },
        validationRules: selectedField.validationRules || [],
        linkageRules: selectedField.linkageRules || [],
      };
      
      form.setFieldsValue(formValues);
    }
  }, [selectedField, form]);

  const handleFieldUpdate = (changedValues: any) => {
    if (selectedField) {
      // 深度合并，特别处理 apiDataSource 嵌套对象
      let updatedField = { ...selectedField };
      
      // 如果改变的是数据源类型
      if ('dataSourceType' in changedValues) {
        updatedField.dataSourceType = changedValues.dataSourceType;
        
        // 切换到 API 数据源时，初始化 apiDataSource 对象
        if (changedValues.dataSourceType === 'api' && !updatedField.apiDataSource) {
          updatedField.apiDataSource = {
            url: '',
            method: 'GET',
            dataPath: '',
            labelField: '',
            valueField: '',
          };
          console.log('🔄 切换到 API 数据源，已初始化配置对象');
        }
        
        // 切换到预定义数据源时，初始化 predefinedDataSource 对象
        if (changedValues.dataSourceType === 'predefined' && !updatedField.predefinedDataSource) {
          updatedField.predefinedDataSource = {
            sourceType: '',
          };
          console.log('🔄 切换到预定义数据源，已初始化配置对象');
        }
      }
      
      // 如果改变的是 apiDataSource 的子字段
      if ('apiDataSource' in changedValues) {
        updatedField.apiDataSource = {
          ...updatedField.apiDataSource,
          ...changedValues.apiDataSource,
        };
        console.log('💾 API 数据源配置已更新:', updatedField.apiDataSource);
      }
      
      // 如果改变的是 predefinedDataSource 的子字段
      if ('predefinedDataSource' in changedValues) {
        updatedField.predefinedDataSource = {
          ...updatedField.predefinedDataSource,
          ...changedValues.predefinedDataSource,
        };
        console.log('💾 预定义数据源配置已更新:', updatedField.predefinedDataSource);
      }
      
      // 如果改变的是 predefinedCascadeDataSource 的子字段
      if ('predefinedCascadeDataSource' in changedValues) {
        updatedField.predefinedCascadeDataSource = {
          ...updatedField.predefinedCascadeDataSource,
          ...changedValues.predefinedCascadeDataSource,
        };
        console.log('💾 预定义级联数据源配置已更新:', updatedField.predefinedCascadeDataSource);
      }
      
      // 合并其他字段（cascadeOptions 现在直接作为对象处理，不需要特殊处理）
      Object.keys(changedValues).forEach(key => {
        if (key !== 'dataSourceType' && 
            key !== 'apiDataSource' && 
            key !== 'predefinedDataSource' && 
            key !== 'predefinedCascadeDataSource') {
          (updatedField as any)[key] = changedValues[key];
          
        }
      });
      
      onFieldChange(updatedField);
    }
  };

  // 添加选项
  const addOption = () => {
    if (selectedField && selectedField.options) {
      const newOptions = [
        ...selectedField.options,
        { label: `选项${selectedField.options.length + 1}`, value: `${selectedField.options.length + 1}` },
      ];
      onFieldChange({ ...selectedField, options: newOptions });
    }
  };

  // 删除选项
  const deleteOption = (index: number) => {
    if (selectedField && selectedField.options) {
      const newOptions = selectedField.options.filter((_, i) => i !== index);
      onFieldChange({ ...selectedField, options: newOptions });
    }
  };

  // 更新选项
  const updateOption = (index: number, field: 'label' | 'value', value: string) => {
    if (selectedField && selectedField.options) {
      const newOptions = [...selectedField.options];
      newOptions[index] = { ...newOptions[index], [field]: value };
      onFieldChange({ ...selectedField, options: newOptions });
    }
  };

  const renderFieldProperties = () => {
    if (!selectedField) {
      return (
        <div style={{ padding: 24, textAlign: 'center', color: '#8c8c8c' }}>
          请从画布中选择一个字段
        </div>
      );
    }

    // 🔌 检查是否有自定义配置组件（插件式扩展）
    const componentMeta = allComponents.find(c => c.type === selectedField.type);
    
    console.log('🔍 PropertyPanel Debug:', {
      selectedFieldType: selectedField.type,
      allComponentsCount: allComponents.length,
      allComponentTypes: allComponents.map(c => c.type),
      componentMeta: componentMeta ? {
        type: componentMeta.type,
        label: componentMeta.label,
        hasPropertyConfig: !!componentMeta.PropertyConfigComponent
      } : null
    });
    
    if (componentMeta?.PropertyConfigComponent) {
      const CustomConfig = componentMeta.PropertyConfigComponent;
      console.log('✅ 使用自定义配置组件:', componentMeta.type);
      return (
        <div style={{ padding: 16 }}>
          <CustomConfig 
            field={selectedField} 
            onChange={onFieldChange}
          />
        </div>
      );
    }
    
    console.log('⚠️ 未找到自定义配置组件，使用默认配置');

    const hasOptions = ['select', 'radio', 'checkbox'].includes(selectedField.type);
    const isCascader = selectedField.type === 'cascader';

    return (
      <Form
        form={form}
        layout="vertical"
        onValuesChange={handleFieldUpdate}
        style={{ padding: 16 }}
      >
        {/* 布局组件不显示字段标签和字段名称 */}
        {selectedField.type !== 'divider' && selectedField.type !== 'grid' && selectedField.type !== 'text' && (
          <>
            <Form.Item label="字段标签" name="label" rules={[{ required: true }]}>
              <Input placeholder="请输入字段标签" />
            </Form.Item>

            <Form.Item 
              label="字段名称" 
              name="name" 
              rules={[
                { required: true, message: '请输入字段名称' },
                {
                  validator: (_, value) => {
                    if (!value || !value.trim()) {
                      return Promise.resolve();
                    }
                    
                    // 检查是否与其他字段冲突
                    if (fieldNames) {
                      const existingFieldIds = fieldNames.get(value) || [];
                      const hasDuplicate = existingFieldIds.some(id => id !== selectedField.id);
                      
                      if (hasDuplicate) {
                        return Promise.reject(new Error('字段名称与其他字段重复，请修改'));
                      }
                    }
                    
                    return Promise.resolve();
                  }
                }
              ]}
            >
              <Input placeholder="请输入字段名称（英文）" />
            </Form.Item>
          </>
        )}

        {/* 只有实际表单字段才显示这些属性 */}
        {selectedField.type !== 'divider' && 
         selectedField.type !== 'grid' && 
         selectedField.type !== 'text' && (
          <>
            <Form.Item label="占位提示" name="placeholder">
              <Input placeholder="请输入占位提示" />
            </Form.Item>

            <Form.Item label="是否必填" name="required" valuePropName="checked">
              <Switch />
            </Form.Item>

            <Form.Item label="是否禁用" name="disabled" valuePropName="checked">
              <Switch />
            </Form.Item>

            <Form.Item label="默认值" name="defaultValue">
              {selectedField.type === 'number' ? (
                <InputNumber style={{ width: '100%' }} placeholder="请输入默认值" />
              ) : selectedField.type === 'switch' ? (
                <Switch />
              ) : selectedField.type === 'checkbox' || selectedField.type === 'select' && selectedField.multiple ? (
                <Select mode="tags" style={{ width: '100%' }} placeholder="请选择默认值" options={selectedField.options} />
              ) : selectedField.type === 'select' || selectedField.type === 'radio' ? (
                <Select style={{ width: '100%' }} placeholder="请选择默认值" options={selectedField.options} />
              ) : selectedField.type === 'date' || selectedField.type === 'datetime' || selectedField.type === 'time' ? (
                <Input placeholder="请输入默认值（如：2024-01-01）" />
              ) : selectedField.type === 'slider' ? (
                <InputNumber style={{ width: '100%' }} placeholder="请输入默认值" />
              ) : selectedField.type === 'rate' ? (
                <InputNumber style={{ width: '100%' }} min={0} max={5} placeholder="请输入默认值（0-5）" />
              ) : selectedField.type === 'textarea' ? (
                <Input.TextArea rows={3} placeholder="请输入默认值" />
              ) : (
                <Input placeholder="请输入默认值" />
              )}
            </Form.Item>
          </>
        )}

        {selectedField.type === 'textarea' && (
          <Form.Item label="行数" name="rows">
            <InputNumber min={1} max={20} style={{ width: '100%' }} />
          </Form.Item>
        )}

        {(selectedField.type === 'number' || selectedField.type === 'slider') && (
          <>
            <Form.Item label="最小值" name="min">
              <InputNumber style={{ width: '100%' }} />
            </Form.Item>
            <Form.Item label="最大值" name="max">
              <InputNumber style={{ width: '100%' }} />
            </Form.Item>
          </>
        )}

        {selectedField.type === 'upload' && (
          <Form.Item label="最大文件数" name="maxCount">
            <InputNumber min={1} style={{ width: '100%' }} />
          </Form.Item>
        )}

        {selectedField.type === 'text' && (
          <>
            <Form.Item label="文本内容" name="content">
              <Input.TextArea rows={3} placeholder="请输入文本内容" />
            </Form.Item>
            <Form.Item label="文字对齐" name="textAlign">
              <Radio.Group>
                <Radio.Button value="left">靠左</Radio.Button>
                <Radio.Button value="center">居中</Radio.Button>
                <Radio.Button value="right">靠右</Radio.Button>
              </Radio.Group>
            </Form.Item>
            <Form.Item label="字体大小" name="fontSize">
              <InputNumber 
                min={12} 
                max={72} 
                placeholder="字体大小（px）" 
                style={{ width: '100%' }}
                addonAfter="px"
              />
            </Form.Item>
            <Form.Item label="字体颜色" name="textColor">
              <Input type="color" style={{ width: '100%' }} />
            </Form.Item>
          </>
        )}

        {selectedField.type === 'grid' && (
          <>
            <Divider style={{ margin: '16px 0' }} />
            <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text strong>列配置项</Text>
              <Button
                type="dashed"
                size="small"
                icon={<PlusOutlined />}
                onClick={() => {
                  // 如果没有配置 columnSpans，先初始化为当前列数的平均分配
                  const currentSpans = selectedField.columnSpans || (() => {
                    const cols = selectedField.columns || 2;
                    const avgSpan = Math.floor(24 / cols);
                    return Array(cols).fill(avgSpan);
                  })();
                  
                  const total = currentSpans.reduce((a, b) => a + b, 0);
                  if (total >= 24) {
                    return;
                  }
                  const newSpan = Math.min(12, 24 - total);
                  const newSpans = [...currentSpans, newSpan];
                  const currentChildren = selectedField.children || [];
                  const newChildren = [...currentChildren, []];
                  
                  onFieldChange({
                    ...selectedField,
                    columnSpans: newSpans,
                    columns: newSpans.length,
                    children: newChildren,
                  });
                }}
                disabled={
                  selectedField.columnSpans && 
                  selectedField.columnSpans.reduce((a: number, b: number) => a + b, 0) >= 24
                }
              >
                添加列
              </Button>
            </div>
            
            <Space direction="vertical" style={{ width: '100%' }} size="small">
              {(selectedField.columnSpans || [12, 12]).map((span, index) => (
                <Space key={index} style={{ display: 'flex', width: '100%' }} align="center">
                  <Text style={{ minWidth: 20 }}>{index + 1}.</Text>
                  <InputNumber
                    min={1}
                    max={24}
                    value={span}
                    onChange={(value) => {
                      if (value) {
                        const currentSpans = selectedField.columnSpans || [12, 12];
                        const newSpans = [...currentSpans];
                        newSpans[index] = value;
                        onFieldChange({
                          ...selectedField,
                          columnSpans: newSpans,
                        });
                      }
                    }}
                    style={{ flex: 1 }}
                    addonAfter="/24"
                  />
                  <Button
                    icon={<DeleteOutlined />}
                    danger
                    onClick={() => {
                      const currentSpans = selectedField.columnSpans || [12, 12];
                      const newSpans = currentSpans.filter((_, i) => i !== index);
                      const newChildren = (selectedField.children || [[], []]).filter((_, i) => i !== index);
                      
                      // 如果删除后没有列了，重置为默认的2列配置
                      if (newSpans.length === 0) {
                        onFieldChange({
                          ...selectedField,
                          columnSpans: [12, 12],
                          columns: 2,
                          children: [[], []],
                        });
                      } else {
                        onFieldChange({
                          ...selectedField,
                          columnSpans: newSpans,
                          columns: newSpans.length,
                          children: newChildren,
                        });
                      }
                    }}
                  />
                </Space>
              ))}
            </Space>
            <div style={{ marginTop: 8, fontSize: 12, color: '#8c8c8c' }}>
              总宽度：{(selectedField.columnSpans || [12, 12]).reduce((a: number, b: number) => a + b, 0)} / 24
            </div>
            
            <Divider style={{ margin: '16px 0' }} />
            <Form.Item label="间距" name="gutter">
              <InputNumber min={0} max={48} style={{ width: '100%' }} addonAfter="px" />
            </Form.Item>
          </>
        )}

        {selectedField.type === 'checkbox' && (
          <Form.Item label="布局方式" name="checkboxLayout">
            <Radio.Group>
              <Radio.Button value="horizontal">行内</Radio.Button>
              <Radio.Button value="vertical">块级</Radio.Button>
            </Radio.Group>
          </Form.Item>
        )}

        {/* 🎯 审批人选择器专属配置 */}
        {selectedField.type === 'approver-selector' && (
          <>
            <Form.Item label="选择模式" name="selectionMode">
              <Radio.Group>
                <Radio.Button value="user">按用户</Radio.Button>
                <Radio.Button value="role">按角色</Radio.Button>
                <Radio.Button value="department">按部门</Radio.Button>
              </Radio.Group>
            </Form.Item>

            <Form.Item label="审批模式" name="approvalMode">
              <Radio.Group>
                <Radio.Button value="single">单人审批</Radio.Button>
                <Radio.Button value="countersign">会签</Radio.Button>
                <Radio.Button value="or-sign">或签</Radio.Button>
              </Radio.Group>
            </Form.Item>

            <div style={{ padding: '8px 12px', background: '#f0f5ff', borderRadius: 4, marginBottom: 16 }}>
              <Text type="secondary" style={{ fontSize: 12 }}>
                • 单人审批：仅需一人审批<br />
                • 会签：所有审批人都必须同意<br />
                • 或签：任一审批人同意即可
              </Text>
            </div>
          </>
        )}

        {hasOptions && (
          <div>
            <Divider style={{ margin: '16px 0' }} />
            
            {/* 数据源类型选择 */}
            <Form.Item label="数据源类型" name="dataSourceType">
              <Radio.Group buttonStyle="solid" style={{ display: 'flex', flexWrap: 'nowrap' }}>
                <Radio.Button value="static" style={{ flex: 1, textAlign: 'center' }}>静态数据</Radio.Button>
                <Radio.Button value="predefined" style={{ flex: 1, textAlign: 'center' }}>预定义</Radio.Button>
                <Radio.Button value="api" style={{ flex: 1, textAlign: 'center' }}>自定义</Radio.Button>
              </Radio.Group>
            </Form.Item>

            {/* 静态数据配置 */}
            {selectedField.dataSourceType === 'static' && selectedField.options && (
              <div>
                <div style={{ marginBottom: 8, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <Text strong>选项配置</Text>
                  <Button
                    type="dashed"
                    size="small"
                    icon={<PlusOutlined />}
                    onClick={addOption}
                  >
                    添加选项
                  </Button>
                </div>
                <Space direction="vertical" style={{ width: '100%' }} size="small">
                  {selectedField.options.map((option, index) => (
                    <div key={index} style={{ display: 'flex', gap: 8 }}>
                      <Input
                        placeholder="标签"
                        value={option.label}
                        onChange={(e) => updateOption(index, 'label', e.target.value)}
                      />
                      <Input
                        placeholder="值"
                        value={option.value}
                        onChange={(e) => updateOption(index, 'value', e.target.value)}
                      />
                      <Button
                        danger
                        icon={<DeleteOutlined />}
                        onClick={() => deleteOption(index)}
                      />
                    </div>
                  ))}
                </Space>
              </div>
            )}

            {/* 预定义方法配置 */}
            {selectedField.dataSourceType === 'predefined' && (
              <div>
                <Text strong>预定义方法</Text>
                <div style={{ marginTop: 12 }}>
                  <Form.Item 
                    label="数据源" 
                    name={['predefinedDataSource', 'sourceType']}
                    rules={[{ required: true, message: '请选择数据源' }]}
                  >
                    <Select placeholder="选择预定义数据源">
                      {Object.keys(DataSourceType).map((key) => {
                        const sourceType = DataSourceType[key as keyof typeof DataSourceType];
                        return (
                          <Select.Option key={sourceType} value={sourceType}>
                            {key.replace(/_/g, ' ')}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                  
                  <div style={{ 
                    padding: 12, 
                    background: '#f5f5f5', 
                    borderRadius: 4, 
                    fontSize: 12,
                    color: '#666'
                  }}>
                    <div><strong>💡 提示：</strong></div>
                    <div style={{ marginTop: 4 }}>使用系统预定义的数据源方法，无需配置URL和字段映射</div>
                  </div>
                </div>
              </div>
            )}

            {/* API 数据源配置 */}
            {selectedField.dataSourceType === 'api' && (
              <div>
                <Text strong>接口配置</Text>
                <div style={{ marginTop: 12 }}>
                  <Form.Item 
                    label="接口地址" 
                    name={['apiDataSource', 'url']}
                    rules={[{ required: true, message: '请输入接口地址' }]}
                  >
                    <Input placeholder="如：/api/v1/dict/status" />
                  </Form.Item>
                  
                  <Form.Item label="请求方法" name={['apiDataSource', 'method']}>
                    <Select placeholder="选择请求方法" defaultValue="GET">
                      <Select.Option value="GET">GET</Select.Option>
                      <Select.Option value="POST">POST</Select.Option>
                    </Select>
                  </Form.Item>
                  
                  <Form.Item 
                    label="数据路径" 
                    name={['apiDataSource', 'dataPath']}
                    tooltip="从接口响应中提取数组的路径。如响应为 {data: [...]}，则填 'data'；如为 {result: {list: [...]}}，则填 'result.list'。留空表示直接返回数组"
                  >
                    <Input placeholder="如：data 或 result.list（可选）" />
                  </Form.Item>
                  
                  <Form.Item 
                    label="标签字段" 
                    name={['apiDataSource', 'labelField']}
                    tooltip="数组中每个对象用作显示文本的字段名"
                    rules={[{ required: true, message: '请输入标签字段' }]}
                  >
                    <Input placeholder="如：name" />
                  </Form.Item>
                  
                  <Form.Item 
                    label="值字段" 
                    name={['apiDataSource', 'valueField']}
                    tooltip="数组中每个对象用作实际值的字段名"
                    rules={[{ required: true, message: '请输入值字段' }]}
                  >
                    <Input placeholder="如：id" />
                  </Form.Item>
                </div>
              </div>
            )}
          </div>
        )}

        {/* 级联选择器专用配置 */}
        {isCascader && (
          <div>
            <Divider style={{ margin: '16px 0' }} />
            
            {/* 数据源类型选择（级联选择器只支持静态和预定义） */}
            <Form.Item label="数据源类型" name="dataSourceType">
              <Radio.Group buttonStyle="solid" style={{ display: 'flex', flexWrap: 'nowrap' }}>
                <Radio.Button value="static" style={{ flex: 1, textAlign: 'center' }}>静态数据</Radio.Button>
                <Radio.Button value="predefined" style={{ flex: 1, textAlign: 'center' }}>预定义</Radio.Button>
              </Radio.Group>
            </Form.Item>

            {/* 静态级联数据配置 */}
            {selectedField.dataSourceType === 'static' && (
              <div>
                <Text strong>级联选项配置</Text>
                <div style={{ marginTop: 12 }}>
                  <Form.Item 
                    name="cascadeOptions"
                    tooltip="可视化配置树形结构的级联选项"
                  >
                    <CascadeOptionEditor />
                  </Form.Item>
                </div>
              </div>
            )}

            {/* 预定义级联数据源配置 */}
            {selectedField.dataSourceType === 'predefined' && (
              <div>
                <Text strong>预定义级联数据源</Text>
                <div style={{ marginTop: 12 }}>
                  <Form.Item 
                    label="数据源" 
                    name={['predefinedCascadeDataSource', 'sourceType']}
                    rules={[{ required: true, message: '请选择级联数据源' }]}
                  >
                    <Select placeholder="选择预定义级联数据源">
                      {Object.keys(CascadeDataSourceType).map((key) => {
                        const sourceType = CascadeDataSourceType[key as keyof typeof CascadeDataSourceType];
                        return (
                          <Select.Option key={sourceType} value={sourceType}>
                            {key.replace(/_/g, ' → ')}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                  
                  <div style={{ 
                    padding: 12, 
                    background: '#f5f5f5', 
                    borderRadius: 4, 
                    fontSize: 12,
                    color: '#666'
                  }}>
                    <div><strong>💡 提示：</strong></div>
                    <div style={{ marginTop: 4 }}>使用系统预定义的级联数据源，支持动态懒加载</div>
                    <div style={{ marginTop: 4 }}>例如：环境 → 项目、部门 → 用户等</div>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

        {/* 验证规则配置 - 仅表单字段显示 */}
        {selectedField.type !== 'divider' && 
         selectedField.type !== 'grid' && 
         selectedField.type !== 'text' && (
          <div>
            <Divider style={{ margin: '16px 0' }} />
            <Form.Item name="validationRules">
              <ValidationRuleEditor />
            </Form.Item>
          </div>
        )}

        {/* 联动规则配置 - 仅表单字段显示 */}
        {selectedField.type !== 'divider' && 
         selectedField.type !== 'grid' && 
         selectedField.type !== 'text' && (
          <div>
            <Divider style={{ margin: '16px 0' }} />
            <Form.Item name="linkageRules">
              <LinkageRuleEditor allFields={allFields.filter(f => f.id !== selectedField.id)} />
            </Form.Item>
          </div>
        )}
      </Form>
    );
  };

  const renderFormProperties = () => {
    return (
      <Form
        layout="vertical"
        initialValues={formConfig}
        onValuesChange={(_, allValues) => onFormConfigChange(allValues)}
        style={{ padding: 16 }}
      >
        <Form.Item label="标签对齐方式" name="labelAlign">
          <Radio.Group buttonStyle="solid">
            <Radio.Button value="left">左对齐</Radio.Button>
            <Radio.Button value="right">右对齐</Radio.Button>
            <Radio.Button value="top">顶部对齐</Radio.Button>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="表单宽度" name="formWidth">
          <InputNumber 
            min={400} 
            max={1200} 
            step={50}
            style={{ width: '100%' }} 
            addonAfter="px"
            placeholder="默认 600"
          />
        </Form.Item>

        <Form.Item label="组件尺寸" name="size">
          <Radio.Group buttonStyle="solid">
            <Radio.Button value="middle">medium</Radio.Button>
            <Radio.Button value="small">small</Radio.Button>
            <Radio.Button value="mini">mini</Radio.Button>
          </Radio.Group>
        </Form.Item>
      </Form>
    );
  };

  return (
    <div style={{
      width: 350,
      height: '100%',
      background: '#fff',
      borderLeft: '1px solid #e8e8e8',
      overflowY: 'auto',
    }}>
      <div style={{
        padding: 16,
        borderBottom: '1px solid #e8e8e8',
        background: '#fafafa',
      }}>
        <Text strong>属性配置</Text>
      </div>

      <Tabs 
        defaultActiveKey="field" 
        style={{ padding: '0 0 0 16px' }}
        items={[
          {
            key: 'field',
            label: '字段属性',
            children: renderFieldProperties(),
          },
          {
            key: 'form',
            label: '表单属性',
            children: renderFormProperties(),
          },
        ]}
      />
    </div>
  );
};

export default PropertyPanel;

