import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col, notification } from 'antd';
import classnames from 'classnames';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
import ParmarModal from './ParmarModal';
import CheckList from './checkBox';

const { Item } = Form;
const EditForm = props => {
  const { submitCallback, nodeType, info, valueCallback = () => {} } = props;
  const [form] = Form.useForm();
  const [otherForm] = Form.useForm();
  const [showParmarModal, setShowParmarModal] = useState(false);
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 2, offset: 0 },
    wrapperCol: { span: 20 },
  };
  // 回显表单
  useEffect(() => {
    form.resetFields();
    otherForm.resetFields();
  }, [info]);
  useEffect(() => {
    if (JSON.stringify(info) != '{}') {
      let data = info.data;
      if (nodeType === 1 || nodeType === 2) {
        let arr = Object.keys(form.getFieldsValue());
        let obj = {};
        arr.map(i => {
          obj[i] = data[i];
        });
        form.setFieldsValue({ ...obj, shortName: data.menuShortName });
      }
      if (nodeType === 3 || nodeType === 4) {
        let arr = Object.keys(otherForm.getFieldsValue());
        let obj = {};
        arr.map(i => {
          obj[i] = data[i];
        });
        otherForm.setFieldsValue({ ...obj, shortName: data.menuShortName });
      }
    }
  }, [info]);

  const submit = () => {
    if (nodeType === 1 || nodeType === 2) {
      let obj = form.getFieldsValue();
      console.log(obj, '1,2');
      submitCallback(obj);
    }
    if (nodeType === 3 || nodeType === 4) {
      let obj = otherForm.getFieldsValue();
      console.log(obj, '3,4');
      submitCallback(obj);
    }
  };
  const onFinish = () => {
    submit();
  };
  // 添加功能路劲参数
  const addParama = () => {
    console.log(otherForm.getFieldValue('pageUrl'));
    if (!otherForm.getFieldValue('pageUrl')) {
      notification.error({ message: '提示', duration: 3, description: '请先填写功能路径' });
      return;
    }
    setShowParmarModal(true);
  };
  return (
    <div className={classnames({ [styles.divbox]: true })}>
      {(nodeType === 1 || nodeType === 2) && (
        <Form form={form} name="editGroup" onFinish={onFinish}>
          <Item
            label="菜单组名称"
            name="menuName"
            rules={[
              {
                required: true,
                message: '请输入菜单组名称',
              },
            ]}
          >
            <Input placeholder="请输入菜单组名称" style={{ width: '100%' }} />
          </Item>
          <Item label="菜单组别名" name="shortName" style={{ marginLeft: '11px' }}>
            <Input placeholder="请输入菜单组别名" style={{ width: '100%' }} />
          </Item>
          {nodeType === 1 && (
            <Item
              style={{ marginLeft: '14px' }}
              label="在线图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择在线图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}
          {nodeType === 1 && (
            <Item
              style={{ marginLeft: '14px' }}
              label="离线图标"
              name="offlineImgUrl"
              rules={[
                {
                  required: true,
                  message: '请选择离线图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}

          {nodeType === 2 && (
            <Item
              label="菜单组图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择菜单组图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}
          <Item label="功能参数" name="funParam" style={{ marginLeft: '26px' }}>
            <Input style={{ width: '100%' }} />
          </Item>
          <Item wrapperCol={{ offset: 10 }} style={{ marginTop: '40px' }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      )}

      {(nodeType === 3 || nodeType === 4) && (
        <Form form={otherForm} name="editMenu" onFinish={onFinish}>
          <Item
            label="菜单名称"
            name="menuName"
            rules={[
              {
                required: true,
                message: '请输入菜单名称',
              },
            ]}
          >
            <Input style={{ width: '100%' }} />
          </Item>
          <Item label="菜单别名" name="shortName" style={{ marginLeft: '11px' }}>
            <Input style={{ width: '100%' }} />
          </Item>
          {nodeType === 3 && (
            <Item
              label="在线图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择在线图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}
          {nodeType === 3 && (
            <Item
              label="离线图标"
              name="offlineImgUrl"
              rules={[
                {
                  required: true,
                  message: '请选择离线图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}
          {nodeType === 4 && (
            <Item
              label="菜单图标"
              name="imageUrl"
              rules={[
                {
                  required: true,
                  message: '请选择菜单图标',
                },
              ]}
            >
              <PicturesWall picType="androidMenu" style={{ width: '100%' }} />
            </Item>
          )}
          <Item
            name="pageUrl"
            label="功能路径"
            rules={[
              {
                required: true,
                message: '请输入功能路径',
              },
            ]}
          >
            <div style={{ display: 'flex' }}>
              <Item name="pageUrl" style={{ marginBottom: 0, width: '100%' }}>
                <Input placeholder="请输入功能路径" style={{ width: '100%' }} />
              </Item>
              <Button onClick={addParama}>参数管理</Button>
            </div>
          </Item>
          <Item label="功能参数" name="funParam" style={{ marginLeft: '11px' }}>
            <Input style={{ width: '100%' }} />
          </Item>
          <CheckList
            info={info.data ? info.data : {}}
            nodeType={nodeType}
            valueCallback={valueCallback}
            style={{ width: '100%' }}
          />
          <Item wrapperCol={{ offset: 10 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      )}
      <ParmarModal
        pageUrl={otherForm.getFieldValue('pageUrl')}
        handleCancel={() => setShowParmarModal(false)}
        visible={showParmarModal}
        parmarCallBack={url => {
          otherForm.setFieldsValue({ pageUrl: url });
          setShowParmarModal(false);
        }}
      />
    </div>
  );
};
export default EditForm;
