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

class User extends Component{
    constructor(props) {
        super(props);
        this.state={
            searchUserName: '',
            loading: false,
            columns:[
                {
                    title: '序号',
                    dataIndex: 'key',
                    key: 'key'
                },
                {
                    title: '用户ID',
                    dataIndex: 'id',
                    key: 'id'
                },
                {
                    title: '用户呢称',
                    dataIndex: 'nickname',
                    key: 'nickname'
                },
                {
                    title: '电话',
                    dataIndex: 'phone',
                    key: 'phone'
                },
                {
                    title: '注册时间',
                    dataIndex: 'createTimes',
                    key: 'createTimes'
                },
                {
                    title: '是否购买',
                    dataIndex: 'buy',
                    key: 'buy',
                    render: (text, record) => {
                        return text === 0 ? '无' : '是'
                    }
                },
            ],
            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: ''
        },()=>{
            this.loadData();
        })
    }

    tableRowClick(){

    }

    loadData(pageNo = 1) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/userList",
            data: {
                pageNo: pageNo || 1,
                pageSize: 10,
                userName: this.state.searchUserName || 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 placeholder="用户关键字" value={this.state.searchUserName}
                           onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
                    <Button type="primary" onClick={this.search}>搜索</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 User;
