import React from 'react';
import { Input, Table, message } from 'antd';
import axios from '../../libs/axios';
import dayjs from 'dayjs';


const { Search } = Input;

class Account extends React.Component {
    constructor() {
        super();

        this.state = {
            userList: []
        };

        this.columns = [
            {
                title: '账号',
                dataIndex: 'name',
                key: 'name',
                render: (name) => (
                    <span>{name}@yoho.cn</span>
                )
            },
            {
                title: '添加时间',
                dataIndex: 'time',
                key: 'time',
                render: (time) => (
                    <span>{dayjs(time * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>
                )
            },
            {
                title: '操作',
                key: 'action',
                render: (record) => (
                    <a onClick={() => this.deleteAccount(record)}>删除</a>
                )
            },

        ];
    }
    componentDidMount() {
        return axios.get('/api/passport/account/list').then(res => {
            if (res.code !== 200) {
                return;
            }

            if (res.data && res.data.list) {
                this.setState({
                    userList: res.data.list
                });
            }
        });
    }
    addAccount(user) {
        if (!user) {
            return;
        }

        return axios.post('/api/passport/account/add', {
            account: user,
            needList: true
        }).then(res => {
            if (res.code !== 200) {
                return;
            }

            if (res.data && res.data.list) {
                this.setState({
                    userList: res.data.list
                });
            }

            if (this.refs.addInput) {
                this.refs.addInput.input.handleReset();
            }
        });
    }
    deleteAccount(record) {
        return axios.post('/api/passport/account/delete', {
            id: record._id
        }).then(res => {
            if (res.code !== 200) {
                return;
            }

            let userList = [];

            this.state.userList.forEach(val => {
                if (val._id !== record._id) {
                    userList.push(val);
                }
            });

            this.setState({ userList });
        });
    }
    render() {
        return (
            <div>
                <Search
                    ref="addInput"
                    placeholder="请输入OA账号名，多个以逗号分割"
                    enterButton="添加"
                    allowClear
                    onSearch={this.addAccount.bind(this)}
                />
                <Table
                    columns={this.columns}
                    dataSource={this.state.userList}
                    rowKey="_id"
                    size="small"
                    pagination={false}
                    bordered
                    style={{ marginTop: '20px' }}
                />
            </div>
        )
    }
}

export default Account;