import { Button, Form, Input, Modal, Row } from 'antd';
import Panel from '@/pages/Smart/components/Panel';

const BasicParamsForm = ({
  form,
  process,
  current,
  edit,
  loading,
  changeProcess,
  onSaveBase,
}) => {
  const base = current?.base || {};
  const params = process.base;
  const { getFieldDecorator } = form;

  const canEdit = edit && !current?.id;

  const renderFormItems = () => {
    return params.map((param, index) => {
      let key = param.name;
      return (
        <Row span={16} key={index}>
          <Form.Item label={key}>
            {getFieldDecorator(key, {
              initialValue: base[key],
              rules: [{ required: true }],
            })(
              <Input
                disabled={!canEdit}
                onChange={(e) => handleChangeProcess(key, e.target.value)}
                addonAfter={param.unit}
              />,
            )}
          </Form.Item>
        </Row>
      );
    });
  };

  const handleChangeProcess = (key, value) => {
    let data = form.getFieldsValue();
    let params = process.base.find((item) => item.name == key);
    params.value = value;

    changeProcess({ ...process });
  };
  const onSave = () => {
    Modal.confirm({
      title: '提示',
      content: '保存后无法再次修改！',
      okText: '确定',
      cancelText: '取消',
      onOk: async () => {
        let baseData = form.getFieldsValue();
        onSaveBase(baseData);
      },
    });
  };

  return (
    <Panel
      title="基础参数"
      btns={
        canEdit && (
          <Button loading={loading} onClick={onSave} type="primary">
            保存
          </Button>
        )
      }
    >
      <Form labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>
        <div>{renderFormItems()}</div>
      </Form>
    </Panel>
  );
};

export default Form.create()(BasicParamsForm);
