import { useSize } from 'ahooks';
import { App, Button, Card, DatePicker, Input, Pagination, Table } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import SearchBox from '../../components/searchBox';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import { delProjectGroupsApi, getProjectGroupsListApi, GetProjectGroupsListProps } from '../../API/groupManage';
import { useAjax } from '@/Hook/useAjax';
import GroupModal from './groupModal';
import style from '../bookLink/index.less'
import { GroupTableConfig } from './tableConfig';
import UpdateUser from './updateUser';

const GroupManage: React.FC = () => {

    /*******************************************/
    const { message } = App.useApp();
    const ref = useRef<HTMLDivElement>(null)
    const size = useSize(ref)

    const [queryParams, setQueryParams] = useState<GetProjectGroupsListProps>({ pageNum: 1, pageSize: 20 })
    const [queryParamsNew, setQueryParamsNew] = useState<GetProjectGroupsListProps>({ pageNum: 1, pageSize: 20 })
    const [visible, setVisible] = useState<boolean>(false)
    const [initialValues, setInitialValues] = useState<any>()
    const [userData, setUserData] = useState<{ data: any, visible: boolean }>({ data: undefined, visible: false })

    const getProjectGroupsList = useAjax((params) => getProjectGroupsListApi(params))
    const delProjectGroups = useAjax((params) => delProjectGroupsApi(params))
    /*******************************************/

    useEffect(() => {
        getProjectGroupsList.run(queryParamsNew)
    }, [queryParamsNew])

    const handleUser = (data: any) => {
        setUserData({ data, visible: true })
    }

    const handleEdit = (data: any) => {
        setInitialValues(data)
        setVisible(true)
    }

    const handleDel = (groupId: number) => {
        delProjectGroups.run(groupId).then(res => {
            getProjectGroupsList.refresh()
            message.success('删除成功')
        })
    }

    return <Card
        styles={{ body: { padding: 0, display: 'flex', flexDirection: 'column', height: 'calc(100vh - 88px)' } }}
    >
        <div>
            <SearchBox
                bodyPadding={`10px 16px 4px`}
                buttons={<>
                    <Button type="primary" onClick={() => {
                        setQueryParamsNew({ ...queryParams, pageNum: 1 })
                    }} loading={getProjectGroupsList.loading} icon={<SearchOutlined />}>搜索</Button>
                    <Button type="primary" icon={<PlusOutlined />} onClick={() => setVisible(true)}>新增项目组</Button>
                </>}
            >
                <>
                    <Input onChange={(e) => setQueryParams({ ...queryParams, name: e.target.value as any })} value={queryParams?.name} placeholder="项目组名称" allowClear />
                    <DatePicker.RangePicker placeholder={['开始时间创建', '结束时间创建']} onChange={(date, dateString) => setQueryParams({ ...queryParams, createTimeStart: dateString[0], createTimeEnd: dateString[1] })} />
                </>
            </SearchBox>
        </div>

        <div className={style.bookLinkTable} ref={ref}>
            <Table
                dataSource={getProjectGroupsList?.data?.data?.records}
                columns={GroupTableConfig(handleUser, handleEdit, handleDel)}
                bordered
                className='resetTable'
                pagination={false}
                rowKey={'id'}
                size='small'
                loading={getProjectGroupsList?.loading}
                scroll={{ y: size?.height && ref.current ? size?.height - ref.current.querySelector('.ant-table-thead').clientHeight : 300 }}
            />
        </div>
        <div className={style.bookLinkPagination}>
            <Pagination
                size="small"
                total={getProjectGroupsList?.data?.data?.total || 0}
                showSizeChanger
                showQuickJumper
                pageSize={getProjectGroupsList?.data?.data?.size || 20}
                current={getProjectGroupsList?.data?.data?.current || 1}
                onChange={(page: number, pageSize: number) => {
                    setTimeout(() => {
                        setQueryParams({ ...queryParams, pageNum: page, pageSize })
                        setQueryParamsNew({ ...queryParamsNew, pageNum: page, pageSize })
                    }, 50)
                }}
                showTotal={(total: number) => <span style={{ fontSize: 12 }}>共 {total} 条</span>}
            />
        </div>

        {/* 新增项目组 */}
        {visible && <GroupModal
            visible={visible}
            initialValues={initialValues}
            onChange={() => {
                setVisible(false)
                setInitialValues(undefined)
                getProjectGroupsList.refresh()
            }}
            onClose={() => {
                setInitialValues(undefined)
                setVisible(false)
            }}
        />}

        {/* 修改用户 */}
        {userData?.visible && <UpdateUser
            {...userData}
            onClose={() => {
                setUserData({ data: undefined, visible: false })
            }}
            onChange={() => {
                setUserData({ data: undefined, visible: false })
                getProjectGroupsList.refresh()
            }}
        />}
    </Card>
};

export default GroupManage;