import { ComponentInfo } from '@easytwin/core';
import { BatchModelOutlined } from '@easyv/react-icons';
import { Form, Input, InputNumber } from 'antd';
import { BlurInput, BlurInputNumber, ProIuputNumber } from '@/components';

interface BatchModelConfig {
  component: ComponentInfo;
}
export default function({ component }: BatchModelConfig) {
  const [form] = Form.useForm();
  return (
    <div className="h-full flex flex-col">
      {/* title */}
      <div className="p-3 border-b border-b-1 border-borderColorBase">
        <div className="text-white inline-flex items-center gap-x-2">
          <span className="text-primary text-base anticon">
            <BatchModelOutlined className="anticon" />
          </span>
          <span>批量创建_{component.name}</span>
        </div>
        <div>批量创建模型体(指定个数)</div>
      </div>
      {/* form */}
      <div className="flex-auto overflow-y-auto py-2 px-4">
        <Form
          className="!px-1"
          form={form}
          labelCol={{
            span: 6,
          }}
          wrapperCol={{
            span: 18,
          }}
          labelAlign="left"
          colon={false}
          // onValuesChange={handleVlaueChange}
        >
          {/* scale */}
          <Form.Item label="线路长度" className="!mb-2">
            <BlurInput suffix="m" />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};