import React, { useState, useEffect } from 'react';
import {
  Row,
  Col,
  Checkbox,
  Space,
  Steps,
  message,
  Modal,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
} from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

import { GetActivityConfiguration, GetCoupon } from '../service';

const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  const [options, setoptions] = useState();
  const [current, setCurrent] = React.useState(0);
  const [firstItem, SetFirstItem] = useState();
  const [secondItem, SetSecondItem] = useState();
  const [isFormShow, SetisFormShow] = useState(true);
  const [activityConfiguration, SetactivityConfiguration] = useState([]);

  const { Step } = Steps;
  const tailFormItemLayout = {
    wrapperCol: {
      sm: {
        span: 500,
        offset: 1,
      },
    },
  };

  const steps = [
    {
      title: '活动信息',
      content: 'First-content1',
    },
    {
      title: '活动配置',
      content: 'Second-content2',
    },
  ];
  //初始化数据
  useEffect(() => {
    const initcouponType = async (value) => {
      var data = (await GetActivityConfiguration()).data;
      if (data != undefined) {
        SetactivityConfiguration(data);
      }
    };
    initcouponType();
  }, []);
  const next = () => {
    SetisFormShow(false);
    setCurrent(current + 1);
  };

  const prev = () => {
    SetisFormShow(true);
    setCurrent(current - 1);
  };
  return (
    <Modal
      title={props.values.id ? '编辑优活动' : '新建活动'}
      width={700}
      visible={props.createModalVisible}
      footer={null} //底部内容
      onCancel={() => {
        props.onCancel();
      }}
      //关闭时销毁 Modal 里的子元素
      destroyOnClose
    >
      {/* //-------------------------------------------------------------------------- */}
      <Steps current={current}>
        {steps.map((item) => (
          <Step key={item.title} title={item.title} />
        ))}
      </Steps>
      <div className="steps-content" style={{ marginTop: '20px' }}>
        <Form
          labelCol={{ span: 4 }}
          layout="Horizontal"
          preserve={false}
          initialValues={props.values}
          onFinish={props.onFinish}
        >
          <span style={{ display: isFormShow ? 'block' : 'none' }}>
            <Form.Item name="id" hidden={true}>
              <Input />
            </Form.Item>

            <Form.Item name="activityName" label="活动名称" rules={[{ required: true, max: 50 }]}>
              <Input placeholder="请输入活动名称" />
            </Form.Item>
            <Form.Item name="activityImg" label="活动图片">
              <Input placeholder="请输入活动图片" />
            </Form.Item>
            <Form.Item
              name="activityType"
              label="活动类型"
              defaultValue={props.values.activityType}
              rules={[{ required: true }]}
            >
              <Select placeholder="请选择活动类型">
                <OptGroup>
                  <Select.Option key={1} value={1}>
                    {' '}
                    送券
                  </Select.Option>
                  <Select.Option key={2} value={2}>
                    {' '}
                    其他{' '}
                  </Select.Option>
                </OptGroup>
              </Select>
            </Form.Item>
            <Form.Item noStyle>
              <Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
                <Form.Item
                  name="activityStartTime"
                  label="开始时间"
                  style={{ float: 'left' }}
                  rules={[{ required: true }]}
                >
                  <DatePicker placeholder="开始时间" />
                </Form.Item>
                <Form.Item
                  name="activityEndTime"
                  label="结束时间"
                  style={{ float: 'left', marginLeft: 20 }}
                  rules={[{ required: true }]}
                >
                  <DatePicker placeholder="结束时间" />
                </Form.Item>
              </Form.Item>
            </Form.Item>
            <Form.Item name="remark" label="备注" rules={[{ required: true }]}>
              <Input placeholder="请输入备注" />
            </Form.Item>
            <Form.Item name="activityRule" label="规则说明" rules={[{ required: true }]}>
              <Input placeholder="请输入规则说明" />
            </Form.Item>
          </span>
          <span style={{ display: !isFormShow ? 'block' : 'none' }}>
            <Form.List name="activityConfiguration">
              {(fields, { add, remove }) => (
                <>
                  {activityConfiguration.map(({ value, showName, type, ...restField }) => (
                    <Space key={value} style={{ marginBottom: 8 }}>
                      <Form.Item
                        {...restField}
                        name={[showName, 'showName']}
                        fieldKey={[value, 'value']}
                      >
                        <Checkbox onChange={value}>{showName}</Checkbox>
                      </Form.Item>

                      {/* <Form.Item
                                                {...restField}
                                                name={[name, 'showName']}
                                                fieldKey={[fieldKey, 'showName']}
                                                rules={[{ required: true, message: 'Missing first name' }]}>
                                                <Input placeholder="First Name" />
                                            </Form.Item> */}

                      {/* <Form.Item
                                                {...restField}
                                                name={[name, 'value']}
                                                fieldKey={[fieldKey, 'value']}
                                                rules={[{ required: true, message: 'Missing last name' }]} >
                                                <Input placeholder="Last Name" />
                                            </Form.Item> */}
                    </Space>
                  ))}
                  {/* <Form.Item>
                                        <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                                            Add field
                                        </Button>
                                    </Form.Item> */}
                </>
              )}
            </Form.List>

            {/* <Form.Item>
                            <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
                                保存
                            </Button>
                        </Form.Item> */}
          </span>
        </Form>
      </div>
      <div className="steps-action">
        {current < steps.length - 1 && <Button onClick={() => next()}>下一步</Button>}
        {current === steps.length - 1 && <Button onClick={() => prev()}>上一步</Button>}
        {current > 0 && (
          <Button
            type="primary"
            style={{ margin: '0 8px' }}
            onClick={() => message.success('Processing complete!')}
          >
            保存
          </Button>
        )}
      </div>
      {/* //-------------------------------------------------------------------------- */}
    </Modal>
  );
};

export default CreateForm;
