import React, { memo, RefObject, useEffect } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, InputNumber, Input, Radio, Button } from 'antd';
import Color from '../../../../core/FormComponents/Color';
import Upload from '../../../../core/FormComponents/Upload';
const RadioGroup = Radio.Group
const { TextArea } = Input;

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const PageForm = (props: any) => {
  const { config, defaultValue, onSave, uid, rightPannelRef, form, isNewPage } = props;

  const {
    getFieldDecorator,
    validateFieldsAndScroll,
    setFieldsValue,
    getFieldsValue,
  } = form


  const savePage = () => {
    form
      .validateFields()
      .then(values => {
        onSave(values, true);
        document.getElementById('Popover_button').click();
      })
      .catch(err => {
        console.log(err);
      });
  }

  return (
    <Form
      form={form}
      name={`form_pageConfig`}
      {...formItemLayout}
    >
      <Form.Item label='标题'>
        {getFieldDecorator('title', {
          initialValue: defaultValue?.title
        })(
          <Input />
        )}
      </Form.Item>
      <Form.Item label='背景色'>
        {getFieldDecorator('bgColor', {
          initialValue: defaultValue?.bgColor
        })(
          <Color />
        )}
      </Form.Item>
      <Form.Item label='背景图片'>
        {getFieldDecorator('bgImg', {
          initialValue: defaultValue?.bgImg
        })(
          <Upload isCrop={false} />
        )}
      </Form.Item>
      {/* <div style={{ textAlign: 'center', width: 300 }}>
        <Button type="primary" onClick={() => savePage()}>保存</Button>
      </div> */}
    </Form>
  );
};

export default memo(Form.create({
  onValuesChange: (props, changedValues, allValues) => {
    props?.onSave(allValues);
  }
})(PageForm));