import React, { useState, useEffect } from "react";
import { Form, Button, Input, Select, InputNumber, DatePicker, Upload, message, Modal, 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';
import moment from "moment";

/**
 * （送券）活动
 * @returns 
 */
const key = 'coupon';
const activityConfigArray = [
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "3718AB6C-F4ED-4FAD-8462-6608FF87799C",
        "configurationName": "新人注册",
        "configurationRule": "没有领取过优惠券",
        "valueType": 1,
        "configurationValueCount": 0
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "58cbe72f-5022-48bd-8ed0-7ebb091e884a",
        "configurationName": "限制领券",
        "configurationRule": "不存在此优惠券",
        "valueType": 1,
        "configurationValueCount": 0
    },
    {
        "configId": null,
        "operator": null,
        "value1": [],
        "value2": null,
        "activity_Id": null,
        "configuration_Id": "E432268C-7140-4519-B29F-892764486232",
        "configurationName": "每日领券",
        "configurationRule": "每日只可领取一次",
        "valueType": 1,
        "configurationValueCount": 0
    },
]

const CouponDelivery = (props) => {
    const [form] = Form.useForm();
    const [couponInfo, SetCouponInfo] = useState([]);
    const [couponForm] = Form.useForm();
    const [imgurl, setimgUrl] = useState(null);
    const [canUseCount, setCanUseCount] = useState([]);
    /** 新建/更新窗口的弹窗 */
    const [createModalVisible, handleModalVisible] = useState(false);
    /** 优惠券类型 */
    const [couponType, setcouponType] = useState([]);
    /** 适用门店范围 */
    const [applicableStore, setApplicableStore] = useState([]);
    /** 适用商品类型范围 */
    const [applyGoodType, setApplyGoodType] = useState([]);
    /** 适用商品范围 */
    const [applyGood, setApplyGood] = useState([]);

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

    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 formItemLayout = {
        labelCol: {
            sm: { span: 4 },
        },
        wrapperCol: {},
    };

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

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

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

    /**
     * 适用商品范围
     */
    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 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: [] });
    };

    /**
     * 提交活动
     */
    const onSubmitActivity = async (values) => {
        if (!values.activityRewards) {
            message.error('请至少添加一种优惠券');
            return;
        }
        values.activityType = 1;
        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;
        const activityConfiguration = [];
        values.activityConfig.forEach(valueItem => {
            const findConfig = activityConfigArray.find(item => item.configuration_Id === valueItem);
            if (findConfig) {
                activityConfiguration.push({
                    ...findConfig,
                    configId: [valueItem]
                });
            }
        });
        delete values.activityConfig;
        delete values.activityStartAndEndTime;
        values.activityConfiguration = activityConfiguration;
        const response = await startAPI.FastAddActivity(values);
        if (response.statusCode === 200) {
            message.success('新建活动成功！');
            couponForm.resetFields();
            props.onSuccessCreate && props.onSuccessCreate();
        } else {
            message.error(response.errors || '创建失败 请重试！');
        }
    }

    useEffect(() => {
        onFetchCouponList();
        GetCouponStatusOrType();
        GetStores();
        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: '请选择优惠券' }]}
                                    >
                                        <Select
                                            placeholder="请选择优惠券"
                                            style={{
                                                width: '200px',
                                            }}
                                            onChange={(value) => {
                                                const find = couponInfo.find(item => item.couponId === value);
                                                if (find) {
                                                    const temp = JSON.parse(JSON.stringify(canUseCount));
                                                    temp[key] = find;
                                                    setCanUseCount(temp);
                                                }
                                            }}
                                        >
                                            {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', flexShrink: 0, marginBottom: '24px', fontSize: '25px', color: '#F84352' }} />

                                    <div style={{ margin: '0 20px', flexShrink: 0, marginBottom: '24px', fontSize: '16px', width: '120px' }}>可领取数量: {canUseCount[key]?.canUseCount}</div>

                                    <Form.Item
                                        {...restField}
                                        name={[name, 'value']}
                                        fieldKey={[fieldKey, 'value']}
                                        rules={[
                                            {
                                                required: true,
                                                message: '请输入领取数量！',
                                            },
                                        ]}
                                    >
                                        <InputNumber placeholder="每日领取数量" style={{
                                            width: '130px',
                                        }} min={0} max={999} />
                                    </Form.Item>

                                    <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 ? <img src={imgurl} alt="avatar" style={{ width: '30px', height: '40px' }} /> : <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' }}>
                                    <Checkbox value={config.configuration_Id}>{config.configurationName}：{config.configurationRule}！</Checkbox>
                                </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 CouponDelivery;