import React, { useState, useEffect } from "react";
import { Form, Button, Input, Image, Select, DatePicker, Upload, InputNumber, Modal, message, Checkbox, Row, Col } from 'antd';
import styles from "../../index.less";
import { MinusCircleOutlined, PlusOutlined, UploadOutlined, PlusCircleOutlined } from '@ant-design/icons';
import startAPI from "../../service";
import axios from 'axios';
const key = 'coupon';
import moment from "moment";

const activityConfigArray = [
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "2B0F88D6-EDA0-4AAC-BB0B-DD34F3245C17",
        "configurationName": "日参与次数限制",
        "configurationRule": "每日参与次数",
        "valueType": 1,
        "configurationValueCount": 1
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "8AC2A2BA-BB6E-4566-B147-ACF798146BBD",
        "configurationName": "星期限制",
        "configurationRule": "包含的星期",
        "valueType": 2,
        "configurationValueCount": 1
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "9620CCF9-679E-44B1-B8FF-9B6F511208FA",
        "configurationName": "消费金额",
        "configurationRule": "单笔订单消费金额",
        "valueType": 1,
        "configurationValueCount": 1
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "AF62B336-15A6-453B-AD4A-61EB7D43B99B",
        "configurationName": "商品种类限制",
        "configurationRule": "包含的商品种类",
        "valueType": 2,
        "configurationValueCount": 1
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "ECBACC1C-6BA8-498E-BDE4-6A012881E0E7",
        "configurationName": "门店限制",
        "configurationRule": "包含的门店",
        "valueType": 2,
        "configurationValueCount": 1
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "F06DEAD8-DDB8-4B27-94E9-389DE9AC155D",
        "configurationName": "总参与次数限制",
        "configurationRule": "总参与次数",
        "valueType": 1,
        "configurationValueCount": 1
    }
]

const formItemLayout = {
    labelCol: {
        sm: { span: 4 },
    },
    wrapperCol: {},
};

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

/**
 * 买满赠送（优惠券）
 * @returns 
 */

