import React, { useRef,useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, Divider, Space,message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { GetPaperCouponType,AddPaperCouponType } from '../service';
let index = 0;
const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  const [items, setItems] = useState();
  const [options, setoptions] = useState();
  const inputRef = useRef(null);
  const [name, setName] = useState('');

  //初始化数据
  useEffect(() => {
    initcouponType();
  }, []);
  const initcouponType = async () => {
    var data = await GetPaperCouponType();
    var op=[]
    data.data.map((item) => (
      op.push({label:item.value,value:item.key})
    ));
    setItems(op)
  };
  const formItemLayout = {
    labelCol: {
      sm: { span: 4 },
    },
    wrapperCol: {},
  };
  const tailFormItemLayout = {
    wrapperCol: {
      sm: {
        span: 500,
        offset: 1,
      },
    },
  };
  const onNameChange = (event) => {
    setName(event.target.value);
  };
  const addItem = async (e) => {
    e.preventDefault();
    setItems([...items, {label:name,value:index++} || `New item ${index++}`]);
    setName('');
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
   
    await AddPaperCouponType(JSON.stringify({Name:name})).then((r) => {
        if (r.data) {
            message.success('添加成功');
            initcouponType();
          } else {
            message.error('添加失败请重试！');
          }
    })
  };

  return (
    <Modal
      maskClosable={false}
      title={props.values.id ? '编辑优惠卷' : '新建优惠卷'}
      width={700}
      visible={props.createModalVisible}
      // bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null} //底部内容
      //取消
      onCancel={() => {
        props.onCancel();
      }}
      //关闭时销毁 Modal 里的子元素
      destroyOnClose
    >
      <Form
        {...formItemLayout}
        layout="Horizontal"
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="title" label="优惠卷标题" rules={[{ required: true, max: 200 }]}>
          <Input placeholder="请输入优惠卷标题" />
        </Form.Item>
        <Form.Item
          name="cTypeId"
          label="优惠卷类型"
          defaultValue={props.values.cTypeId}
          rules={[{ required: true }]}
        >
          <Select placeholder="请选择优惠卷类型"
          dropdownRender={(menu) => (
            <>
              {menu}
              <Divider
                style={{
                  margin: '8px 0',
                }}
              />
              <Space
                style={{
                  padding: '0 8px 4px',
                }}
              >
                <Input
                  placeholder="请输入选项"
                  ref={inputRef}
                  value={name}
                  onChange={onNameChange}
                />
                <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
                  新增
                </Button>
              </Space>
            </>
          )}
          options={items}
          >
            {/* <OptGroup>{options}</OptGroup> */}
          </Select>
        </Form.Item>
        <Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
          <Form.Item label="优惠金额" style={{ float: 'left' }}  rules={[{ required: true }]}>
            <Form.Item name="money" noStyle>
              <InputNumber placeholder="金额"  min={0} precision={2}    />
            </Form.Item>
          </Form.Item>
        </Form.Item>
        <Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
          <Form.Item label="平台金额" style={{ float: 'left' }}  rules={[{ required: true }]}>
            <Form.Item name="soureMoney" noStyle>
              <InputNumber placeholder="金额"  min={0} precision={2}    />
            </Form.Item>
          </Form.Item>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right', left: 10 }}  >
            确认
          </Button>
          <Button htmlType="button" style={{ float: 'right' }} onClick={props.onCancel} >
            取消
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
