/** @format */

import * as React from 'react';
import {ColumnProps} from 'antd/es/table';

import {Switch, Input, Popconfirm, notification} from 'antd';
import {useActivate} from 'react-activation';
const {Search} = Input;
import {encodeBase64} from '../../../utils/base64';
import Table from '../../../components/table';
import Result from '../../../components/result';

import {useAccountList, IaccountItem, useAdminDelete, useAdminStart} from '../../../service/accountList';
import Button from '../../../components/button';
import styles from './styles/accountList.module.scss';

interface textProps {
    checked: number;
    id: number;
}
const Enable = (text: textProps) => {
    const [startState, requestStart] = useAdminStart({
        // text.checked != 0 是将数字转化成布尔值
        checked: text.checked != 0,
    });
    // 点击改变时，获取请求
    const handleChange = () => {
        requestStart({
            admin_id: text.id,
            status: startState.checked ? 1 : 0,
        }).then((err: Error) => {
            if (err) {
                return notification.error({
                    message: '启用失败',
                    description: err,
                });
            }
        });
    };
    return <Switch checked={!startState.checked} onChange={handleChange} loading={startState.loading} />;
};
const accountList: React.FC = props => {
    const {history} = props;
    const [listState, requestList] = useAccountList({
        page_number: 1,
    });
    const [deleteState, requestDelete] = useAdminDelete();
    const handleSearch = (val: string) => {
        requestList({page_number: 1, search: val});
    };

    const addAccount = () => {
        const path = '/home/users/accountAdd';
        history.push(path);
    };
    const editGroup = () => {
        const path = '/home/users/groupEdit';
        history.push(path);
    };
    const editAccount = (record: IaccountItem) => {
        const path = '/home/users/accountEdit?' + encodeBase64('id=' + record.id + '&name=' + encodeURIComponent(record.admin_name));
        history.push(path);
    };
    const handleDelete = (record: IaccountItem) => {
        requestDelete(record.id).then(err => {
            if (!err) {
                return requestList({page_number: listState.deepData.page_number});
            } else {
                notification.error({
                    message: '删除失败',
                    description: err,
                });
            }
        });
    };
    const handlePageChange = (page: number) => {
        requestList({
            page_number: page,
        });
    };
    const columns = React.useMemo(() => {
        const tableColumns: ColumnProps<IaccountItem>[] = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
            },
            {
                title: '账号',
                dataIndex: 'admin_name',
                key: 'admin_name',
            },
            {
                title: '分组',
                dataIndex: 'group_name',
                key: 'group_name',
            },
            {
                title: '邮箱',
                dataIndex: 'admin_email',
                key: 'admin_email',
            },
            {
                title: '联系号码',
                dataIndex: 'admin_phone',
                key: 'admin_phone',
                render: (text, record) => {
                    return text ? text : '--';
                },
            },
            {
                title: '创建时间',
                dataIndex: 'created_at',
                key: 'created_at',
            },
            {
                title: '是否启用',
                dataIndex: 'status',
                render: (text, record) => {
                    return <Enable checked={text} id={record.id} />;
                },
            },
            {
                title: '操作',
                render: (text, record, index) => {
                    return (
                        <>
                            <Button
                                type='link'
                                size='small'
                                className={styles.listBtn}
                                onClick={() => editAccount(record)}
                            >
                                编辑
                            </Button>
                            {/*<Popconfirm*/}
                            {/*    title={`确定删除${record.admin_name}吗`}*/}
                            {/*    okText='确定'*/}
                            {/*    cancelText='取消'*/}
                            {/*    okType='danger'*/}
                            {/*    onConfirm={() => handleDelete(record)}*/}
                            {/*>*/}
                            {/*    <Button size='small' type='link' loading={deleteState.loading}>*/}
                            {/*        删除*/}
                            {/*    </Button>*/}
                            {/*</Popconfirm>*/}
                        </>
                    );
                },
            },
        ];
        return tableColumns;
    }, []);
    useActivate(() => {
        requestList({page_number: 1})
    });
    return (
        <>
            <div className={styles.listHeader}>
                <Search placeholder='请输入账号' disabled={listState.loading} onSearch={handleSearch} enterButton />
                <div>
                    <Button className={styles.addBtn} type='primary' onClick={addAccount}>
                        添加
                    </Button>
                    <Button onClick={editGroup}>编辑分组</Button>
                </div>
            </div>
            <Result error={listState.error} onRetry={() => requestList({page_number: 1})}>
                <Table
                    columns={columns}
                    rowKey='id'
                    loading={listState.loading}
                    dataSource={listState.dataSource}
                    pagination={{
                        current: listState.deepData.page_number,
                        total: listState.total,
                        onChange: handlePageChange,
                    }}
                />
            </Result>
        </>
    );
};
export default accountList;