const FreeCouponMoney = (props) => {

    const [couponInfo, SetCouponInfo] = useState([]);
    /**
     * 获取优惠券列表
     */
    const onFetchCouponList = async () => {
        const response = await startAPI.GetCouponCanUseCountAndLimit();
        if (response.succeeded) {
            SetCouponInfo(response.data);
        }
    }

    const [couponForm] = Form.useForm();
    const [imgurl, setimgUrl] = useState(null);

    /** 新建/更新窗口的弹窗 */
    const [createModalVisible, handleModalVisible] = useState(false);
    const [form] = Form.useForm();

    /** 优惠券类型 */
    const [couponType, setcouponType] = useState([]);

    /**
    * 获取消费券类型
    */
    const GetCouponStatusOrType = async () => {
        await startAPI.GetCouponStatusOrType(2).then((r) => {
            if (r.succeeded) {
                setcouponType(r.data);
            }
        });
    }

    /** 适用门店范围 */
    const [applicableStore, setApplicableStore] = useState([]);

    /** 适用商品类型范围 */
    const [applyGoodType, setApplyGoodType] = useState([]);
    /** 适用商品范围 */
    const [applyGood, setApplyGood] = useState([]);

    /**
     * 适用商品范围
     */
    const onFetchGoodsType = async () => {
        const response = await startAPI.GetGoodsType();
        if (response.statusCode === 200) {
            const array = [];
            Object.keys(response.data).forEach(item => {
                array.push({
                    id: item,
                    name: response.data[item]
                })
            })
            setApplyGoodType(array);
        }
    }

    /**
     * 获取商品
     */
    const onFetchGoods = async (goodsType = -1) => {
        const response = await startAPI.GetGoodsById(goodsType);
        if (response.statusCode === 200) {
            const array = [];
            Object.keys(response.data).forEach(item => {
                array.push({
                    id: item,
                    name: response.data[item]
                })
            });
            setApplyGood(array)
        }
    }

    const uploadProp = {
        name: 'file',
        showUploadList: false,
        multiple: false,
        accept: '.png, .jpg, .jpeg, .gif',
        // 这里需要指定文件上传的content-type
        headers: {
            'Content-Type': 'application/octet-stream',
        },
        customRequest({
            action,
            file,
            headers,
            onError,
            onProgress,
            onSuccess,
            withCredentials,
        }) {

            //覆盖action 上传之前获取上传地址
            var index = file.name.lastIndexOf(".");
            var ext = file.name.substr(index + 1);

            let fileData = null;
            startAPI.GetCosRequestURL({ directory: "activity", fileExtension: ext, method: "PUT" }).then((r) => {
                action = r.allUrl;
                var index = file.name.lastIndexOf(".");
                //获取后缀
                var ext = file.name.substr(index + 1);
                const reader = new FileReader();

                if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(ext) == -1) {
                    message.error(`${file.name} 不是图片文件`);
                    return;
                }

                reader.readAsArrayBuffer(file);
                reader.onload = (e) => {
                    fileData = e.target.result;
                    // 使用 axios 进行文件上传的请求
                    axios.put(action, fileData, {
                        withCredentials,
                        headers,
                        onUploadProgress: ({ total, loaded }) => {
                            // 进行上传进度输出，更加直观
                            onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
                        },
                    }).then(response => {
                        couponForm.setFieldsValue({ activityImg: r.seeUrl });
                        if (response.status == 200 || response.statusText == 'OK') {
                            setimgUrl(r.seeUrl)
                        }
                    })
                        .catch(onError);
                };
            });
        },
    };

    /**
     * 获取适用店铺
     */
    const GetStores = async () => {
        const response = await startAPI.GetStores();
        if (response.statusCode === 200) {
            setApplicableStore(response.data);
        }
    }

    //新增
    const handleAddCoupon = async (fields) => {
        fields.RangeType = 1;
        message.loading('正在添加...', key);
        try {
            if (fields.validEndTime < fields.validStartTime) {
                message.error('开始时间不能大于结束时间');
            }
            await startAPI.Addcoupon(JSON.stringify(fields)).then((r) => {
                message.destroy(key);
                if (r.data) {
                    message.success('添加成功');
                    onFetchCouponList();
                    handleModalVisible(false);
                } else {
                    message.error('添加失败请重试！');
                }
            });
        } catch (error) {
            message.destroy(key);
            message.error('添加失败请重试！');
        }
    };

    const hander = async (value) => {
        var res = (await startAPI.GetSelectedConfig(value)).data;
        var arr = [];
        for (let k in res) {
            arr.push({
                id: k.toString(),
                name: res[k.toString()],
            });
        }
        setApplicableStore(data);
        form.setFieldsValue({ Relation: [] });
    };

    /**
     * 提交
     * @param {*} values 
     */
     const onSubmitActivity = async (values) => {
        values.activityType = 4;
        values.activityRewards.forEach(item => {
            item.id = "";
            item.activityInfo_Id = "";
        })
        values.activityStartTime = moment(values.activityStartAndEndTime[0]).format('YYYY-MM-DD');
        values.activityEndTime = moment(values.activityStartAndEndTime[1]).format('YYYY-MM-DD');
        values.status = 0;
        values.isShow = 1;
        values.isDeleted = 0;
        values.consumptionType = 0;
        values.isGiftGoodsParticipate = 0;
        values.activityConfiguration = [];
        values.activityConfig.forEach(config => {
            const findConfig = activityConfigArray.find(item => item.configuration_Id === config);
            if (findConfig) {
                findConfig.configId = [findConfig.configuration_Id];
                if (findConfig.configurationName === '日参与次数限制') {
                    findConfig.operator = values.dayOperator;
                    findConfig.value1 = values.dayValue;
                } else if (findConfig.configurationName === '星期限制') {
                    findConfig.operator = values.weekOperator;
                    findConfig.value1 = values.weekValue;
                } else if (findConfig.configurationName === '消费金额') {
                    findConfig.operator = values.amountOperator;
                    findConfig.value1 = values.amountValue;
                } else if (findConfig.configurationName === '商品种类限制') {
                    findConfig.operator = values.goodsTypeOperator;
                    findConfig.value1 = values.goodsTypeValue;
                } else if (findConfig.configurationName === '门店限制') {
                    findConfig.operator = values.storeOperator;
                    findConfig.value1 = values.storeValue;
                } else if (findConfig.configurationName === '总参与次数限制') {
                    findConfig.operator = values.totalOperator;
                    findConfig.value1 = values.totalValue;
                }
                values.activityConfiguration.push(findConfig);
            }
        });
        delete values.activityConfig;
        delete values.activityStartAndEndTime;

        delete values.amountOperator;
        delete values.amountValue;

        delete values.dayOperator;
        delete values.dayValue;

        delete values.goodsTypeOperator;
        delete values.goodsTypeValue;

        delete values.storeOperator;
        delete values.storeValue;

        delete values.totalOperator;
        delete values.totalValue;

        delete values.weekOperator;
        delete values.weekValue;
        const response = await startAPI.FastAddActivity(values);
        if (response.statusCode === 200) {
            message.success('新建活动成功！');
            couponForm.resetFields();
            props.onSuccessCreate && props.onSuccessCreate();
        } else {
            message.error(response.errors || '创建失败 请重试！');
        }
    }

    useEffect(() => {
        GetStores();
        onFetchCouponList();
        GetCouponStatusOrType();
        onFetchGoodsType();
        onFetchGoods();
    }, []);

    return <div className={styles.activity_form_container} >
        <Form
            form={couponForm}
            name="basic"
            labelCol={{
                span: 3,
            }}
            initialValues={{
                remember: true,
            }}
            onFinish={(values) => {
                onSubmitActivity(values);
            }}
            layout="vertical"
            autoComplete="off"
        >
            <Form.Item
                label="活动名称"
                name="activityName"
                rules={[
                    {
                        required: true,
                        message: '请输入活动名称！',
                    },
                ]}
            >
                <Input style={{ width: '100%' }} placeholder="请输入活动名称" />
            </Form.Item>


            <Form.Item label="消费金额">
                <Form.List name="activityRewards">
                    {(fields, { add, remove }, { errors }) => (
                        <>
                            {fields.map(({ key, name, fieldKey, ...restField }) => (
                                <div className={styles.common_form_row}>
                                    <Form.Item
                                        {...restField}
                                        name={[name, 'rewardValue']}
                                        fieldKey={[fieldKey, 'rewardValue']}
                                        rules={[{ required: true, message: '请输入消费金额' }]}
                                    >
                                        <InputNumber style={{ width: '150px' }} placeholder="请输入消费金额" />
                                    </Form.Item>

                                    <div style={{ margin: '0 10px 24px 10px' }}>赠送优惠券：</div>

                                    <Form.Item
                                        {...restField}
                                        name={[name, 'value']}
                                        fieldKey={[fieldKey, 'value']}
                                        rules={[{ required: true, message: '请选择优惠券' }]}
                                    >
                                        <Select
                                            placeholder="请选择优惠券"
                                            style={{
                                                width: '250px',
                                            }}

                                        >
                                            {couponInfo.map((item, index) => {
                                                return (
                                                    <Select.Option
                                                        index={index}
                                                        value={item.couponId}
                                                        key={item.couponId}
                                                    >
                                                        {item.couponName}
                                                    </Select.Option>
                                                );
                                            })}
                                        </Select>
                                    </Form.Item>

                                    <PlusCircleOutlined onClick={() => handleModalVisible(true)} style={{ margin: '0 10px 24px 10px', flexShrink: 0, fontSize: '25px', color: '#F84352' }} />

                                    <MinusCircleOutlined style={{ fontSize: '25px', marginLeft: '20px', marginBottom: '24px' }} onClick={() => remove(name)} />
                                </div>
                            ))}
                            <Form.Item>
                                <Button
                                    type="dashed"
                                    onClick={() => add()}
                                    style={{
                                        width: '100%',
                                    }}
                                    icon={<PlusOutlined />}
                                >
                                    添加
                                </Button>
                                <Form.ErrorList errors={errors} />
                            </Form.Item>
                        </>
                    )}
                </Form.List>
            </Form.Item>

            <Form.Item
                name="activityStartAndEndTime"
                label="起止时间"
                rules={[{ required: true }]}
            >
                <DatePicker.RangePicker style={{ width: '100%' }} />
            </Form.Item>

            <Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
                <Input.TextArea rows={4} placeholder="请输入备注" />
            </Form.Item>

            <Form.Item name="activityRule" label="规则说明" rules={[{ required: true, max: 500 }]}>
                <Input.TextArea rows={4} placeholder="请输入规则说明" />
            </Form.Item>

            <Form.Item name="activityImg" label="活动图片" rules={[{ required: true }]}
            >
                <Upload
                    {...uploadProp}
                >
                    {imgurl ? <Image
                        width={200}
                        height={200}
                        src={imgurl}
                        fallback="data:image/png;base64,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"
                    /> : <Button icon={<UploadOutlined />}>上传</Button>}
                </Upload>
            </Form.Item>

            <Form.Item name="isAutoSend" label="参与方式" rules={[{ required: true }]}>
                <Select placeholder="请选择参与方式">
                    <Select.Option value={0}>点击参与（需要用户主动点击）</Select.Option>
                    <Select.Option value={1}>自动参与（满足特定条件自动参与）</Select.Option>
                </Select>
            </Form.Item>

            <Form.Item name="activityConfig" label="活动配置" rules={[{ required: true, message: '请至少选择一个活动配置！' }]}>
                <Checkbox.Group style={{
                    width: '100%',
                }}>
                    <Row>
                        {
                            activityConfigArray.map((config, index) => {
                                return <Col key={index} span={24} style={{ marginBottom: '10px', display: 'flex', alignItems: 'center' }}>
                                    <Checkbox style={{ minWidth: '230px' }} value={config.configuration_Id}>{config.configurationName}：{config.configurationRule}</Checkbox>
                                    {index === 0 && (
                                        <>
                                            <Form.Item
                                                name="dayOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="dayValue"
                                                noStyle
                                            >
                                                <Input style={{ width: 280 }} placeholder="每日参与次数" />
                                            </Form.Item>
                                        </>
                                    )}
                                    {index === 1 && (
                                        <>
                                            <Form.Item
                                                name="weekOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="weekValue"
                                                noStyle
                                            >
                                                <Select style={{ width: 280 }} size='Small' mode="multiple" placeholder="星期">
                                                    <Select.Option value="1">星期一</Select.Option>
                                                    <Select.Option value="2">星期二</Select.Option>
                                                    <Select.Option value="3">星期三</Select.Option>
                                                    <Select.Option value="4">星期四</Select.Option>
                                                    <Select.Option value="5">星期五</Select.Option>
                                                    <Select.Option value="6">星期六</Select.Option>
                                                    <Select.Option value="0">星期日</Select.Option>
                                                </Select>
                                            </Form.Item>
                                        </>
                                    )}
                                    {index === 2 && (
                                        <>
                                            <Form.Item
                                                name="amountOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="amountValue"
                                                noStyle
                                            >
                                                <Input style={{ width: 280 }} placeholder="消费金额" />
                                            </Form.Item>
                                        </>
                                    )}
                                    {index === 3 && (
                                        <>
                                            <Form.Item
                                                name="goodsTypeOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="goodsTypeValue"
                                                noStyle
                                            >
                                                <Select style={{ width: 280 }} size='Small' placeholder="商品种类" mode="multiple">
                                                    {
                                                        applyGoodType.map(item => {
                                                            return <Select.Option value={item.id} key={item.id}>
                                                                {item.name}
                                                            </Select.Option>
                                                        })
                                                    }
                                                </Select>
                                            </Form.Item>
                                        </>
                                    )}
                                    {index === 4 && (
                                        <>
                                            <Form.Item
                                                name="storeOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="storeValue"
                                                noStyle
                                            >
                                                <Select style={{ width: 280 }} size='Small' mode="multiple" placeholder="门店">
                                                    {
                                                        applicableStore.map(item => {
                                                            return <Select.Option value={item.id} key={item.id}>
                                                                {item.name}
                                                            </Select.Option>
                                                        })
                                                    }
                                                </Select>
                                            </Form.Item>
                                        </>
                                    )}
                                    {index === 5 && (
                                        <>
                                            <Form.Item
                                                name="totalOperator"
                                                noStyle
                                            >
                                                <Select style={{ width: 80, margin: '0 20px' }} size='Small' placeholder="条件">
                                                    <Select.Option value=">">大于</Select.Option>
                                                    <Select.Option value="<">小于</Select.Option>
                                                    <Select.Option value="==">等于</Select.Option>
                                                    <Select.Option value=">=and<=">包含</Select.Option>
                                                </Select>
                                            </Form.Item>
                                            <Form.Item
                                                name="totalValue"
                                                noStyle
                                            >
                                                <Input style={{ width: 280 }} placeholder="总次数" />
                                            </Form.Item>
                                        </>
                                    )}
                                </Col>
                            })
                        }
                    </Row>
                </Checkbox.Group>
            </Form.Item>

            <Form.Item>
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button style={{ marginLeft: '20px' }} onClick={() => {
                    couponForm.resetFields();
                    setimgUrl(null);
                }}>
                    重置
                </Button>
            </Form.Item>

        </Form>
        <Modal
            maskClosable={false}
            title="新建优惠卷"
            width={700}
            visible={createModalVisible}
            footer={null} //底部内容
            //取消
            onCancel={() => {
                handleModalVisible(false);
            }}
            //关闭时销毁 Modal 里的子元素
            destroyOnClose
        >
            <Form
                form={form}
                {...formItemLayout}
                layout="Horizontal"
                preserve={false}
                onFinish={(values) => {
                    handleAddCoupon(values)
                }}
            >
                <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="优惠卷类型"
                    rules={[{ required: true }]}
                >
                    <Select placeholder="请选择优惠卷类型">
                        {
                            couponType.map(item => {
                                return <Select.Option key={item.key} value={item.key} >
                                    {item.value}
                                </Select.Option>
                            })
                        }
                    </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>
                        <Select.Option value={1}>时间段</Select.Option>
                        <Select.Option value={2}>固定期限</Select.Option>
                    </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 name="Coupon_Id" hidden={true}>
                    <Input />
                </Form.Item>
                <Form.Item name="SendNum" label="发放数量" rules={[{ required: true }]}>
                    <InputNumber placeholder="发放数量" min={0} style={{ width: '510px' }} />
                </Form.Item>

                <Form.Item name="RangeType" label="适用范围类型" hidden={true} defaultValue={1}>
                    <Select placeholder="发放范围" onSelect={hander} defaultValue={1}>
                        <Select.Option value="1">店铺</Select.Option>
                        {/* <Select.Option value="2">供应商</Select.Option> */}
                        <Select.Option value="3">区域</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item name="Relation" label="适用范围" rules={[{ required: true }]} defaultValue="1">
                    <Select placeholder="适用范围" filterOption={false} mode="multiple">
                        {
                            applicableStore.map(item => {
                                return <Select.Option value={item.id} key={item.id}>
                                    {item.name}
                                </Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="applyGoodType" label="适用商品类型">
                    <Select placeholder="适用商品类型" filterOption={false} onChange={(value) => {
                        onFetchGoods(value);
                    }}>
                        {
                            applyGoodType.map(item => {
                                return <Select.Option value={item.id} key={item.id}>
                                    {item.name}
                                </Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="goodsRelation" label="适用商品范围">
                    <Select placeholder="适用商品范围" filterOption={false} mode="multiple">
                        {
                            applyGood.map(item => {
                                return <Select.Option value={item.id} key={item.id}>
                                    {item.name}
                                </Select.Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item name="Status" label="状态" rules={[{ required: true }]} defaultValue="1">
                    <Select placeholder="请选择状态">
                        <Select.Option value="1">启用</Select.Option>
                        <Select.Option value="0">禁用</Select.Option>
                    </Select>
                </Form.Item>

                <Form.Item name="Remark" label="备注">
                    <Input placeholder="备注" />
                </Form.Item>

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

export default FreeCouponMoney;