import { useAjax } from "@/Hook/useAjax"
import { useUpdateEffect } from "ahooks"
import { Space, Table, Tag } from "antd"
import React, { useEffect, useState } from "react"
import { getMomentCorpUserListApi } from "@/pages/weComTask/API/businessPlan/create"
import { WelcomeMsgCorpUserListConfig } from "./momentTableConfig"

interface Props {
    corpId: string
    taskId: number
}
/**
 * 群发下发企微号列表
 * @param param0 
 * @returns 
 */
const MomentXfCorpTabls: React.FC<Props> = ({ corpId, taskId }) => {

    /******************************/
    const [queryForms, setQueryForms] = useState<any>({ pageNum: 1, pageSize: 20, corpId, corpMomentId: taskId })

    const getMomentCorpUserList = useAjax((params) => getMomentCorpUserListApi(params))
    /******************************/

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

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

    return <div>
        <Space>
            <span>下发企微号</span>
            <a onClick={() => getMomentCorpUserList.refresh()}>刷新</a>
        </Space>
        {/* 表 */}
        <Table
            style={{ marginBottom: 1 }}
            dataSource={getMomentCorpUserList?.data?.data?.records}
            loading={getMomentCorpUserList?.loading}
            columns={WelcomeMsgCorpUserListConfig()}
            scroll={{ x: 400, y: 500 }}
            rowKey={(s) => {
                return s.id
            }}
            size='small'
            pagination={{
                total: getMomentCorpUserList?.data?.data?.total,
                showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
                showSizeChanger: true,
                showLessItems: true,
                defaultCurrent: 1,
                defaultPageSize: 200,//默认初始的每页条数
                current: getMomentCorpUserList?.data?.data?.current || 1,
                pageSize: getMomentCorpUserList?.data?.data?.size || 20,
                onChange: (page, pageSize) => {
                    setQueryForms({ ...queryForms, pageNum: page, pageSize })
                }
            }}
        />
    </div>
}

export default React.memo(MomentXfCorpTabls)