import { Col, Form, Input, InputNumber, Modal, Row, Select } from 'antd';
// import { InputNumber } from 'antd/lib';
import React from 'react';

const { Option } = Select;

interface EditModalProps {
  visible: boolean;
  detialData: any;
  onCancel: () => void;
  onOk: (values: any) => void;
}

const EditModal: React.FC<EditModalProps> = ({
  detialData,
  visible,
  onCancel,
  onOk,
}) => {
  const [form] = Form.useForm();

  const handleOk = () => {
    form
      .validateFields()
      .then((values) => {
        onOk(values);
      })
      .catch((error) => {
        console.error('表单验证失败:', error);
      });
  };

  return (
    <Modal
      title="编辑信息"
      open={visible}
      onCancel={onCancel}
      onOk={handleOk}
      okText="确定"
      cancelText="取消"
    >
      <Form form={form} labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
        {/* 名称字段 */}
        <Form.Item
          name="name"
          label="名称"
          rules={[{ required: true, message: '请输入名称' }]}
        >
          <Input />
        </Form.Item>

        {/* CPU 字段 */}
        <Form.Item label="CPU">
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name={['cpu', 'size']}
                rules={[{ required: true, message: '请输入CPU大小' }]}
                noStyle
              >
                <InputNumber
                  precision={0}
                  addonAfter={<span>颗</span>}
                  style={{ width: '190px' }}
                  placeholder="CPU大小"
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name={['cpu', 'cores']}
                rules={[{ required: true, message: '请输入CPU内核数' }]}
                noStyle
              >
                <InputNumber
                  precision={0}
                  addonAfter={<span>核</span>}
                  style={{ width: '190px' }}
                  placeholder="CPU内核数"
                />
              </Form.Item>
            </Col>
          </Row>
        </Form.Item>

        {/* 内存字段 */}
        <Form.Item
          name="memory_total"
          label="内存"
          rules={[{ required: true, message: '请输入内存' }]}
        >
          <InputNumber
            precision={0}
            addonAfter={<span>CB</span>}
            style={{ width: '393.33px' }}
            placeholder="内存"
          />
        </Form.Item>

        {/* 存储卷字段 */}
        <Form.Item
          name="storageVolume"
          label="存储卷"
          rules={[{ required: true, message: '请输入存储卷信息' }]}
        >
          <Input disabled />
        </Form.Item>

        {/* 描述字段 */}
        <Form.Item name="description" label="描述">
          <Input.TextArea />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default EditModal;