import { useAjax } from "@/Hook/useAjax"
import { useUpdateEffect } from "ahooks"
import { Button, DatePicker, Space, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { SearchOutlined } from '@ant-design/icons';
import dayjs from "dayjs"
import { groupTaskNotesTableConfig } from "./highGroupTableConfig"
import { getMessageSendTaskMsgListApi, getSendTaskGroupMsgListApi, GetSendTaskGroupMsgListProps } from "@/pages/weComTask/API/businessPlan/create"
import SearchBox from "@/pages/weComTask/components/searchBox";

interface Props {
    corpId: string
    taskId: number
}
/**
 * 群发记录
 * @returns 
 */
const HighGroupTaskNotes: React.FC<Props> = ({ corpId, taskId }) => {

    /*************************************/
    const [queryForms, setQueryForms] = useState<GetSendTaskGroupMsgListProps>({ pageNum: 1, pageSize: 20, corpId, sendTimeStartTime: dayjs().format('YYYY-MM-DD'), sendTimeEndTime: dayjs().format('YYYY-MM-DD'), taskId })

    const getMessageSendTaskMsgList = useAjax((params) => getMessageSendTaskMsgListApi(params))
    /*************************************/


    useEffect(() => {
        setQueryForms({ ...queryForms, corpId, taskId })
    }, [corpId, taskId])

    useUpdateEffect(() => {
        if (queryForms.corpId && queryForms.taskId) {
            getMessageSendTaskMsgList.run(queryForms)
        }
    }, [queryForms])

    return <Space direction="vertical" style={{ width: '100%' }}>
        <SearchBox
            bodyPadding={1}
            buttons={<Button onClick={() => getMessageSendTaskMsgList.refresh()} loading={getMessageSendTaskMsgList.loading} icon={<SearchOutlined />}>搜索</Button>}
        >
            <>
                <DatePicker placeholder="发送开始时间" value={queryForms?.sendTimeStartTime ? dayjs(queryForms.sendTimeStartTime) : undefined} onChange={(e, date: any) => { setQueryForms({ ...queryForms, sendTimeStartTime: date }) }} />
                <DatePicker placeholder="发送结束时间" value={queryForms?.sendTimeEndTime ? dayjs(queryForms.sendTimeEndTime) : undefined} onChange={(e, date: any) => { setQueryForms({ ...queryForms, sendTimeEndTime: date }) }} />
            </>
        </SearchBox>
        {/* 表 */}
        <Table
            style={{ marginBottom: 1 }}
            dataSource={getMessageSendTaskMsgList?.data?.data?.records}
            loading={getMessageSendTaskMsgList?.loading}
            columns={groupTaskNotesTableConfig(() => getMessageSendTaskMsgList.refresh())}
            scroll={{ x: 400, y: 350 }}
            rowKey={(s) => {
                return s.id
            }}
            size='small'
            rowClassName={(record) => record?.errCode === 1 ? 'errorClassName' : ''}
            pagination={{
                total: getMessageSendTaskMsgList?.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 200,//默认初始的每页条数
                current: getMessageSendTaskMsgList?.data?.data?.current || 1,
                pageSize: getMessageSendTaskMsgList?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    setQueryForms({ ...queryForms, pageNum: page, pageSize })
                }
            }}
        />
    </Space>
}

export default React.memo(HighGroupTaskNotes)