import React, { useState, useEffect } from 'react';
import { Form, Input, Button, Row, Col, Select, Radio, Checkbox } from 'antd';
import styles from './addForm.less';
import PicturesWall from '@/components/Upload/index';
import EditeConfigWrapper from './editConfigFileWrapper';
import CheckList from './checkBox';

const { Item } = Form;
const { Option } = Select;
const EditForm = props => {
  const {
    submitCallback,
    nodeType,
    info,
    configFiles,
    valueCallback = () => { },
    productList,
  } = props;
  const [form] = Form.useForm();
  const [otherForm] = Form.useForm();
  const layout = {
    layout: 'horizontal',
    labelCol: { span: 2 },
    wrapperCol: { span: 21, offset: 0 },
  };
  // 回显表单
  useEffect(() => {
    form.resetFields();
    otherForm.resetFields();
  }, [info]);
  useEffect(() => {
    const targetForm = nodeType === 1 ? form : otherForm;
    let arr = Object.keys(targetForm.getFieldsValue());
    let obj = {};
    arr.map(i => {
      obj[i] = info[i];
    });
    targetForm.setFieldsValue({ ...obj, shortName: info.menuShortName });
  }, [info]);

  const submit = () => {
    const targetForm = nodeType === 1 ? form : otherForm;
    let obj = targetForm.getFieldsValue();
    submitCallback(obj);
  };

  const onFinish = val => {
    submit();
  };
  const radioChange = e => { };
  return (
    <div style={{ marginTop: '10px' }}>
      {nodeType === 1 && (
        <Form
          form={form}
          name="editGroup"
          {...layout}
          className={styles.formStyle}
          onFinish={onFinish}
        >
          <Item
            label="菜单名称"
            name="menuName"
            rules={[
              {
                required: true,
                message: '请输入菜单名称',
              },
            ]}
          >
            <Input placeholder="请输入菜单名称" />
          </Item>
          <Item label="菜单别名" name="shortName">
            <Input placeholder="请输入菜单别名" />
          </Item>
          <Item label="产品类型：" name="product">
            <Select placeholder="请选择产品类型" allowClear>
              {productList &&
                productList.length > 0 &&
                productList.map(item => (
                  <Option value={item.PackageName} key={item.PackageName}>
                    {item.ProductName || ''}
                  </Option>
                ))}
            </Select>
          </Item>
          <Item
            label="菜单图标"
            name="imageUrl"
            rules={[
              {
                required: true,
                message: '请选择菜单图标',
              },
            ]}
          >
            <PicturesWall picType="menuNew" />
          </Item>
          <Item label="菜单隐藏" name="hideInMenu" initialValue={false}>
            <Radio.Group onChange={radioChange}>
              <Radio value>是</Radio>
              <Radio value={false}>否</Radio>
            </Radio.Group>
          </Item>
          <Item
            label="功能路径"
            name="pageUrl"
            rules={[
              {
                required: true,
                message: '请输入功能路径',
              },
            ]}
          >
            <Input placeholder="请输入功能路径" />
          </Item>
          <Item label="配置文件" name="config">
            <EditeConfigWrapper>
              <Select
                allowClear
                showSearch
                filterOption={(input, option) =>
                  option.children.toLowerCase().indexOf(input.toLowerCase()) >=
                  0
                }
              >
                {configFiles.map(c => (
                  <Select.Option key={c.text} value={c.value}>
                    {c.text}
                  </Select.Option>
                ))}
              </Select>
            </EditeConfigWrapper>
          </Item>
          <CheckList
            info={info}
            nodeType={nodeType}
            valueCallback={valueCallback}
          />
          <Item wrapperCol={{ offset: 10 }} style={{ marginTop: '20px' }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      )}

      {nodeType === 2 && (
        <Form
          form={otherForm}
          name="editMenu"
          {...layout}
          onFinish={onFinish}
          className={styles.formStyle}
        >
          <Item
            label="菜单组名称"
            name="menuName"
            rules={[
              {
                required: true,
                message: '请输入菜单组名称',
              },
            ]}
          >
            <Input />
          </Item>
          <Item label="菜单组别名" name="shortName">
            <Input placeholder="请输入菜单组别名" />
          </Item>
          <Item
            label="菜单组图标"
            name="imageUrl"
            rules={[
              {
                required: true,
                message: '请选择菜单组图标',
              },
            ]}
          >
            <PicturesWall picType="menuNew" />
          </Item>
          <Item wrapperCol={{ offset: 10 }} style={{ marginTop: '40px' }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Item>
        </Form>
      )}
    </div>
  );
};
export default EditForm;
