import { useAjax } from '@/Hook/useAjax';
import { getLocalCsgroupDayListApi, GetLocalCsgroupDayListProps } from '@/services/adqV3/monitorEWList';
import { Button, Card, DatePicker, Select, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import moment from 'moment';
import { LocalCsgroupDayListTableConfig } from './tableConfig';

/**
 * 客服组加粉数据
 * @returns 
 */
const AstraGroup: React.FC<{ localCorpCsgroupList: { label: string, value: string }[] }> = ({ localCorpCsgroupList }) => {

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

    const getLocalCsgroupDayList = useAjax((params) => getLocalCsgroupDayListApi(params))
    /*******************************************/

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

    return <Card
        title={<div style={{ display: 'flex', gap: 8 }}>
            <DatePicker
                value={queryParamsNew?.day ? moment(queryParamsNew.day) : undefined}
                onChange={(_, dateString) => {
                    setQueryParamsNew({ ...queryParamsNew, day: dateString, 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={() => getLocalCsgroupDayList.refresh()}>刷新</Button>
        </div>}
        headStyle={{ padding: '0 16px' }}
        bodyStyle={{ padding: 16 }}
    >
        <Table
            dataSource={getLocalCsgroupDayList?.data?.records}
            columns={LocalCsgroupDayListTableConfig()}
            size='small'
            bordered
            rowKey={'id'}
            loading={getLocalCsgroupDayList.loading}
            scroll={{ x: 1200 }}
            pagination={{
                total: getLocalCsgroupDayList.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(AstraGroup);