import React,{Component}from 'react';
import {Button, DatePicker, Icon, Input, message, Select, Table} from "antd";
import SpinContainer from "../../../SpinContainer";
import $ from "jquery/src/ajax";
import moment from "moment";

const { RangePicker } = DatePicker;

class Pay extends Component{
    constructor(props) {
        super(props);
        this.state={
            searchUserName: '',
            searchPayState: '',
            time: [],
            loading: false,
            columns:[
                {
                    title: '序号',
                    dataIndex: 'key',
                    key: 'key'
                },
                {
                    title: '用户ID',
                    dataIndex: 'userNo',
                    key: 'userNo'
                },
                {
                    title: '用户呢称',
                    dataIndex: 'userName',
                    key: 'userName'
                },
                {
                    title: '电话',
                    dataIndex: 'mobile',
                    key: 'mobile'
                },
                {
                    title: '发起支付时间',
                    dataIndex: 'createTimes',
                    key: 'createTimes'
                },
                {
                    title: '支付产品',
                    dataIndex: 'projectName',
                    key: 'projectName'
                },
                {
                    title: '金额',
                    dataIndex: 'projectAmount',
                    key: 'projectAmount'
                },
                {
                    title: '支付状态',
                    dataIndex: 'payStatus',
                    key: 'payStatus',
                    render: (text, record) => (
                        text === 0 ? '未支付' :
                            text === 1 ? '已支付' :
                                text === 2 ? '支付失败' : ''
                    )
                },
            ],
            dataSource:[],
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },

        }
        this.search = this.search.bind(this);
        this.reset = this.reset.bind(this);
        this.tableRowClick = this.tableRowClick.bind(this);
        this.loadData = this.loadData.bind(this);
    }

    search(){this.loadData();}

    reset(){
        this.setState({
            searchUserName: '',
            searchPayState: '',
            time: [],
        },()=>{
            this.loadData();
        })
    }

    tableRowClick(){

    }

    loadData(pageNo = 1) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/order/list",
            data: {
                pageNo: pageNo || 1,
                pageSize: 10,
                name: this.state.searchUserName || undefined,
                payStatus: this.state.searchPayState || undefined,
                startTime: this.state.time[0] || undefined,
                endTime: this.state.time[1] || undefined,
            }
        }).done((data1) => {
            let theArr = [];
            if (data1.error.length !== 0) {
                message.warning(data1.error[0].message);
            } else {
                for (let i = 0; i < data1.data.list.length; i++) {
                    data1.data.list[i].key = (data1.data.pageNo-1)*10+(i+1);
                }
                this.state.pagination.current = data1.data.pageNo;
                this.state.pagination.total = data1.data.totalCount;
            }
            this.setState({
                dataSource: data1.data.list,
                pagination: this.state.pagination,
            });
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this))
    }

    componentDidMount() {
        this.loadData();
    }

    render() {
        return (
            <div className="user-content" >
                <div className="content-title">
                    <span>支付管理</span>
                </div>
                <div className="user-search">
                    <Input style={{bottom:'5px'}} placeholder="用户关键字" value={this.state.searchUserName} onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
                    <Select
                        placeholder="请选择支付状态"
                        style={{ width: 120 }}
                        value={this.state.searchPayState+"" || undefined}
                        onChange={e => {
                            this.setState({
                                searchPayState: e
                            });
                        }}
                    >
                        <Option value="0">未支付</Option>
                        <Option value="1">已支付</Option>
                        <Option value="2">支付失败</Option>
                    </Select>
                    <span style={{ fontSize: 14 }} >提交日期：</span>
                    <RangePicker
                        value={[
                            this.state.time[0] ? moment(this.state.time[0]) : null,
                            this.state.time[1] ? moment(this.state.time[1]) : null
                        ]}
                        onChange={(data, dataString) => {
                            this.setState({ time: dataString });
                        }}
                    />
                    <Button type="primary" onClick={this.search} style={{marginLeft:'10px'}}>搜索</Button>
                    <Button onClick={this.reset}>重置</Button>
                </div>
                <div className="patent-table">
                    <SpinContainer spinning={this.state.loading}>
                        <Table columns={this.state.columns}
                               dataSource={this.state.dataSource}
                               pagination={this.state.pagination}
                               onRowClick={this.tableRowClick} />
                    </SpinContainer>
                </div>
            </div >
        )
    }
}

export default Pay;
