import { useAjax } from '@/Hook/useAjax';
import { getCorpUserLogListApi, GetCorpUserLogListProps } from '@/services/adqV3/monitorEWList';
import { Button, Card, DatePicker, Input, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import { CorpUserLogTableConfig } from './tableConfig';
import moment from 'moment';

const AstraMsg: React.FC<{ localCorpCsgroupList: { label: string, value: string }[] }> = ({ localCorpCsgroupList }) => {

    /*******************************************/
    const [queryParamsNew, setQueryParamsNew] = useState<GetCorpUserLogListProps>({ pageNum: 1, pageSize: 20 });

    const getCorpUserLogList = useAjax((params) => getCorpUserLogListApi(params))
    /*******************************************/

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

    return <Card
        title={<div style={{ display: 'flex', gap: 8 }}>
            <Input style={{ width: 135 }} placeholder='UUID' allowClear value={queryParamsNew.uuid} onChange={(e) => { setQueryParamsNew({ ...queryParamsNew, uuid: e.target.value, pageNum: 1 }) }} />
            <Input style={{ width: 135 }} placeholder='下线用户ID' allowClear value={queryParamsNew.outlineCorpUserId} onChange={(e) => { setQueryParamsNew({ ...queryParamsNew, outlineCorpUserId: e.target.value, pageNum: 1 }) }} />
            <DatePicker.RangePicker
                value={(queryParamsNew?.dataTimeStart && queryParamsNew?.dataTimeEnd) ? [moment(queryParamsNew.dataTimeStart), moment(queryParamsNew.dataTimeEnd)] : undefined}
                onChange={(_, dateString) => {
                    setQueryParamsNew({ ...queryParamsNew, dataTimeStart: dateString?.[0] || undefined, dataTimeEnd: dateString?.[1] || undefined, pageNum: 1 })
                }}
            />
            <Select
                showSearch
                placeholder="请选择本地客服组"
                filterOption={(input, option) =>
                    ((option?.label ?? '') as any).toLowerCase().includes(input.toLowerCase())
                }
                style={{ width: 200 }}
                allowClear
                value={queryParamsNew?.localCsgroupId}
                onChange={(e) => {
                    setQueryParamsNew({ ...queryParamsNew, localCsgroupId: e, pageNum: 1 })
                }}
                options={localCorpCsgroupList}
            />
            <Button type='primary' onClick={() => getCorpUserLogList.refresh()}>刷新</Button>
        </div>}
        headStyle={{ padding: '0 16px' }}
        bodyStyle={{ padding: 16 }}
    >
        <Table
            dataSource={getCorpUserLogList?.data?.records}
            columns={CorpUserLogTableConfig()}
            size='small'
            bordered
            rowKey={'uuid'}
            loading={getCorpUserLogList.loading}
            scroll={{ x: 1200 }}
            pagination={{
                total: getCorpUserLogList.data?.total,
                defaultPageSize: 20,
                current: queryParamsNew.pageNum,
                pageSize: queryParamsNew.pageSize,
            }}
            onChange={(pagination, _, sorter: any) => {
                const { current, pageSize } = pagination
                const newQueryFormNew = JSON.parse(JSON.stringify(queryParamsNew))
                if (sorter && sorter?.order) {
                    newQueryFormNew['sortAsc'] = sorter?.order === 'ascend' ? true : false
                    newQueryFormNew['sortFiled'] = sorter?.field
                } else {
                    delete newQueryFormNew['sortAsc']
                    delete newQueryFormNew['sortFiled']
                }
                newQueryFormNew.pageNum = current || newQueryFormNew.pageNum
                newQueryFormNew.pageSize = pageSize || newQueryFormNew.pageSize
                setQueryParamsNew({ ...newQueryFormNew })
            }}
        />
    </Card>
};

export default React.memo(AstraMsg);