/**
 * Created by hao.cheng on 2017/4/16.
 */
import React from 'react';
import { Table, Input, Button } from 'antd';
import { trailwayDelUser, trailwayListUsers } from '../../service';
import AddUser from './AddUser';

class UserManage extends React.Component {
    constructor(props: {}) {
        super(props);
    }

    state = {
        filterDropdownVisible: false,
        data: [],
        searchText: '',
        filtered: false,
    };
    searchInput: any;

    componentDidMount() {
        this.refreshUser();
    }

    onInputChange = (e: any) => {
        this.setState({ searchText: e.target.value });
    };
    refreshUser = () => {
        trailwayListUsers().then((res) => {
            this.setState({
                data: res.data,
            });
        });
    };
    handleSwitchShow = () => {
        console.log('handleSwitchShow');
    };
    handleDel = (id: Number) => {
        trailwayDelUser(id);
        this.refreshUser();
    };
    render() {
        const columns = [
            {
                title: 'ID',
                dataIndex: 'id',
                key: 'id',
                sorter: (a: any, b: any) => a.id - b.id,
            },
            {
                title: '用户名',
                dataIndex: 'username',
                key: 'username',
            },
            {
                title: '管理员',
                dataIndex: 'role',
                key: 'role',
                render: (role: any) => (role === 1 ? '是' : '否'),
            },
            {
                title: '操作',
                render: (record: any) => (
                    <div>
                        <Button type="primary" size="small">
                            编辑
                        </Button>
                        <Button
                            type="primary"
                            size="small"
                            onClick={() => this.handleDel(record.id)}
                        >
                            删除
                        </Button>
                    </div>
                ),
            },
        ];
        return (
            <div>
                <Button onClick={this.refreshUser} type="primary">
                    增加用户
                </Button>
                <AddUser onSuccess={this.refreshUser}></AddUser>
                <Table columns={columns} dataSource={this.state.data} />
                <style>{`
                    .custom-filter-dropdown {
                      padding: 8px;
                      border-radius: 6px;
                      background: #fff;
                      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
                    }
                    .custom-filter-dropdown input {
                      width: 130px;
                      margin-right: 8px;
                    }
                    .highlight {
                      color: #f50;
                    }
                `}</style>
            </div>
        );
    }
}

export default UserManage;
