import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, DatePicker, Alert } from 'antd';
import { GetCouponStatusOrType } from '../service';
const CreateForm = (props) => {
  const { Option, OptGroup } = Select;

  const [options, setoptions] = useState();

  const couponType = async () => {};

  //初始化数据
  useEffect(() => {
    const initcouponType = async (value) => {
      var data = await GetCouponStatusOrType(2);
      var se = data.data.map((item) => (
        <Select.Option key={item.key} value={item.key}>
          {item.value}
        </Select.Option>
      ));
      setoptions(se);
    };
    initcouponType();
  }, []);

  const formItemLayout = {
    labelCol: {
      sm: { span: 4 },
    },
    wrapperCol: {},
  };
  const tailFormItemLayout = {
    wrapperCol: {
      sm: {
        span: 500,
        offset: 1,
      },
    },
  };
  const onTimeTypeChange = (value) => {};

  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="couponTitle" label="优惠卷标题" rules={[{ required: true, max: 200 }]}>
          <Input placeholder="请输入优惠卷标题" />
        </Form.Item>
        <Form.Item
          name="couponType"
          label="优惠卷类型"
          defaultValue={props.values.couponType}
          rules={[{ required: true }]}
        >
          <Select placeholder="请选择优惠卷类型">
            <OptGroup>{options}</OptGroup>
          </Select>
        </Form.Item>
        <Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
          <Form.Item label="优惠金额" style={{ float: 'left' }}  rules={[{ required: true }]}>
            <Form.Item name="couponValue" noStyle>
              <InputNumber placeholder="金额"  min={0} precision={2}    />
            </Form.Item>
          </Form.Item>
          <Form.Item
            label="使用条件"
            style={{ float: 'left', marginLeft: 10 }}
            rules={[{ required: true }]}
          >
            <Form.Item name="condition" noStyle>
              <InputNumber placeholder="使用条件" min={0} precision={2} />
            </Form.Item>
          </Form.Item>
          <Form.Item
            label="每人可领数量"
            style={{ float: 'left', marginLeft: 10 }}
            rules={[{ required: true }]}
          >
            <Form.Item name="getLimit" noStyle>
              <InputNumber placeholder="可领数量" min={0}    precision={0}  />
            </Form.Item>
            <span style={{ color: '#FFCC52' }}> 0 为不限制</span>
          </Form.Item>
        </Form.Item>
        <Form.Item name="timeType" label="时间类型" rules={[{ required: true }]}>
          <Select onChange={onTimeTypeChange}>
            <OptGroup>
              <Select.Option value={1}>时间段</Select.Option>
              <Select.Option value={2}>固定期限</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.timeType !== currentValues.timeType
          }
        >
          {({ getFieldValue }) =>
            getFieldValue('timeType') == '2' ? (
              <Form.Item label="固定时间" rules={[{ required: true }]}>
                <Form.Item name="validFixedTerm" noStyle>
                  <InputNumber  placeholder="" precision={0}  min={0} />
                </Form.Item>
              </Form.Item>
            ) : (
              <Form.Item {...tailFormItemLayout} style={{ height: 32 }}>
                <Form.Item
                  name="validStartTime"
                  label="开始时间"
                  style={{ float: 'left' }}
                  rules={[{ required: true }]}
                >
                  <DatePicker placeholder="开始时间" />
                </Form.Item>
                <Form.Item
                  name="validEndTime"
                  label="结束时间"
                  style={{ float: 'left', marginLeft: 20 }}
                  rules={[{ required: true }]}
                >
                  <DatePicker placeholder="结束时间" />
                </Form.Item>
              </Form.Item>
            )
          }
        </Form.Item>
        <Form.Item name="validStatus" label="状态" rules={[{ required: true }]}>
          <Select placeholder="状态">
            <Option value={1}>生效</Option>
            <Option value={2}>失效</Option>
            <Option value={3}>作废</Option>
          </Select>
        </Form.Item>

        <Form.Item noStyle>
          <Form.Item name="remarks" label="备注" rules={[{ max: 500 }]}>
            <Input placeholder="备注" />
          </Form.Item>
          <span style={{ color: '#FFCC52', marginLeft: 70 }}>
            注: 多条规则请用 &nbsp;;&nbsp; 隔开。 &nbsp;&nbsp; 如：1.xxxxxx； 2.xxxxxx
          </span>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
