import React, { useState, useEffect, forwardRef, useRef, useImperativeHandle } from 'react';
import { Button, Modal, Radio, Space, Form, InputNumber, Switch, Input } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import styles from '../common.less';
import { ENUM_SET_REPERTORY } from '../config';


const AddMultiSpecModal = (props, ref) => {
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');
  const [multiRepertory, setMultiRepertory] = useState(false);

  // const {
  //   open,
  //   setOpen,
  // } = props;
  useImperativeHandle(ref, () => ({
    // changeVal 就是暴露给父组件的方法
    setMultiRepertory: newVal => {
      setMultiRepertory(newVal);
    },
  }));
  const onChange3 = () => {};

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setMultiRepertory(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setMultiRepertory(false);
  };
  useEffect(() => {
    console.log('open', multiRepertory);
  }, [multiRepertory]);
  return (
    <>
      {multiRepertory && (
        <Modal
          title="修改库存"
          visible={multiRepertory}
          onOk={handleOk}
          width={1050}
          confirmLoading={confirmLoading}
          onCancel={handleCancel}
        >
          <Form>
          <Form.Item>
          <div>份量(如大小/小份、微辣/特辣等)</div>
          <Form.List name="users">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space
                    key={key}
                    style={{
                      display: 'flex',
                      flexDirection: 'column',
                      marginBottom: 8,
                    }}
                    align="baseline"
                  >
                    <Form.Item className={styles.deal}>
                      <Form.Item
                        {...restField}
                        name={[name, 'first']}
                        rules={[
                          {
                            required: true,
                            message: 'Missing first name',
                          },
                        ]}
                      >
                        <Input placeholder="名称" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'last']}
                        rules={[
                          {
                            required: true,
                            message: 'Missing last name',
                          },
                        ]}
                      >
                        <Input placeholder="约 份量（数字）" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'last']}
                        rules={[
                          {
                            required: true,
                            message: 'Missing last name',
                          },
                        ]}
                      >
                        <Input placeholder="约 份量（数字）" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'last']}
                        rules={[
                          {
                            required: true,
                            message: 'Missing last name',
                          },
                        ]}
                      >
                        <Input placeholder="销售价（元）" />
                      </Form.Item>
                      <Form.Item
                        {...restField}
                        name={[name, 'last']}
                        rules={[
                          {
                            required: true,
                            message: 'Missing last name',
                          },
                        ]}
                      >
                        <Input placeholder="活动价（元）" />
                      </Form.Item>
                      <MinusCircleOutlined onClick={() => remove(name)} />
                    </Form.Item>
                    <Form.Item>
                      <Form.Item>
                        <div>添加规格(如加料、甜度、辣度等)</div>
                        <Form.Item>
                          <Form.List name="names">
                            {(fields, { add, remove }, { errors }) => (
                              <>
                                {fields.map((field, index) => (
                                  <Form.Item
                                    // {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
                                    // label={index === 0 ? 'Passengers' : ''}
                                    required={false}
                                    key={field.key}
                                  >
                                    <Form.Item
                                      {...field}
                                      validateTrigger={['onChange', 'onBlur']}
                                      className={styles.deal}

                                      rules={[
                                        {
                                          required: true,
                                          whitespace: true,
                                          message:
                                            "Please input passenger's name or delete this field.",
                                        },
                                      ]}
                                    >
                                      <Input
                                        placeholder="规格名称"
                                        className={styles.nameWidth}
                                      />
                                    {fields.length > 1 ? (
                                      <MinusCircleOutlined
                                        className="dynamic-delete-button"
                                        onClick={() => remove(field.name)}
                                      />
                                    ) : null}
                                    </Form.Item>
                                    <Form.Item>
                                      <Form.List name="sights">
                                        {(fields, { add, remove }) => (
                                          <>
                                            {fields.map(field => (
                                              <Space key={field.key} align="baseline">
                                                <Form.Item
                                                  noStyle
                                                  shouldUpdate={(prevValues, curValues) =>
                                                    prevValues.area !== curValues.area ||
                                                    prevValues.sights !== curValues.sights
                                                  }
                                                >
                                                  {() => (
                                                    <Form.Item
                                                      {...field}
                                                      // label="Sight"
                                                      name={[field.name, 'sight']}
                                                      rules={[
                                                        {
                                                          required: true,
                                                          message: 'Missing sight',
                                                        },
                                                      ]}
                                                    >
                                                      <Input style={{ width: '200px' }} placeholder="加价名称" />
                                                    </Form.Item>
                                                  )}
                                                </Form.Item>
                                                <Form.Item
                                                  {...field}
                                                  // label="Price"
                                                  // name={[field.name, 'price']}
                                                  rules={[
                                                    {
                                                      required: true,
                                                      message: 'Missing price',
                                                    },
                                                  ]}
                                                >
                                                  <InputNumber style={{ width: '200px' }} placeholder="加价名称金额（元）" />
                                                </Form.Item>

                                                <MinusCircleOutlined
                                                  onClick={() => remove(field.name)}
                                                />
                                              </Space>
                                            ))}

                                            <Form.Item>
                                              <Button
                                                type="dashed"
                                                onClick={() => add()}
                                                block
                                                icon={<PlusOutlined />}
                                              >
                                               新增加价
                                              </Button>
                                            </Form.Item>
                                          </>
                                        )}
                                      </Form.List>
                                    </Form.Item>
                                  </Form.Item>
                                ))}
                                <Form.Item>
                                  <Button
                                    type="dashed"
                                    onClick={() => add()}
                                    style={{ width: '60%' }}
                                    icon={<PlusOutlined />}
                                  >
                                   新增规格
                                  </Button>
                                </Form.Item>
                              </>
                            )}
                          </Form.List>
                        </Form.Item>
                      </Form.Item>
                    </Form.Item>
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    新增份量
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form.Item>
          </Form>
        </Modal>
      )}
    </>
  );
};

export default forwardRef(AddMultiSpecModal);
