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

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

const PageForm = (props: any) => {
  const { isNewPage, config, defaultValue, onSave, uid, rightPannelRef, form } = 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}
    >
      {/* {isNewPage && <Form.Item label='标题'>
        {getFieldDecorator('title', {
          initialValue: defaultValue?.title
        })(
          <Input />
        )}
      </Form.Item>} */}
      <Form.Item label='在线咨询'>
        {getFieldDecorator('online_consult', {
          initialValue: defaultValue?.online_consult,
          rules: [
            {
              required: true,
              message: '请选择在线咨询'
            }
          ]
        })(
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </RadioGroup>
        )}
      </Form.Item>
      <Form.Item label='状态'>
        {getFieldDecorator('sub_status', {
          initialValue: defaultValue?.sub_status,
          rules: [
            {
              required: true,
              message: '请选择状态'
            }
          ]
        })(
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={0}>禁用</Radio>
          </RadioGroup>
        )}
      </Form.Item>
    </Form>
  );
};

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