import React, { useState, useEffect } from 'react';
import { Form, 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';
import Navigate from '@/components/Navigate';
import AuthButton from '@/components/AuthButton'

const { Option } = Select
const { RangePicker } = DatePicker


function RechargeOrder(props) {

    // const [taNoticeList, setTaNoticeList] = useState([])
    const [data, setData] = useState({})
    const [modalData, setModalData] = useState([])
    const [visible, setvisiblea] = useState(false)

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

    const getList = params => {

        const { LocalDate, ...values } = params
        if (LocalDate != null && LocalDate.length > 0) {
            const [startTime, endTime] = LocalDate
            values.startTime = `${moment(startTime).format('YYYY-MM-DDT00:00:00')}Z`;
            values.endTime = `${moment(endTime).format('YYYY-MM-DDT23:59:59')}Z`;
        } else {
            values.startTime = null
            values.endTime = null
        }
        // if (params.startTime) {
        //     params.startTime = `${moment(params.startTime).format('YYYY-MM-DDT00:00:00')}Z`;
        // }
        // if (params.endTime) {
        //     params.endTime = `${moment(params.endTime).format('YYYY-MM-DDT23:59:59')}Z`;
        // }
        // console.log("请求数据", params)
        request({ ...apis.funds.consumeOrderByConditionlist, params: { ...values, consumeType: 'RedPacket' } }).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 showModal = (row) => {
        setvisiblea(true)
        setModalData(row)
    }

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

    }

    const columns = [
        {
            title: '订单编号',
            dataIndex: 'tradeNo',
            key: 'tradeNo',
            align: 'center',
        },
        {
            title: '消费金额',
            dataIndex: 'amount',
            key: 'amount',
            align: 'center',
            render: x => <><span>{x / 100 || ''}</span></>,
        },
        {
            title: '消费方式',
            dataIndex: 'itemType',
            key: 'itemType',
            align: 'center',
            // render: () => <>红包</>,
            render: (x, row) => <><span>{`${row.consumeType === 'RedPacket' ? '红包' : ''}`}</span></>,
        },
        {
            title: '活动名称',
            dataIndex: 'activityName',
            key: 'activityName',
            align: 'center',
        },
        {
            title: '消费下单时间',
            dataIndex: 'createDate',
            key: 'createDate',
            align: 'center',
            render: (x, row) => <><span>{`${moment(row.visitTime).format('YYYY-MM-DD HH:mm:ss')}`}</span></>,
        },
        {
            title: '接收人手机号',
            dataIndex: 'phone',
            key: 'phone',
            align: 'center',
            render: (x, row) => <><Navigate onClick={() => showModal(row)}>{x}</Navigate> </>,
        },
        {
            title: '消费状态',
            dataIndex: 'tradingStatus',
            key: 'tradingStatus',
            align: 'center',
            render: (x, row) => <><span>{row.tradingStatus === 'success' ? '成功' : '失败'}</span></>,
        },
    ]

    function download(data) {
        // if (!data) {
        //     console.log('234')
        //     return
        // }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', '消费订单.xlsx')
        document.body.append(link)
        link.click()
    }

    const exportReport = () => {
        const requestParams = props.form.getFieldsValue();

        const { LocalDate, ...values } = requestParams
        if (LocalDate != null && LocalDate.length > 0) {
            const [startTime, endTime] = LocalDate
            values.startTime = `${moment(startTime).format('YYYY-MM-DDT00:00:00')}Z`;
            values.endTime = `${moment(endTime).format('YYYY-MM-DDT23:59:59')}Z`;
        } else {
            values.startTime = null
            values.endTime = null
        }
        // if (requestParams.startTime) {
        //     requestParams.startTime = `${moment(requestParams.startTime).format('YYYY-MM-DDT00:00:00')}Z`;
        // }
        // if (requestParams.endTime) {
        //     requestParams.endTime = `${moment(requestParams.endTime).format('YYYY-MM-DDT23:59:59')}Z`;
        // }
        request({ ...apis.funds.exportConsumeOrderByCondition, responseType: 'blob', params: { ...values, consumeType: 'RedPacket' } }).then(data => {
            download(data)
        }).catch()
    }

    const { getFieldDecorator } = props.form

    return (

        <>
            <Form layout="inline" onSubmit={e => handleSubmit(e, props)}>
                <Form.Item>
                    {getFieldDecorator('tradeNo')(
                        <Input
                            placeholder="订单编号"
                        />,
                    )}
                </Form.Item>


                <Form.Item>
                    {getFieldDecorator('LocalDate')(
                        <RangePicker placeholder={['消费开始时间', '消费结束时间']} />,
                    )}
                </Form.Item>
                {/* 

                <Form.Item>
                    {getFieldDecorator('startTime')(
                        <DatePicker placeholder="消费开始时间" />,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('endTime')(
                        <DatePicker placeholder="消费结束时间" />,
                    )}
                </Form.Item> */}
                <Form.Item>
                    {getFieldDecorator('tradingStatus')(
                        <Select style={{ width: '180px' }} placeholder="消费状态">
                            <Option value="">全部</Option>
                            <Option value="success">成功</Option>
                            <Option value="fail">失败</Option>
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('consumeType')(
                        <Select style={{ width: '180px' }} placeholder="消费方式">
                            <Option value="">全部</Option>
                            <Option value="RedPacket">红包</Option>
                        </Select>,
                    )}
                </Form.Item>
                <Form.Item>
                    {getFieldDecorator('phone')(
                        <Input
                            placeholder="接收人手机号"
                        />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit"> 搜索</Button>
                    <Button style={{ marginLeft: 8 }} onClick={handleReset}>重置</Button>
                </Form.Item>
            </Form>
            <div style={{ marginTop: '20px' }}>
                <AuthButton name="admin.funds.account.recharge" noRight={null}>
                    <Button type="primary" onClick={() => exportReport()} style={{ float: 'right', marginBottom: '20px', zIndex: 1 }} >导出</Button>
                </AuthButton>
            </div>
            <Table dataSource={data.records} columns={columns} pagination={false} 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>
            <Modal
                title="接收人信息"
                visible={visible}
                // onOk={handleOk}
                // confirmLoading={confirmLoading}
                onCancel={() => setvisiblea(false)}
                footer={null}
            // width="1000px"
            // maskClosable={false}
            >
                <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }}>
                    <Form.Item label="昵称">

                        <span>{modalData.nickname}</span>

                    </Form.Item>
                    <Form.Item label="头像">

                        <img src={modalData.avatarurl} alt="" width="100px" height="100px" />

                    </Form.Item>
                    <Form.Item label="姓名">

                        <span>{modalData.name || modalData.nickname}</span>

                    </Form.Item>
                    <Form.Item label="手机号">

                        <span>{modalData.phone}</span>

                    </Form.Item>
                </Form>
            </Modal>
        </>

    )
}


const WrappedRechargeOrder = Form.create({ name: 'RechargeOrder' })(RechargeOrder);

export default WrappedRechargeOrder

