import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, Switch } from 'antd';


const createRelevanceForm = (props) => {
  return (
    <Modal
      width={800}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="Vertical"
        labelCol={{ span: 6 }}
        initialValues={props.values}
        onFinish={props.onFinish}
        onCancel={props.onCancel}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item label='商品' name={'goodsId'} rules={[{ required: true }]} initialValue={props.values.goodsId}>
          <Select showSearch style={{ width: '300px' }}
          >
            {
              (props.Support.allGoods || []).map((item, index) => {
                return (
                  <Select.Option index={index} value={item.id} key={item.id}>
                    {item.name}
                  </Select.Option>
                );
              })

            }
          </Select>
        </Form.Item>
        <Form.Item label='做法' name={'practiceIds'} rules={[{ required: true }]} initialValue={props.values.practiceIds || []}>
          <Select style={{ width: '300px' }}
            mode="multiple"
          >
            {
              (props.Support.allPractice || []).map((item, index) => {
                return (
                  <Select.Option index={index} value={item.id} key={item.id}>
                    {item.makeName}
                  </Select.Option>
                );
              })

            }
          </Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" >
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default createRelevanceForm;
