/**
 * 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';
import ChangePwd from './ChangePwd';

class UserManage extends React.Component {
    constructor(props: {}) {
        super(props);
    }
    private addUserRef = React.createRef<AddUser>();
    private changePwdRef = React.createRef<ChangePwd>();

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

    componentDidMount() {
        this.refreshUser();
    }
    refreshUser = () => {
        trailwayListUsers().then((res) => {
            this.setState({
                data: res.data,
            });
        });
    };
    showAddUser = () => {
        this.addUserRef.current?.switchShow();
        console.log('handleSwitchShow');
    };
    showChangePwd = (userId: Number) => {
        this.changePwdRef.current?.switchShow(userId);
    };
    handleDel = (id: Number) => {
        trailwayDelUser(id).then((res) => {
            if (res.code == 200) {
                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
                            onClick={() => this.showChangePwd(record.id)}
                            type="primary"
                            size="small"
                        >
                            修改密码
                        </Button>
                        <Button
                            type="primary"
                            size="small"
                            onClick={() => this.handleDel(record.id)}
                        >
                            删除
                        </Button>
                    </div>
                ),
            },
        ];
        return (
            <div>
                <Button onClick={this.showAddUser} type="primary">
                    增加用户
                </Button>
                <AddUser ref={this.addUserRef} onSuccess={this.refreshUser}></AddUser>
                <ChangePwd ref={this.changePwdRef}></ChangePwd>
                <Table
                    columns={columns}
                    dataSource={this.state.data}
                    rowKey={(record) => record.id}
                />
                <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;