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

const TradingStatus = {
    // processing: '进行中',
    success: '成功',
    fail: '失败',
}

function RedPacketRecord(props) {

    // const [taNoticeList, setTaNoticeList] = useState([])

    const { id, toRedPacketRecord } = props
    const [data, setData] = useState({})

    useEffect(() => {
        console.log(toRedPacketRecord, 'toRedPacketRecord')
        if (toRedPacketRecord === 1) {
            props.form.setFieldsValue({ tradingStatus: 'success' })
            getList({ pageNum: 1, pageSize: 10, tradingStatus: 'success' });
        } else { getList({ pageNum: 1, pageSize: 10 }); }

    }, [])
    // 查询列表

    const getList = params => {
        request({ ...apis.redPacket.listSendRecord, params: { ...params, activityId: id } }).then(data => {
            setData(data)
        })
    }

    function handleSubmit(e) {
        e.preventDefault();
        props.form.validateFields((err, values) => {
            if (!err) {
                // eslint-disable-next-line no-console
                console.log('提交数据: ', values)
                getList({ pageNum: 1, pageSize: 10, ...values })
            }
        });
    }

    function handleReset() {
        props.form.resetFields();

        getList({ pageNum: 1, pageSize: 10 })
    }

    const changePageNum = pageNumber => {
        props.form.validateFields((err, values) => {
            if (!err) {
                getList({ pageNum: pageNumber, pageSize: 10, ...values })
            }
        });
    }

    const columns = [
        {
            title: '订单号',
            dataIndex: 'tradeNo',
            key: 'tradeNo',
            align: 'center',
        },
        {
            title: '用户昵称',
            dataIndex: 'nickname',
            key: 'nickname',
            align: 'center',
        },
        {
            title: '头像',
            dataIndex: 'avatarurl',
            key: 'avatarurl',
            align: 'center',
            render: (x, row) => <img src={row.avatarurl} alt="" width="64px"></img >,
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
        },
        {
            title: '发放时间',
            key: 'createDate',
            align: 'center',
            render: (x, row) => <span>{`${moment(row.createDate).format('YYYY-MM-DD HH:mm:ss')}`}</span>,
        },
        {
            title: '金额（元）',
            dataIndex: 'amount',
            key: 'amount',
            align: 'center',
            render: x => <span>{x / 100}</span >,
        },
        {
            title: '发送状态',
            dataIndex: 'tradingStatus',
            key: 'tradingStatus',
            align: 'center',
            render: x => <span>{TradingStatus[x] || ''}</span>,
        },
    ]

    const { getFieldDecorator } = props.form

    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                <Form.Item>
                    {getFieldDecorator('tradeNo')(
                        <Input
                            placeholder="订单号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('phone')(
                        <Input
                            placeholder="手机号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('tradingStatus')(
                        <Select style={{ width: '180px' }} placeholder="发送状态">
                            <option value="">全部</option>
                            {
                                Object.keys(TradingStatus).map(k => {
                                    const key = `tds-${k}`;
                                    return (<option key={key} value={k}>{TradingStatus[k]}</option>);
                                })
                            }
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit"> 搜索</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                </Form.Item>
            </Form>

            <Table dataSource={data.records} columns={columns} pagination={false} rowKey={r => r.qrCodeId} style={{ marginTop: '20px' }} />
            <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '30px' }}>
                <Pagination
                    showQuickJumper
                    defaultCurrent={1}
                    total={data.total} onChange={e => changePageNum(e)} current={data.current} />
            </div>
        </>

    )
}

const WrappedRedPacketRecord = Form.create({ name: 'RedPacketRecord' })(RedPacketRecord);

export default WrappedRedPacketRecord
