import { useAjax } from '@/Hook/useAjax';
import useNewToken from '@/Hook/useNewToken';
import { getMomentsCorpUserListApi } from '@/pages/weComTask/API/businessPlan/create';
import { Table, Tag } from 'antd';
import React, { useEffect, useState } from 'react';
import { WelcomeMsgCorpUserListConfig } from './weTableConfig';

interface Props {
    data: any
}

/**
 * 朋友圈下发企微号
 * @returns 
 */
const MomentsXfCorpTabls: React.FC<Props> = ({ data }) => {

    /*************************************/
    const { token } = useNewToken()
    const [queryForm, setQueryForm] = useState<{ pageNum: number, pageSize: number, corpMomentId: number }>({
        pageNum: 1,
        pageSize: 20,
        corpMomentId: data.id,
    });

    const getMomentsCorpUserList = useAjax((params) => getMomentsCorpUserListApi(params))
    /*************************************/

    useEffect(() => {
        if (queryForm.corpMomentId) {
            getMomentsCorpUserList.run(queryForm)
        }
    }, [queryForm])

    return <Table
        dataSource={getMomentsCorpUserList?.data?.data?.records}
        loading={getMomentsCorpUserList?.loading}
        columns={WelcomeMsgCorpUserListConfig()}
        scroll={{ x: 400, y: 280 }}
        rowKey={(s) => {
            return s.id
        }}
        size='small'
        onRow={(row) => {
            return !row.status ? {
                style: { background: token.colorPrimaryBgHover }
            } : {}
        }}
        pagination={{
            total: getMomentsCorpUserList?.data?.data?.total,
            showTotal: (total) => <Tag color="cyan">总共{total}数据</Tag>,
            showSizeChanger: true,
            showLessItems: true,
            defaultCurrent: 1,
            defaultPageSize: 200,//默认初始的每页条数
            current: getMomentsCorpUserList?.data?.data?.current || 1,
            pageSize: getMomentsCorpUserList?.data?.data?.size || 20,
            onChange: (page, pageSize) => {
                setQueryForm({ ...queryForm, pageNum: page, pageSize })
            }
        }}
    />;
};

export default React.memo(MomentsXfCorpTabls);