import React, { useState, useEffect } from 'react';
import { Form, Row, Col, Input, Button, Icon, Select, message, Table, Divider, Tag, Pagination, Modal, Breadcrumb, InputNumber } from 'antd';
import router from 'umi/router';
import moment from 'moment';
import Navigate from '@/components/Navigate';
import apis from '../../../../services/apis';
import request from '../../../../utils/request';
import Styles from './styles.less';


function RedPacket(props) {

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

    useEffect(() => {
        getMoneyDetail()
        // getList({ pageNum: 1, pageSize: 10 });
    }, [])
    // 查询列表
    //     moneyDetail
    // updateMoney

    const getMoneyDetail = () => {
        request({ ...apis.redPacket.moneyDetail, urlData: { id } }).then(data => {
            setData(data)
        })
    }

    const updateRedPacket = data => {
        request({ ...apis.redPacket.updateMoney, urlData: { id }, data: { ...data } }).then(data => {
            // setData(data)
            message.info('操作成功')
        })
    }

    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                values.budget = Math.round(values.budget * 100)
                values.minPacket = Math.round(values.minPacket * 100)
                values.maxPacket = Math.round(values.maxPacket * 100)
                console.log(values, '------222-------')
                // values
                updateRedPacket(values)
            }
        },
        )
    }

    const toRecharge = () => {

        router.push({
            pathname: '/funds/accountfunds',
        })
    }


    const { getFieldDecorator } = props.form
    const { taRedPacketClient } = data

    return (

        <>
            <Row style={{ marginBottom: '40px' }}>
                <Col span={8} style={{ paddingRight: '30px' }}>
                    <div className={Styles.redHeader}>
                        <div className={Styles.redHeaderTop}><span className={Styles.redHeaderTopText}>账户余额/元</span><span className={Styles.redHeaderTopNum}>{data.availableBalance / 100 || 0}</span></div>
                        <div className={Styles.redHeaderBottom}> <Navigate onClick={() => toRecharge()}>去充值</Navigate></div>
                    </div>
                </Col>
                <Col span={8} style={{ padding: '0 10px' }}>
                    <div className={Styles.redHeader}>
                        {/* packetSendedNum */}
                        <div className={Styles.redHeaderTop}><span className={Styles.redHeaderTopText}>已发送红包总数量/个</span><span className={Styles.redHeaderTopNum}>{data.sendNum || 0}</span></div>
                        <div className={Styles.redHeaderBottom}><Navigate onClick={() => props.toDetail()}>查看详情</Navigate></div>
                    </div>
                </Col>
                <Col span={8} style={{ paddingLeft: '30px' }}>
                    <div className={Styles.redHeader}>
                        <div className={Styles.redHeaderTop}><span className={Styles.redHeaderTopText}>已发送红包金额/元</span><span className={Styles.redHeaderTopNum}>{data.sendTotalAmount / 100 || 0}</span></div>
                        <div className={Styles.redHeaderBottom}><Navigate onClick={() => props.toDetail(1)}>查看详情</Navigate></div>
                    </div>
                </Col>
            </Row>
            <Form labelCol={{ span: 8 }} wrapperCol={{ span: 12 }} onSubmit={handleSubmit}>
                <Form.Item label="本次红包预算/元">
                    {getFieldDecorator('budget', {
                        initialValue: data.budget / 100,
                        rules: [

                            { required: true, message: '请设置合适的红包预算金额', pattern: new RegExp('^[0-9]{1,5}([.][0-9]{1,2})?$') },
                            {
                                validator: (rule, value, callback) => {
                                    callback(value > (data.availableBalance + data.sendTotalAmount) / 100 ? '预算超支' : value < data.sendTotalAmount / 100 ? '红包预算不能小于已发送红包金额' : undefined)
                                }
                            }
                        ],
                    },
                    )(
                        <Input type="number"
                            // formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
                            // parser={value => value.replace(/\$\s?|(,*)/g, '')}
                            min={0}
                            max={99999}
                            step={0.01}
                        />,
                    )}
                </Form.Item>
                <Form.Item label="单个红包金额范围/元">
                    {getFieldDecorator('minPacket', {
                        initialValue: data.minPacket / 100 || 3,
                        rules: [
                            { required: true, message: '请设置合适的最小红包值', pattern: new RegExp('^[0-9]{1,5}([.][0-9]{1,2})?$') },
                        ],
                    })(
                        <InputNumber min={1} max={199} />,
                    )}~
                     {getFieldDecorator('maxPacket', {
                        initialValue: data.maxPacket / 100 || 3,
                        rules: [
                            { required: true, message: '请设置合适的最大红包值', pattern: new RegExp('^[0-9]{1,5}([.][0-9]{1,2})?$') },
                        ],
                    })(
                        <InputNumber min={1} max={199} />,
                    )}
                </Form.Item>
                {/*  */}
                <Form.Item label="发放红包个数上限">
                    {getFieldDecorator('limitPacketNum', {
                        initialValue: data.limitPacketNum === -1 ? -1 : data.limitPacketNum,
                        rules: [
                            // { required: false, message: '请设置合适的发放红包个数上限', pattern: new RegExp('^[0-9]{1,99}\d*$') }, help="-1为不限制红包个数" 
                            {
                                validator: (rule, value, callback) => {
                                    // callback(((value > data.sendNum || data.limitPacketNum === -1) ? undefined : '不能小于已发送个数'))
                                    callback(value >= data.sendNum ? undefined : value == -1 ? undefined : '不能小于已发送个数')
                                },
                            },

                        ],
                    })(<InputNumber precision={0} min={-1} />,
                    )} -1为不限制红包个数
                </Form.Item>
                {/* <Form.Item label="余额或预算不足时提示文案">
                    {getFieldDecorator('insufficientBalanceTip', {
                        initialValue: data.insufficientBalanceTip || '红包已发送完毕，谢谢您的参与',
                        rules: [
                            { required: true, message: '请设置余额或预算不足时提示文案' },
                        ],
                    })(
                        <Input placeholder="红包已发送完毕，谢谢您的参与" />,
                    )}
                </Form.Item> */}
                {/* font-size:22px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(102,102,102,1); */}
                <Row>
                    <Col span={8} style={{ textAlign: 'end', fontSize: '0.13rem', fontWeight: '500', color: 'rgba(102,102,102,1)', padding: '0 0.076rem' }}>配置消息</Col>
                </Row>
                <Form.Item label="商户名称" >
                    {getFieldDecorator('mchName', {
                        initialValue: data.mchName,
                        rules: [
                            { required: true, message: '请设置商户名称' },
                            { max: 10, message: '标商户名称长度不能超过10个字符' }
                        ],
                    })(
                        <Input placeholder="{小程序名}" />,
                    )}
                </Form.Item>
                <Form.Item label="红包祝福语">
                    {getFieldDecorator('blessing', {
                        initialValue: data.blessing,
                        rules: [
                            { required: true, message: '请设置红包祝福语' },
                        ],
                    })(
                        <Input placeholder="祝您中个大红包！" />,
                    )}
                </Form.Item>
                <Form.Item label="活动名称">
                    {getFieldDecorator('activityName', {
                        initialValue: data.activityName,
                        rules: [
                            { required: true, message: '请设置活动名称' },
                        ],
                    })(
                        <Input placeholder="{活动标题}" />,
                    )}
                </Form.Item>
                <Form.Item label="备注">
                    {getFieldDecorator('remark', {
                        initialValue: data.remark,
                        rules: [
                            { required: true, message: '请设置remark' },
                        ],
                    })(
                        <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 WrappedRedPacket = Form.create({ name: 'RedPacket' })(RedPacket);

export default WrappedRedPacket
