import React from 'react';
import PropTypes from 'prop-types';
import {Button, Flex, Pagination, Spin, Table} from "antd";
import UserInfoTableColumn from "./UserInfoTableColumn";
import AccountInfoDrawer from "./AccountInfoDrawer";
import {UserAddOutlined} from "@ant-design/icons";
import AddUserDrawer from "./AddUserDrawer";

const UserInfoTable = props => {

    const {fetchUserInfo, spinLoading, queryRequest, setQueryRequest, queryResponse, messageApi, commonAxios} = props;

    const [drawerOpen, setDrawerOpen] = React.useState(false);
    const [drawerUserInfo, setDrawerUserInfo] = React.useState({});
    const [addUserDrawerOpen, setAddUserDrawerOpen] = React.useState(false);

    const openUserInfoDetails = (record) => {
        setDrawerOpen(true);
        setDrawerUserInfo(record);
    }

    return (
        <div>
            <Flex justify={"space-between"} align={"center"} style={{marginBottom: 10}}>
                <h3>教师管理</h3>
                <Button shape={'round'} icon={<UserAddOutlined/>} type={'default'}
                        onClick={() => setAddUserDrawerOpen(true)}>添加教师</Button>
            </Flex>
            <AccountInfoDrawer fetchUserInfoList={fetchUserInfo} open={drawerOpen} setOpen={setDrawerOpen}
                               userInfoDetails={drawerUserInfo} commonAxios={commonAxios} messageApi={messageApi}/>
            <AddUserDrawer open={addUserDrawerOpen} setOpen={setAddUserDrawerOpen} commonAxios={commonAxios}
                           fetchUserInfoList={fetchUserInfo} messageApi={messageApi}/>
            <Spin spinning={spinLoading}>
                <Table
                    columns={UserInfoTableColumn(openUserInfoDetails)}
                    dataSource={queryResponse.list}
                    pagination={false}
                />
            </Spin>
            <Pagination
                defaultCurrent={1}
                showSizeChanger
                total={queryResponse.total}
                align={'end'}
                style={{marginTop: 20}}
                onChange={(page, pageSize) => {
                    setQueryRequest({...queryRequest, page: page, size: pageSize});
                }}
            />
        </div>
    );
};

UserInfoTable.propTypes = {
    fetchUserInfo: PropTypes.func.isRequired,
    spinLoading: PropTypes.bool.isRequired,
    queryRequest: PropTypes.object.isRequired,
    setQueryRequest: PropTypes.func.isRequired,
    queryResponse: PropTypes.object.isRequired,
    messageApi: PropTypes.object.isRequired,
    commonAxios: PropTypes.object.isRequired,
};

export default UserInfoTable;