import React from 'react';
import { Table, Button, Spin, message, Icon } from 'antd';
import { getProvince } from '../../NewDicProvinceList';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import TheModal from './modal.jsx';

const Member = React.createClass({
    loadData(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        return $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/supervise/adminList",
            dataType: "json",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize
            },
            success: function (data) {
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                    return;
                };
                for (let i = 0; i < data.data.list.length; i++) {
                    let thisdata = data.data.list[i];
                    this.state.onlyProvince = thisdata.province;
                    this.state.data.push({
                        key: i,
                        id: thisdata.id,
                        mobile: thisdata.mobile,
                        name: thisdata.name,
                        email: thisdata.email,
                        createTime: thisdata.createTime,
                        number: thisdata.number,
                        province: thisdata.province,
                        position: thisdata.position,
                        superior: thisdata.superior,
                        superiorId: thisdata.superiorId,
                        createTimeFormattedDate: thisdata.createTimeFormattedDate
                    });
                };
                this.state.pagination.current = data.data.pageNo;
                this.state.pagination.total = data.data.totalCount;
                this.setState({
                    data: this.state.data,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            data: [],
            dataSource: [],
            selectedRowKeys: [],
            selectedRows: [],
            loading: false,
            modalData: {},
            modalShow: false,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            }
        }
    },
    componentDidMount() {
        this.loadData();
    },
    addNew() {
        let e = {}
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    edit(e) {
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    handleReturn(show, render) {
        this.state.modalShow = show;
        if (render) {
            this.loadData();
        }
    },
    render() {
        const columns = [{
            title: '编号',
            dataIndex: 'number',
            key: 'number'
        }, {
            title: '登录账号',
            dataIndex: 'mobile',
            key: 'mobile'
        }, {
            title: '名字',
            dataIndex: 'name',
            key: 'name'
        }, {
            title: '职位',
            dataIndex: 'position',
            key: 'position'
        }, {
            title: '上级管理员',
            dataIndex: 'superior',
            key: 'superior'
        }, {
            title: '省份',
            dataIndex: 'province',
            key: 'province',
            render: text => {
                return text ? text.split(',').map((item) => {
                    return getProvince(item) + ' '
                }) : []
            }
        }, {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email'
        }, {
            title: '创建时间',
            dataIndex: 'createTimeFormattedDate',
            key: 'createTimeFormattedDate'
        }];
        return (
            <Spin spinning={this.state.loading}>
                <div className="set-content">
                    <div className="set-title">
                        <span>管理员设置</span>
                        <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
                            onClick={this.addNew}>添加<Icon type="plus" /></Button>
                    </div>
                    <TheModal data={this.state.modalData} onlyProvince={this.state.onlyProvince} show={this.state.modalShow} handleReturn={this.handleReturn} />
                    <Table className='member-table'
                        columns={columns}
                        onRowClick={this.edit}
                        dataSource={this.state.data}
                        pagination={this.state.pagination} />
                </div>
            </Spin>
        );
    }
});
export default Member;