import { useAjax } from "@/Hook/useAjax"
import { Popover, Table } from "antd"
import React from "react"
import { groupErrorCountTableConfig } from "./highGroupTableConfig"
import { getGroupFailUserListApi } from "@/pages/weComTask/API/businessPlan/create"




interface Props {
    failCount: any,
    corpId: string,
    msgId: string,
    taskId: string
}

/**
 * 获取群发记录中失败客户列表
 * @returns 
 */
const GroupErrorCountList: React.FC<Props> = ({ failCount, corpId, msgId, taskId }) => {

    /***********************************/
    const getFailUserList = useAjax((params) => getGroupFailUserListApi(params))//获取朋友圈任务列表
    /***********************************/

    const getList = () => {
        getFailUserList.run({ corpId, msgId, taskId })
    }

    return <>
        {failCount ? <Popover
            trigger={['click']}
            styles={{ body: { width: 500 } }}
            content={<Table
                dataSource={getFailUserList?.data?.data?.map((item: any, index: number) => ({ ...item, id: item?.externalUserId + index }))}
                rowKey={'id'}
                scroll={{ y: 200 }}
                loading={getFailUserList.loading}
                columns={groupErrorCountTableConfig()}
            />}
            onOpenChange={(open) => {
                if (open) getList()
            }}
        >
            <a>{failCount}</a>
        </Popover> : '--'}
    </>
}

export default React.memo(GroupErrorCountList)