import React from 'react';
import { Table, Button, Spin, message, Icon, Select, Input } from 'antd';
import { provinceSelect, provinceList, getProvince } from '../../NewDicProvinceList.js';
import { companySearch } from '../../tools';
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.setState({
            loading: true
        });
        $.ajax({
            type: 'get',
            cache: false,
            url: globalConfig.context + "/api/admin/supervise/adminList",
            dataType: "json",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                province: this.state.searchProvince,
                mobile: this.state.searchMobile,
                name: this.state.searchName
            },
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        this.state.onlyProvince = thisdata.province;
                        theArr.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: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadInitialData() {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/roles',
            cache: false
        }).done((rolesres) => {
            let theAdminRole = [], rolesObj = {};
            if (rolesres.data && window.adminData) {
                rolesres.data.map((item) => {
                    theAdminRole.push(item.id);
                    rolesObj[item.id] = item.roleName;
                })
            }
            this.setState({
                roles: rolesres.data,
                theAdminRole: theAdminRole,
                rolesObj:rolesObj,
                loading: false
            });
        })
    },
    loadBindRoles(uid) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/role',
            cache: false,
            data: {
                "uid": window.adminData.uid
            }
        }).done((data) => {
            this.setState({
                currentRoles: data.data || [],
                loading: false
            });
        })
    },
    getInitialState() {
        return {
            data: [],
            roles: [],
            currentRoles:[],
            rolesObj: {},
            theAdminRole: [],
            provinceList: [],
            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 + '条数据';
                }
            },
            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'
                }
            ]
        }
    },
    componentWillMount() {
        this.state.provinceList = provinceSelect();
        this.loadData();
        this.loadInitialData();
        this.loadBindRoles();
    },
    addNew() {
        let e = {}
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    edit(e) {
        this.setState({
            modalData: e,
            modalShow: true
        })
    },
    reset() {
        this.state.searchMobile = undefined;
        this.state.searchName = undefined;
        this.state.searchProvince = undefined;
        this.loadData();
    },
    handleReturn(show, render) {
        this.state.modalShow = show;
        if (render) {
            this.loadData();
        }
    },
    render() {
        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>
                    <div className="set-search">
                        <Input placeholder="登录号"
                            value={this.state.searchMobile}
                            onChange={(e) => { this.setState({ searchMobile: e.target.value }); }} />
                        <Input placeholder="管理员名字"
                            value={this.state.searchName}
                            onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
                        <Select style={{ width: 120 }}
                            placeholder="选择一个省份"
                            showSearch
                            filterOption={companySearch}
                            value={this.state.searchProvince}
                            onChange={(e) => { this.setState({ searchProvince: e }) }} >
                            {this.state.provinceList.map((item) => {
                                return <Select.Option key={String(item.value)}>{item.label}</Select.Option>
                            })}
                        </Select>
                        <Button type="primary" onClick={() => { this.loadData() }}>搜索</Button>
                        <Button onClick={this.reset}>重置</Button>
                    </div>
                    <TheModal
                        theAdminRole={this.state.theAdminRole}
                        currentRoles={this.state.currentRoles}
                        roles={this.state.roles}
                        rolesObj={this.state.rolesObj}
                        data={this.state.modalData}
                        onlyProvince={this.state.onlyProvince}
                        show={this.state.modalShow}
                        handleReturn={this.handleReturn} />
                    <Table className='member-table'
                        columns={this.state.columns}
                        onRowClick={this.edit}
                        dataSource={this.state.data}
                        pagination={this.state.pagination} />
                </div>
            </Spin>
        );
    }
});
export default Member;