import React, { useState, useEffect } from 'react';
import { Form, InputNumber, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb, DatePicker } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';

const { RangePicker } = DatePicker;

function validatorNum(rule, value, callback) {
    callback(value < 1 || value > 1000 ? '人数必须大于0 小于 1000' : undefined);
}

function Help(props) {

    const { id, name } = props

    // const [taNoticeList, setTaNoticeList] = useState([])
    const [data, setData] = useState({})

    useEffect(() => {
        getHelpDetail();
    }, [])
    // 查询列表

    const getHelpDetail = () => {
        request({ ...apis.redPacket.helpDetail, urlData: { id } }).then(data => {
            data.date = [moment(data.startDate), moment(data.endDate)]
            setData(data)
        })
    }

    const updateRedPacket = values => {

        const [startDate, endDate] = values.date
        console.log(values.date)
        values.startDate = `${moment(startDate).format('YYYY-MM-DDTHH:mm:ss.000')}Z`
        values.endDate = `${moment(endDate).format('YYYY-MM-DDTHH:mm:ss.000')}Z`
        values.activityId = id
        request({ ...apis.redPacket.updateHelp, urlData: { id }, data: { ...values } }).then(data => {
            message.info('操作成功')
        }).catch(() => {
            message.error('操作失败')
        })
    }

    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                console.log(values, '------222-------')

                // date

                // values.
                updateRedPacket(values)
            }
        },
        )
    }

    const { getFieldDecorator } = props.form

    return (

        <>
            <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
                <Form.Item label="助力成功需要人数">
                    {getFieldDecorator('helpSuccesPersons', {
                        initialValue: data.helpSuccesPersons || 3,
                        rules: [
                            { required: true, message: '请设置 助力成功需要人数' },
                            { validator: validatorNum },
                        ],
                    },
                    )(
                        <InputNumber min={1} max={1000} />,
                    )}
                </Form.Item>
                <Form.Item label="单人每日助力次数限制">
                    {getFieldDecorator('limitNumPerDay', {
                        initialValue: data.limitNumPerDay || 3,
                        rules: [
                            { required: true, message: '请设置 单人每日助力次数限制' },
                            { validator: validatorNum },
                        ],
                    })(
                        <InputNumber min={1} max={1000} />,
                    )}
                </Form.Item>
                <Form.Item label="超出时提示文案">
                    {getFieldDecorator('limitPerDayIllegalTip', {
                        initialValue: data.limitPerDayIllegalTip || '每人每天最多只能助力3次',
                        rules: [
                            { required: true, message: '请设置 超出时提示文案' },
                        ],
                    })(
                        <Input placeholder="每人每天最多只能助力3次" />,
                    )}
                </Form.Item>
                <Form.Item label="单人总助力次数限制">
                    {getFieldDecorator('limitNumPerPerson', {
                        initialValue: data.limitNumPerPerson || 3,
                        rules: [
                            { required: true, message: '请设置 单人总助力次数限制' },
                            { validator: validatorNum },
                        ],
                    })(
                        <InputNumber min={1} max={1000} />,
                    )}
                </Form.Item>
                <Form.Item label="超出时提示文案">
                    {getFieldDecorator('limitPerPersonIllegalTip', {
                        initialValue: data.limitPerPersonIllegalTip || '每人最多只能为他人助力3次',
                        rules: [
                            { required: true, message: '请设置 超出时提示文案' },
                        ],
                    })(
                        <Input placeholder="每人最多只能为他人助力3次" />,
                    )}
                </Form.Item>
                <Form.Item label="为同一人助力次数限制">
                    {getFieldDecorator('limitNumForEachPerson', {
                        initialValue: data.limitNumForEachPerson || 1,
                        rules: [
                            { required: true, message: '请设置 为同一人助力次数限制' },
                            { validator: validatorNum },
                        ],
                    })(
                        <InputNumber min={1} max={1000} />,
                    )}
                </Form.Item>
                <Form.Item label="超出时提示文案">
                    {getFieldDecorator('limitForEachPersonIllegalTip', {
                        initialValue: data.limitForEachPersonIllegalTip || '只能为同一人助力1次',
                        rules: [
                            { required: true, message: '请设置 超出时提示文案' },
                        ],
                    })(
                        <Input placeholder="只能为同一人助力1次" />,
                    )}
                </Form.Item>
                <Form.Item label="助力成功时提示文案">
                    {getFieldDecorator('successTip', {
                        initialValue: data.successTip || '助力成功！快去告诉你的好友吧',
                        rules: [
                            { required: true, message: '请设置 助力成功时提示文案' },
                        ],
                    })(
                        <Input placeholder="助力成功！快去告诉你的好友吧" />,
                    )}
                </Form.Item>
                <Form.Item label="其他无法助力时提示文案">
                    {getFieldDecorator('warnningTip', {
                        initialValue: data.warnningTip || '无法助力！具体原因请看活动规则',
                        rules: [
                            { required: true, message: '请设置 其他无法助力时提示文案' },
                        ],
                    })(
                        <Input placeholder="无法助力！具体原因请看活动规则" />,
                    )}
                </Form.Item>
                <Form.Item label="活动开始～结束时间">
                    {getFieldDecorator('date', {
                        initialValue: data.date || [],
                        rules: [
                            { required: true, message: '请设置 活动开始～结束时间' },
                        ],
                    })(
                        <RangePicker showTime={{ format: 'HH:mm:ss' }} />,
                    )}
                </Form.Item>
                <Form.Item label="活动结束提示文案">
                    {getFieldDecorator('activityEndTip', {
                        initialValue: data.activityEndTip,
                        rules: [
                            { required: true, message: '请设置 活动结束提示文案' },
                        ],
                    })(
                        <Input placeholder="活动已经结束啦" />,
                    )}
                </Form.Item>


                <Form.Item wrapperCol={{ span: 15, offset: 8 }}>
                    <div style={{ width: '190px' }}>
                        <Button type="primary" style={{ marginRight: '20px' }} htmlType="submit">保存</Button>
                        {/* <Button onClick={() => router.go(-1)} >取消</Button> */}
                    </div>
                </Form.Item>
            </Form></>

    )
}

const WrappedHelp = Form.create({ name: 'Help' })(Help);

export default WrappedHelp
